jQuery全录笔记

最新推荐文章于 2023-02-23 21:39:11 发布

走路的猫头鹰

最新推荐文章于 2023-02-23 21:39:11 发布

阅读量192

点赞数

分类专栏： javascript jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/u014268482/article/details/103811988

版权

javascript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

jQuery全录笔记

JQuery 入口函数

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //js的入口函数
        window.onload = function(){
            //整个网页资源加载完毕再执行这里的代码
            console.log("1");
        };
        
        window.onload = function(){
            //整个网页资源加载完毕再执行这里的代码
            console.log("2");
        };
    </script>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(function(){ // 简写
            //网页文档(标签)加载完毕，就执行这里的代码
            console.log("3");
        });
        $(document).ready(function(){
            //网页文档(标签)加载完毕，就执行这里的代码
            console.log("4");
        });
        $().ready(function(){
            //网页文档(标签)加载完毕，就执行这里的代码
            console.log("5");
        });
    </script>
</head>
<body>
    <div></div>
</body>

两种加载模式的区别：

执行时机不同

window.onload方法需要等所有的资源（CSS\JS\图片等）都加载完毕后再执行函数中的代码。
jQuery框架的ready方法只等DOM文档加载完毕后立即执行包裹代码。
执行次数不同

window.onload方法，只会执行一次，后面的会把前面的覆盖

jQuery框架的ready方法，有几次执行几次，不存在覆盖的问题。
jQuery存在多种简写方式

完整的编写方式：$(document).ready(function(){})

简写方式：

$().ready(function () {})
$(function () {})

jQuery选择器

jQuery 最核心的组成部分就是选择器引擎。它完全继承了 CSS 的风格,可以对 DOM 元素的标签名、属性
名、状态等进行快速准确的选择，而且不必担心浏览器的兼容性，写法更加简洁。

jQuery 选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选
择。

优点：相对于直接使用 JavaScript 获取页面元素和处理业务逻辑相比，使用jQuery 选择器来进行操作代码
更简单，且拥有完善的代码检测机制。

jQuery 选择器根据获取页面中元素的不同，可以划分为四大类 : 基本选择器、层级选择器、筛选选择器和表单选择器。

基本选择器

基本选择器主要有： ID选择器、类选择器、标签选择器、并集选择器和通配符选择器。

选择器	语法	功能	参考实例
ID选择器	#id	根据给定的id匹配一个元素	$("#divId")
类选择器	.class	根据给定的class匹配所有的元素	$(".classValue")
标签选择器	element	根据给定的元素名匹配所有的元素	$(“elementName”)
通配符选择器	*	匹配所有的元素	$("*")
并集选择器	#id,.class	将每中选择器的结果合并在一起后返回	$("#divId,.class")

层级选择器

层次关系包括 后代、直接后代、下一个相邻兄弟和后面所有兄弟元素

选择器	语法	功能	参考实例
后代选择器	parent child	根据祖先元素匹配所有的后代元素	$(“div p”)
直接后代选择器	parent>child	根据父元素匹配所有的子元素	$(“div>.box”)
下一个相邻兄弟	prev+next	匹配所有紧接在prev元素后的相邻元素	$("#div+p")
后面所有兄弟	prev~siblings	匹配prev元素之后的所有兄弟元素	$("#div~p")

基本筛选选择器

选择器语法	功能
:first	获取第一个元素
:last	获取最后一个元素
:eq	获取指定索引值的元素
:gt(index)	获取大于给定索引值的元素
:lt(index)	获取小于给定索引值的元素
:not(selector)	获取除给定选择器外的所有元素
:header	获取所有标题类型的元素
:animated	获取正在执行动画效果的元素
:even	获取所有索引值为偶数的元素，索引从0开始
:odd	获取所有索引值为奇数的元素，索引从0开始

内容筛选选择器

选择器语法	功能
:contains(text)	获取包含给定文本的元素
:parent	获取含有子元素或者文本的元素
:empty	获取所有不包含子元素或者文本的元素
:has(selector)	获取含有选择器所匹配的元素

属性筛选选择器

选择器语法	功能
[属性名]	获取包含给定属性的元素
[属性名1][属性名2]	获取满足多个条件的符合属性的元素
[属性名=‘value’]	获取包含给定属性且等于指定值的元素
[属性名!=value]	获取包含给定属性且值不等于给定值的元素
[属性名^=value]	获取包含给定属性且值以指定字符开头的元素
[属性名$=value]	获取包含给定属性且值以指定字符结尾的元素
[属性名*=value]	获取包含给定属性且包含指定字符或子串的元素

其它选择器(了解)

选择器语法	功能
:visible	获取所有可见的元素
:hidden	获取所有不可见元素，获取type为hidden的元素

选择器语法	功能
:checked	获取表单中所有被选中的元素
:selected	获取表单中所有被选中的option元素

选择器语法	功能
:file	获取所有的文件上传元素
:image	获取所有的图片域
:text	获取所有的单行文本域
:reset	获取所有的重置按钮
:radio	获取所有的单选按钮
:button	获取所有的按钮
:submit	获取所有的提交按钮
:checkbox	获取所有的复选框
:password	获取所有的密码框
:input	获取所有的input、`textarea`、`select`元素

jQuery操作DOM

$(selector).html(value); 修改html
$(selector).html(); 访问html
$(selector).text(value); 修改文本内容
$(selector).text(); 访问文本内容
$(selector).parent() 获取当前标签的父节点
$(selector).parents() 获取当前标签的祖先节点
$(selector).parentsUntil() 获取当前标签的祖先节点直到… (不包含该标签)
$(selector).children() 获取当前标签的子节点
$(selector).siblings() 获取当前标签的兄弟节点

获取DOM元素相关盒模型属性-位置属性:

$(selector).height(); 获取元素盒模型高度(只获取height属性值，不包括border、margin、padding)
$(selector).outerHeight(param); 获取元素高度(包括边框、内边距), 如果param等于true时，将margin包括在内。
$(selector).innerHeight(); 获取元素高度，包括padding，但不包括margin、border
$(selector).width(); 与height方法用法相同，只是获取的是width
$(selector).outerWidth(param); 与outerHeight方法用法相同，只是获取的是width
$(selector).innerWidth(); 与innerHeight方法用法相同，只是获取的是width
$(selector).offset().left; 获取DOM元素相对于relative定位的父元素左侧位置(如果父元素中没有relative定位的，则相对于body)。
$(selector).offset().top; 获取DOM元素相对于relative定位的父元素顶部位置(如果父元素中没有relative定位的，则相对于body)。
$(selector).scrollTop(); 获取因滚动而被滚去的顶部高度
$(selector).scrollLeft(); 获取因滚动而被滚去的左侧宽度

DOM节点操作

添加节点

append方法用于将元素追加至当前元素内后面位置

$(selector).append("<p>段落标签</p>"); 	// 在selector的内容后面追加"<p>段落标签</p>"

appendTo方法，用于将元素添加至指定元素的内容后面

$("<li>一段li</li>").append("ul"); 	// 将"<li>一段li</li>"添加至ul元素内后面

prepend方法用于将元素追加至当前元素内前面位置

$(selector).prepend("<p>段落标签</p>");	// 在selecotr的内容最前面追加"<p>段落标签</p>"

prependTo方法用于将当前元素加入到指定元素的前面

$("<li>一段li</li>").prepend("ul"); 	// 将"<li>一段li</li>"添加至ul元素内最前面

删除节点
- remove方法用于移除当前选中的DOM元素
```
$(selector).remove();	// 将selector选中的元素从DOM树种移除
```
- empty方法用于清空选中的元素的内容及DOM节点, 保留选中的这个节点
```
$("li").empty();	// 将li元素内容全部移除
```
- detach方法用于将当前选中的DOM元素从DOM树中分离，但仍旧缓存在内存中, 可以用变量缓存返回的已分离的jQuery封装的DOM元素，节点可以再次使用。由于仅分离了DOM节点，所以与该节点绑定的事件仍旧存在。如果该节点重新被加入到DOM树中，则事件仍旧可用。
```
var li = $("li").detach();	// 从DOM树中分离li元素，并返回li元素
```
拷贝节点
- clone 方法用于拷贝选中的节点，该方法有一个参数，当参数值为true时则会同时拷贝节点的相关事件, 默认没有传参不会拷贝事件
```
$(selector).clone(param);   // 将选中的节点拷贝，如果param值为true，则拷贝的节点的事件一并拷贝
```
替换节点
- replaceWidth方法用于将选中的对象替换成已准备好的节点元素。
```
$("div").replaceWidth("<p>这是一个段落</p>"); 	// 将div替换成"<p>这是一个段落</p>"
```
- replaceAll方法刚好与replaceWidth方法相反。该方法会将选中的元素(获取用jQuery封装的元素)替换要被替换的节点元素。
```
$("<div>这是一个DIV</div>").replaceAll("p");	// 将P元素替换成准备好的"<div>这是一个DIV</div>"
```

遍历jQuery元素

**each**方法:

<script>
    
	// 方式1
    $(selector).each(function(i, el){		// selector表示选择器
        //遍历p标签，每遍历一个p标签，就会执行一遍函数里面的代码
        //i是p标签的索引值，el是正在遍历的这个p标签(DOM对象)       
        // 其中可以用this关键字指向当前正被遍历的元素, 与el意义相同
	})
    
    // 方式2
    $.each($("p"),function(i, el){		// 刚方法不仅可以遍历jQuery对象，还可以遍历DOM对象和Array数组
        //遍历p标签，每遍历一个p标签，就会执行一遍函数里面的代码
        //i是p标签的索引值，el是正在遍历的这个p标签(DOM对象)
        console.log($(el).text());
	})
    
    // 方式2遍历数组
    var arr = [10, 20, 30];
        $.each(arr ,function(i, el){
        //i是元素在数组中的索引值，el是正在遍历的这个数组中的元素
        console.log(i, el);
	});
    
</script>

**map**方法:

<script>
	var arr1 = $("p").map(function(i, el){
        //i是p标签的索引值，el是正在遍历的这个p标签(DOM对象)
        console.log($(el).text());
        return $(el).text()    //这里书写的返回值，就是将来数组中的元素
	});
	
	console.log(arr1);
</script>

map与each方法均是遍历元素的方法，区别在于: each有两种遍历方式，且能用来遍历数组和DOM对象，而map会在每次遍历一个元素之后会返回一个值，当结束遍历后会map方法会将每次遍历返回的值组合成一个数组返回。

吸顶导航案例

<script>
$(function(){
    // 获取盒子的Y坐标
    var box_ostop = $(".box").offset().top;
    $(window).scroll(function(){

        // 每当滚动的时候都需要获取超出窗口的范围  然后和盒子Y坐标做对比
        // 如果滚动距离大于等于盒子Y坐标，就设置成固定定位，否则去掉盒子定位
        var win_st = $(window).scrollTop();  
        if(win_st>=box_ostop){
            $(".box").css({
                "position":"fixed",
                top:0
            })
        }else{
            $(".box").css({
                "position":""
            })
        }
    });
})
</script>

让页面滚动至指定位置，兼容代码:

<script>
    // 注意: scrollTop为jQuery为animate设置特别的参数，用于滚动页面至指定位置
    //$("html,body")html和body兼容不同浏览器的写法
	//scrollTop jQuery封装的网页滚动坐标的属性
	$("html,body").stop(true).animate({scrollTop:指定位置});
</script>

jQuery控制标签的属性

通过**attr()** 方法控制标签属性，使用方式和css()方法完全一致

格式：

$(selector).attr(name); 传一个字符串参数表示访问指定属性的值

$(selector).attr(name, “value”); 传两个参数表示修改指定属性的值

$(selector).attr({

name:“value”,

name:“value”,

……

}); 传一个对象参数表示多属性修改

jQuery提供了与attr相似的一个方法: prop，也可以操作标签属性，使用方式和.attr()一致，但是只能操作原生标签属性。

<button>获取标签属性</button>
<button>修改标签属性</button>
<button>同时修改多个标签属性</button>
<br><br>
<img src="images/dian.gif" height="192" width="390" class="img01" title="这是一张图片" data-mypro="123456"/>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(function(){
    $("button").eq(0).click(function(){
        console.log($("img").attr("class"))
    });

    $("button").eq(1).click(function(){
        $("img").attr("title","这是修改过的值")
    });

    $("button").eq(2).click(function(){
        $("img").attr({
            "class":"img02",
            "title":"这是修改过的值2222"
        })
    });
    //attr可以获取自定义标签属性
    console.log($("img").attr("data-mypro"));  // 123456
    //prop只能获取原生标签属性
    console.log($("img").prop("title"));  //  这是一张图片
    console.log($("img").prop("data-mypro"));  //undefined

})
</script>

操作checked、selected等控制标签状态的属性时最好使用prop

jQuery获取DOM相关数据的方法

index()获取元素的索引值

jq中给每个元素编号，这个编号从0开始，我们称为这个元素的索引值。

我们通过选中元素后， .index() 方法来获取到这个索引值。

<script>
    $(function(){
       $("li,p").click(function(){
           alert($(this).index())
       })
    })
</script>

注意：索引值表示的是这个元素在同级标签中的排行的索引值，跟它自己本身是什么标签无关

JQ操作css

jQuery框架提供了css方法，我们通过调用该方法传递对应的参数，可以方便的来批量设置标签的CSS样
式。

$(“selector”).css(name,value);
$(“selector”).css(name1,value).css(name2,value)…;
$(“selector”).css( { name1 : value , name2 : value})

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(function(){

            $("button:eq(0)").click(function(){
                console.log($("div").css('width'))
            });
            $("button:eq(1)").click(function(){
               $("div").css('width', 300).css('height', 400)
            });
            $("button:eq(2)").click(function(){
                $("div").css({
                    "width":"500px",
                    "height":"500px",
                    "background-color": "blue"
                });
                // 也可以用以下方式：
                // $("div").css({
                //     width:500,
                //     height:500,
                //     backgroundColor: "green"
                // })
            });
        })
    </script>
</head>
<body>
    <button>获取css属性值</button>
    <button>修改css属性</button>
    <button>同时修改多个css属性</button>
    <div></div>
</body>

类相关控制函数

addClass() 添加类名

removeClass() 删除类名

toggleClass() 切换类名

<script>
    $(function(){
        $("button:eq(0)").click(function(){
            $("div").addClass("box box2");
        });
        $("button:eq(1)").click(function(){
            $("div").removeClass("box");
        });
        $("button:eq(2)").click(function(){
            $("div").toggleClass("box");
        });
    })
</script>

注意：

addClass() 可以一次性添加多个类名，类名间用空格隔开

removeClass() 如果没有指定删除的类名称，则删除所有类名

jQuery动画效果

显示隐藏动画切换

.show(speed,easing,callBack) 显示

.hide(speed,easing,callBack) 隐藏

.toggle(speed,easing,callBack) 方法实现切换效果 (如果当前是显示，则切换为隐藏，如果当前为隐藏，则切换为显示)，同样可以传入数字表示动画时间

滑动显示滑动隐藏动画

.slideDown(speed,easing,callBack) 滑动显示(滑动方向跟定位有关，默认方向为向下，如果元素定位后则是定位的反方向)

.slideUp(speed,easing,callBack) 滑动隐藏(滑动方向跟定位有关，默认方向为向上，如果元素定位后则是定位的反方向)

.slideToggle(speed,easing,callBack) 滑动切换, 如果显示则滑动隐藏，如果隐藏则滑动显示

淡入淡出动画(透明度动画)

fadeIn() 淡入动画，即改变标签的透明度让标签慢慢的显示出来。

fadeOut() 淡出动画，即改变标签的透明度让标签慢慢的消失（透明度为0）。

fadeToggle() 透明度切换动画，如果当前标签的透明度不为0，那么就执行淡出动画，否则就执行淡入动画。

fadeTo (动画时间，透明值) 透明到指定值。

JQ的自定义动画

animate(params,speed,easing,callBack)

参数说明：

第一个参数：

params是一个对象。在该对象中以键值对的方式来要控制的属性样式和对应的值表示。

第二个参数：

speed速度，可以是默认字符串中的某个（“slow” “normal” “fast”）或者是自定义的数字。

第三个参数：easing为动画插件使用的可选参数，用来控制动画的表现效果，通常有linear和swing等固定值。

第四个参数：动画执行完毕后的回调函数。

JQuery动画列队机制

如果用户对一个带有动画的元素频繁操作使到动画被触发，则用户的操作次数会被记录下来，用户每操作一次，都会多执行一次动画效果，直到所有次数的动画被执行完毕。这是JQ的动画列队机制。

如果希望停止操作后就立刻停止动画，可以在动画函数前面提前调用stop 方法

$(".nav>ul>li").mouseenter(function(){
	$(this).children("ul").stop().slideDown();
}).mouseleave(function(){
	$(this).children("ul").stop().slideUp();
})

delay()让动画延迟执行

delay() 方法可以让即将执行的动画延迟一段时间之后再执行，传入数字表示延迟时间。

$(".ad").slideDown().delay(2000).slideUp();
//表示两秒钟之后再执行.slideUp()函数

该方法是在动画队列中指定位置设置一个延时器，当动画队列完成至该位置时会延迟指定的毫秒数后继续执行队列中剩下的动画。

事件相关方法

事件名称	解释
mouseenter	当鼠标移入瞬间触发
mouseleave	当鼠标移出瞬间触发
mouseover	当鼠标移入后触发
mouseout	当鼠标移出后触发
click	鼠标单击后触发
dblclick	鼠标双击后触发
hover	鼠标移入移出事件可以合并为该事件
scroll	当鼠标中间滚轮滚动时触发

hover事件有两个处理函数作为参数，可以只传入一个。当只传入一个处理函数时则表示移入和移出均由该回调函数处理

$(".nav>ul>li").hover(function(){
     $(this).children("ul").stop().slideToggle();
},function(){
     $(this).children("ul").stop().slideToggle();
})

//上面代码可以简化为：
$(".nav>ul>li").hover(function(){
     $(this).children("ul").stop().slideToggle();
})

更多事件参照jQuery api文档

在jQuery中，可以有多种方式来为标签绑定事件，可以简单的区分为 专用方法绑定事件和快捷方法绑
定事件。

快捷方法

格式：选择元素.事件类型(fn)

$(".box").click(function(){
     console.log("触发单击事件");
});

【快捷方法绑定事件】

jQuery框架中定义了多个快捷方法来为标签绑定特定类型的事件，这些方法和二级事件模型中的事件类型
对应，名称相同。

具体的快捷方法如下：
blur() 当元素失去焦点时发生 blur 事件
change() 当元素的值发生改变时，会发生 change 事件
click() 当点击元素时，会发生 click 事件
dbclick() 当双击元素时，会发生 dblclick 事件
focus() 当元素获得焦点时，发生 focus 事件
keydown() 当按键被按下时，发生 keydown 事件
keyup() 当按键被松开时，发生 keyup 事件
keypress() 当按键被按下时，发生 keypress事件（响应每个字符）
mouseenter()当鼠标指针穿过元素时，会发生 mouseenter 事件
mouseleave()当鼠标指针离开元素时，会发生 mouseleave 事件
mouseover() 当鼠标指针位于元素上方时，会发生 mouseover 事件
mouseout() 当鼠标指针从元素上移开时，会发生 mouseout 事件
mousedown() 当鼠标进入元素，并按下按键时，会发生mousedown事件

mouseup() 当在元素上放松鼠标按钮时，会发生 mouseup 事件
mousemove() 当鼠标在指定的元素中移动时，会发生 mousemove 事件
scroll() 当用户滚动指定的元素时，会发生 scroll 事件
submit() 当提交表单时，会发生 submit 事件(表单)

专用方法绑定事件(on方法)

格式： .on(“事件名称”,事件参数对象, 事件函数)

$(".box").on("click", {name:"JQuery"}, function(e){
     alert(e.data.name);
});

jQuery中可以使用四种专用方法来绑定事件，分别是 bind方法、live方法、delegate方法和on方法 ,每个版本各有区别，建议使用on方法。

补充说明：

bind方法适用于所有的版本，1.7+ 推荐使用on方法来代替。
live方法适用于 1.9- 的版本，1.9+ 版本使用on方法来代替。
delegate方法适用于1.4.2 + 的版本。
on方法适用于1.7+ 的版本，1.7+ 用于替代bind和live方法。

on方法为指定的元素添加一个或者是多个事件，并规定这些事件发生时指定的函数。
on方法的语法： on（eventType,childselector,data,function）

参数说明：
eventType：必传参数，指定事件的类型如click等。
childselector：可选参数，用于事件委托。
data：可选参数，设计需要传递的数据。
function：必传参数，事件发生时，执行的函数。

【one方法的使用】
one方法是on方法中的一种特殊使用方式，由one方法绑定的事件在执行一次响应之后就会失效。其设计思路是：在事件处理函数的内部注销当前事件

//事件只执行1次就失效
$(".box").one("click", {name:"JQuery"}, function(e){
    alert(e.data.name);
});

事件委托

通过给父级绑定事件，然后通过事件事件冒泡特性来进行事件传递。该形式的事件触发成为事件委托

//事件委托格式：
$("body").on("click",".box", {name:"JQuery"}, function(e){
    alert("事件委托格式");
    alert(e.data.name);
});

注销事件

有时候我们需要把一些元素的绑定事件注销，可以使用off方法来注销事件，即解绑事件。

$(".box").on("click", {name:"JQuery"}, function(e){
    alert(e.data.name);
    $(this).off("click");
});

// 或者直接：
$(".box").off("click");

事件对象: event

在注册事件的时候，event对象实例将作为第一个参数传递给事件的回调函数，这和DOM事件模型是完全相
同的。另外，jQuery统一了IE事件模型和DOM事件模型中event对象属性和方法的用法，使其符合DOM标准
事件模型的规范。

属性名	描述
type	获取这个事件的事件类型，例如：click
target	获取绑定事件的DOM元素
data	获取事件调用时的额外数据
relatedTarget	获取移入移出目标点离开或进入的那个DOM元素(只在鼠标移入移出事件中有效)
currentTarget	获取冒泡前触发的DOM元素，等同于this
pageX/pageY	获取相对于页面原点的水平/垂直坐标[会将已滚去的内容也算在内]相对于页面0点坐标
screenX/screenY	获取显示器屏幕位置的水平/垂直坐标（非jQuery)封装[即，像素点将菜单栏等非浏览器视口也算在内]
clientX/clientY	获取相对页面视口的水平/垂直坐标(非jQuery封装)[只计算页面渲染的位置，被滚去的内容不计算在内]
result	获取上一个相同事件的返回值
timeStamp	获取事件触发的时间戳(S大写)
which	获取鼠标的左中右键（1,2,3），或获取键盘按键
altKey/shiftKey/ctrlKey/metaKey	获取是否按下了alt、shift、ctrl或meta键
keyCode	获取键盘按键对应的编码(返回一个数字，表示对应的按键码)，例如: 回车键enter → 13

事件冒泡概念

在这里插入图片描述

阻止事件冒泡

事件冒泡的简单解释：如果某个标签的事件被触发，那么该标签父标签上被注册的相同类型事件也会被触发，并且会依次一直冒泡到顶端。

阻止事件冒泡的两种方式：

【1】在回调函数中返回false return false
【2】调用事件对象的stopPropagation e.stopPropagation()

<div class="big">
    大
    <div class="small">小</div>
</div>
<script src="js/jquery-3.4.1.js"></script>
<script>
    $(function(){
        $(".big").on("click",function(){
            alert("点击了大盒子");
        });
        $(".small").on("click",function(e){
            alert("点击了小盒子");
            // 阻止事件冒泡
            // e.stopPropagation();
            // return false
        });
    })
</script>

阻止标签默认行为

默认行为：页面中的一些标签常常存在默认的行为，比如表单的submit事件类型，如果该类型的事件被触发，则会导致表单的提交；比如a标签存在跳转网页连接的默认行为等。

如果需要在事件被触发的时候，阻止标签默认的行为，可以通过以下两种方式：

【1】在回调函数中返回false return false
【2】调用事件对象的preventDefault e.preventDefault()

<a href="http://www.baidu.com">百度一下</a>

... ...
<script>
$("a").on("click",function(e){
    // 阻止默认行为
    // e.preventDefault();
    return false
})
</script>

自定义事件

jQuery可以给标签添加自定义事件，但是自定义事件需要.trigger()方法触发才能执行：

<div></div>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function(){
        // 自定义事件
        $("div").on("danji",function(){
            $(this).css({
                width:200,
                height:200,
                background:"#fff"
            })
        });

        // 触发事件
        $("div").trigger("danji");
    })
</script>

jQuery命名对象冲突问题

我们一直在通过 $ 获取元素，如果 $ 已经作为其他变量在使用了，则可能发生命名冲突的问题，导致$ 不可用，可以通过调用jQuery对象的noConflict方法解决冲突：

<script src="js/jquery-3.4.1.js"></script>
    <script>
        $(function(){

            //如果遇到$命名冲突，可以这么解决：
            jQuery("div").css("background", "green");

            //也可以通过以下方式解决:
            // var jq = $.noConflict();
            // jq("div").css("background", "pink");
            
        });
</script>

jQuery对象与DOM对象互相转换

//  $("div")    通过JQuery选择器选出来的对象称为JQ对象
// 通过原生DOM方法 获取的标签称为原生DOM对象
// var odiv = document.getElementById("box");   //odiv为原生DOM对象


// 原生DOM对象不能直接调用JQ提供的方法
// 而JQ对象也不能直接使用原生js的属性和方法
// 都需要经过转换

	<script>
        $(function(){
            // DOM对象转JQ对象
            var odiv = document.getElementById("box");
            console.log($(odiv));
            
            // JQ对象转DOM对象
            console.log($("div")[0]);    // 方式一
            console.log($("div").get(0));   // 方式二
        })
    </script>

走路的猫头鹰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery全录笔记

jQuery全录笔记JQuery 入口函数jQuery选择器基本选择器层级选择器基本筛选选择器内容筛选选择器属性筛选选择器其它选择器(了解)jQuery操作DOM获取DOM元素相关盒模型属性-位置属性:DOM节点操作遍历jQuery元素吸顶导航案例让页面滚动至指定位置，兼容代码:jQuery控制标签的属性jQuery获取DOM相关数据的方法index()获取元素的索引值JQ操作css类相关控制函数...
复制链接

扫一扫