【jQuery】-- 基本使用步骤

33 篇文章 1 订阅
1 篇文章 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

                
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值