【jQuery】-- 基本使用步骤

发布于：2023-01-04 ⋅ 阅读:(409) ⋅ 点赞:(0)

jQuery是一个Javascript库，是对于ECMAScript、dom、bom的一个浅封装，让用户更方便操作。

♡ ‧₊˚  jQUery的安装  ‧₊˚ ♡

在 https://www.bootcdn.cn/jquery/ 中：

 

  • 从网页引入

找到需要的版本并复制相应的script标签，放到自己的html文件中即可。

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  • 从本地引入

复制链接到搜索框打开一个新的网页，将页面中出现的代码全选复制到自己的jquery.js文件中，并用script标签引入到html中 

  <script src="./jquery.js"></script>

♡ ‧₊˚  jQUery函数  ‧₊˚ ♡

通过"jQuery"和"$"来调用jQuery函数

jQuery核心函数：
    简称:jQuery函数（$/jQuery）
    引入jQuery库以后，直接使用$/jQuery即可
    当函数用:$(params)
    当对象用的时候:$.each()
jQuery核心对象：
    简称:jQuery对象 $()
    得到jQuery对象：执行jQuery函数返回的就是jQuery对象
    使用jQuery对象:$obj.xxx()

        console.log($,'jQuery函数', typeof $); // 'jQuery函数' 'function'
        console.log($(),'jQuery对象', typeof $()); // 'jQuery对象' 'object'
        console.log($() instanceof Object); // true

 入口函数

JS的入口函数：

        // 原生JS入口函数
        window.onload = function(){
            alert('我是入口函数')
        }

 jQuery的入口函数有四种不同的写法：

        // JQ入口函数的四种写法
        $(document).ready(function(){
            alert('我是入口函数1')
        })
        jQuery(document).ready(function(){
            alert('我是入口函数2')
        })
        // 推荐写法
        $(function(){
            alert('我是入口函数3')
        })
        jQuery(function(){
            alert('我是入口函数4')
        })

♡ ‧₊˚  jQUery对象  ‧₊˚ ♡

jQuery对象是类数组对象，jQuery的方法都是对类数组中的元素的批量操作

注意：jQuery对象可以调用jQuery.prototype中声明的方法，普通的Element元素则不能调用。在使用jquery的时候，拿到一个对象务必要搞明白该对象是Element元素还是jQuery实例

如下代码，this是Element元素，如果想调用jQuery方法，需要使用$()将其转换为jQuery实例

  1. <head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
        $('#btn2').click(function () {// 获取id为btn2的按钮，设置点击事件
        console.log("btn2",this); // btn2 <button id="btn2">确定</button>
        console.log("btn2",$(this)); // // 获取id为btn2的按钮，
        })
    })
    </script>
</head>
<body>
    <!-- <div>我是一个div</div> -->
    <input type="text" name="" id="">
    <button id="btn2">确定</button>
</body>
</html>

 

♡ ‧₊˚ jQuery选择器 ‧₊˚ ♡

jQuery的选择器与CSS3中的选择器几乎完全一致:

  1. 基本选择器
  2. 层次选择器

  3. 伪类选择器

  4. 伪元素选择器器

  5. 属性选择器

jQuery中所有选择器都以美元符号开头：$()， 具体用法如下：

            // 选中当前页面所有div
            $('div')
            // 选中当前页面id为one的元素
            $("#one")
            // 选中当前页面类名为two的元素
            $('.two')
            // 选中当前页面第一个button
            $('button:first')

 

♡ ‧₊˚ jQuery事件 ₊˚ ♡

jQuery的事件绑定与Element元素不同，不可以使用onxxx属性，

也不能使用addEventListener，

而是使用on()，可以理解为on是对于Element元素事件绑定的封装。 on()也支持事件代理。

  1. on(event,[selector],[data],fn)

  2. off(event,[selector],fn)

  3. one(event,[selector],fn)

  4. trigger(event,[data]) jQuery的事件绑定还支持快捷绑定

  5. click([data],fn)

jQuery事件的基本使用

语法：

  • on() off()

  • bind() unbind()

  • 快捷绑定click()等

在jQuery中，大多数DOM事件都有一个等效都jQuery方法。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery.js"></script>
    <script>
        $(function(){
            var btn = $('button:first')
            // 绑定事件 on(事件类型，传参（可选），事件处理程序)
            btn.on('click', [1,2,3], function(event){
                console.log(event, '事件对象');
                console.log(event.data);
                $(event.target).html('不想被点'); // 修改按钮里的内容
            });
            // 模拟点击事件
            btn.trigger('click') // 相当于一刷新就已经被点击一次执行了一次
        })
        // 解绑事件
        btn.off('click');
        // 绑定事件方法 bind绑定 参数（事件类型，参数（可选），事件处理程序）
        btn.bind('click', [1,2,3], function(et){
                console.log(et, '事件对象');
            });
        btn.unbind(); // 无参代表解绑全部事件
        // one 绑定事件
        btn.one('click', function(e){
                console.log('事件对象', e);
            });
        
    </script>
</head>
<body>
    <button>点我</button>
</body>
</html>

 jQuery事件代理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件代理.html</title>
</head>
<body>
  <button>点我</button>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    // 点击body
    // 第一个参数 事件类型 第二个参数(可选) 将要代理谁 第三个参数(可选) 传递给事件内部的参数 第四个参数 事件处理程序
    $('body').on('click', function (event) {
      console.log(event);
    })
    // button做代理
    $('body').on('click','button', [1,2], function (event, a, b) {
      console.log(event, a, b);
    })
    // 事件解绑 移除代理 使用off
    $('body').off('click', 'button')
    // 模拟事件执行 trigger 第一个参数 事件类型 第二个参数 数组参数(传递给形参)
    $('button').trigger('click', [1, 2])
  </script>
</body>
</html>

♡ ‧₊˚ jQuery事件类型 ‧₊˚ ♡

            // 事件类型
			$('button').dblclick(function(){
				console.log('我被双击了');
			});
            // 鼠标移过元素
			$('button').mouseenter(function(){
				$(this).css({
					backgroundColor:'red'
				})
			});
			$('button').mouseleave(function(){
				$(this).css({
					backgroundColor:'blue'
				})
			})
			$('input[type="text"]').focus(function(){
				$(this).css({
					backgroundColor:'red'
				})
			})
			$('input[type="text"]').blur(function(){
				$(this).css({
					backgroundColor:'blue'
				})
            })

♡ ‧₊˚ jQueryDOM操作 ‧₊˚ ♡

jQuery中提供了一系列的操作DOM节点的api,用于解决DOM原生API无法进行批量操作并且功能性较差的弊端。

插入方法：append、appendTo、prepend、prependTo、after、before、insertBefore、insertAfter

包裹方法：wrap、unwrap、wrapAll、wrapInner

替换方法：replaceWith、replaceAll

移除方法：empty、remove、detach

克隆方法：clone

添加新内容：

  • append() - 在被选元素的结尾插入内容（仍然在该元素的内部）

  • prepend() - 在被选元素的开头插入内容

  • after() - 在被选元素之后插入内容

  • before() - 在被选元素之前插入内容

  • 等等

复制节点:

原生DOM有 cloneNode(true/false) 浅复制false 深复制true。是否复制内部内容，并不涉及事件的复制。默认浅复制

jQuery对象有 clone(true/false) 浅复制false 深复制true。会复制内容，是否复制事件。默认浅复制

属性操作 在dom中，我们通过setAttribute/getAttribute/style来操作元素属性，jQuery中提供了更加便捷的方法

属性：attr、removeAttr、prop、removeProp css：addClass、removeClass、toggleClass、wrapInner、

内容：html、text、val

jQuery 拥有可操作 HTML 元素和属性的强大方法

三个简单实用的用于 DOM 操作的 jQuery 方法：

  • text() - 设置或返回所选元素的文本内容

  • html() - 设置或返回所选元素的内容（包括 HTML 标记）

  • val() - 设置或返回表单字段的值

 

♡ ‧₊˚ jQuery静态方法 ‧₊˚ ♡

静态方法属于定义在jQuery函数上的方法，通过jQuery或者$直接调用的方法 数组及对象操作：each、map、toArray、merge 测试操作：type、isEmptyObject、isPlainObject、isNumberic 字符串操作：param、trim

数组及对象操作

        // 静态方法
        // each遍历
        $(function(){
            var obj = {
                name:'zzy',
                age:17
            }
            // 参数：目标对象/数组， 回调函数
            $.each(obj, function(key,value){
                console.log(key, value);
            });
            var arr = [1,12,34]
            $.each(arr, function(index, item){
                console.log(index, item);
            });
            // map映射
            var arr = [11,14,35]
            var res = $.map(arr, function(item, index){
                return item+4;
            });
            console.log(res);
            // 合并数组 merge
            console.log($.merge([1,2], [3,4]));
            // 去掉字符串前后空格
            var str = '    hello    '
            console.log(str);
            // JS方法
            console.log(str.trim());
            // JQ方法
            console.log($.trim(str));

    })

字符串操作

param()：

将表单元素数组或者对象序列化。

var obj = { page: 1, age: 12 }
var str = jQuery.param(obj);
console.log(str);

parseJSON() ：解析json字符串转换为js对象/数组

// 原生js:
// JSON.parse(jsonString) json字符串 转 js对象/数组
// JSON.stringify(jsonObj/jsonArr) js对象/数组 转 json字符串
// 2.$.parseJSON(json): 解析json字符串转换为js对象/数组
var json = '{"name":"Tom", "age":12}'// 模拟一个json对象
console.log($.parseJSON(json)); // 将json对象转换为js对象
json = '[{"name":"Tom", "age":12},{"name":"lilly", "age":12}]';// json数组
console.log($.parseJSON(json));// 将json对象转换为js数组

测试操作

type()

用于检测obj的数据类型

console.log($.type($)); //function
console.log(jQuery.type(true) === "boolean");//true
console.log(jQuery.type(3) === "number");//true
console.log(jQuery.type("test") === "string");//true
console.log(jQuery.type(function(){}) === "function");//true
console.log(jQuery.type([]) === "array");//true
console.log(jQuery.type(new Date()) === "date");//true
console.log(jQuery.type(/test/) === "regexp");//true

isEmptyObject() 测试对象是否是空对象（不包含任何属性）,这个方法既检测对象本身的属性，也检测从原型继承的属性（因此没有使用hasOwnProperty方法更具体）

console.log(jQuery.isEmptyObject({})); // true
console.log(jQuery.isEmptyObject({ foo: "bar" })); //false

isPlainObject() 测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）

console.log(jQuery.isPlainObject({})); // true
console.log(jQuery.isPlainObject("test")); // false
console.log($.isPlainObject($('body')))//false

isNumberic() 确定它的参数是否是一个数字

$.isNumeric() 方法检查它的参数是否代表一个数值。如果是这样，它返回 true。否则，它返回false。该参数可以是任何类型的

console.log($.isNumeric("-10"));  // true
console.log($.isNumeric(16));     // true
console.log($.isNumeric(0xFF));   // true
console.log($.isNumeric("0xFF")); // true
console.log($.isNumeric("8e5"));  // true (exponential notation string)
console.log($.isNumeric(3.1415)); // true
console.log($.isNumeric(+10));    // true
console.log($.isNumeric(0144));   // true (octal integer literal)
console.log($.isNumeric(""));     // false
console.log($.isNumeric({}));     // false (empty object)
console.log($.isNumeric(NaN));    // false
console.log($.isNumeric(null));   // false
console.log($.isNumeric(true));   // false
console.log($.isNumeric(Infinity)); // false
console.log($.isNumeric(undefined)); // false


 

                        

                            

                                本文含有隐藏内容，请 开通VIP 后查看
                            

                        

                        

                        

                            
                            
                        

                        
                        

                            

                            
                        

                            

                                
                            

                        

                    


                



            


            

                
                

    

        

            网站公告
        

    

    

        
        
    



                

    

        

            今日签到
        

    

    

        
点亮在社区的每一天

        
        去签到
    



                

    

        

            热门文章
        

    

    

        
        

        

    

    
    
    


    



                

    

        

            最新发布