jQuery
$()
1.选择器，传入字符串的时候是选择器
2.document.ready简写，传入的是函数那么就是事件的简写
特性
jQuery喜欢一个函数n种用法
jQuery中选DOM永远是数组
jQuery的选择器
初级选择器
id class tag ； css选择器写法 = string 完全等同于JQuery的写法
jQuery事件
赋值
css(key,value)=>设置css属性 （key=value）
css(options)=> 设置一组css属性 对象之中的key和value一一对应
$("#box").css("backgroundColor","yellowgreen");取值
css("string")
css(arr)原生DOM的属性jQuery实例DOM不支持
box.style.backgroundColor = "#111";jQuery DOM 和原生DOM对象使用方法不通用
box.css("background","#111")jQuery DOM转换成原生DOM的方法就是加上下标
$box[0] === box; box.style.backgroundColor = "#111";jQuery 一组元素
选择多个jQuery元素 =>
//选择第n个元素（eq里的数值） $(".box:eq(2)").css({ background:"yellowgreen"; }) //选择第一个元素 $(".box:first").css({ background:"yellowgreen"; }) //选择最后一个元素 $(".box:last").css({ background:"yellowgreen"; }) //给.box下所有的元素添加事件 $(".box").click(function(){ alert($(this).index()); })中级选择器
通配选择器：*（选择全部）
后代选择器：a b c
群组选择器：a,b,c
直接子选择器：a>b
//后代选择器（ul下的所有li) $("ul li").css({ color : "yellowgreen" }) //直接子选择器（只对第一层子元素有作用) $("ul>li").css({ color : "#f99" }) //群组选择器（群组选择，同后代选择器） $("ul li , ul span").css({ color : "#f12" }) //通配选择器（ul下所有元素） $("ul>*").css({ color : "#f12" })高级选择器
直接子选择器：ul>li
后代选择器：ul li
ul下一个（同级）li：ul+li
ul下所有li：ul~li
//对于id为mark的所有li元素字体颜色进行修改 $("#mark+li").css({ color : "red" }) //对id为mark的所有元素字体颜色进行修改 $("#mark~*").css({ color : "red" })直接子选择器（2）：children()
后代选择器（2）：find()
//对ul下的span元素进行字体颜色修改（只对单层元素有效，同直接子选择器） $("ul").children("span").css({ color : "skyblue" }) //对ul下所有元素进行字体颜色修改（同后代选择器） $("ul").find("span").css({ color : "skyblue" })注：所有的选择方法（除了find）如果不传递参数的话，默认是*。
属性选择器
//对所有带id的div进行背景颜色更改（只有div） $("div[id]").css({ backgroundColor : "red" }) //对id为box1，并且data-id为123的div进行颜色更改 $("div[id=box1][data-id=123]").css({ backgroundColor : "red" }) //对所有id不是box1的div进行颜色更改 $("div[id!=box1]").css({ backgroundColor : "red" })伪类选择器
位置选择器
过滤选择器
可见性选择器
包含选择器
//修改第一个div的颜色 $("div:first").css({ background : "yellowgreen" }) //同上 $("div").first().css({ background : "yellowgreen" }) //修改最后一个div的颜色 $("div").last().css({ background : "yellowgreen" }) //匹配一个给定索引值的元素 $("div").eq(5).css({ background : "yellowgreen" }) //匹配所有索引值为奇数的元素，从 0 开始计数 $("div:odd").css({ background : "yellowgreen" }) //匹配所有索引值为偶数的元素，从 0 开始计数 $("div:even").css({ background : "yellowgreen" }) //匹配所有大于给定索引值的元素 $("div:gt(1)").css({ background : "yellowgreen" }) //匹配所有小于给定索引值的元素 $("div:lt(5)").css({ background : "yellowgreen" })文字选择器
//匹配带有hello字样的所有p标签（全局匹配 hello后要有空格，否则无法匹配到） $("p:contains(hello)").css({ color : "red" }) //匹配带有span标签的li（全局匹配） $("li:has(span)").css({ color : "red" })
筛选
end()
end作用：
回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box{ width: 100px; height: 100px; background: #ddd; } #box.active{ background: orange; } </style> </head> <body> <div id="box"> <div class="title"> title <p> p <span>选中</span> </p> </div> </div> <script> $("#box") .children() //div class = title .children() //p .children() //span .css({ color : "red" }) .end() //选择过程之中往回回退了一步，因此将整个p标签的样式都改变了，本来是只改变span标签中的样式 .css({ background : "#6cf" }) </script> </body> </html>is()
is作用：
根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
如果没有元素符合，或者表达式无效，都返回'false'。 '''注意：'''在jQuery 1.3中才对所有表达式提供了支持。在先前版本中，如果提供了复杂的表达式，比如层级选择器（比如 + , ~ 和 > ），始终会返回true。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box{ width: 100px; height: 100px; background: #ddd; } #box.active{ background: orange; } </style> </head> <body> <div id="box"> <div class="title"> title <p> p <span>选中</span> </p> </div> </div> <script> $("box").click(function(){ //is起到判断作用,匹配box中有无class=active console.log($(this).is(".active")); //初始为true，点击变为false if(!$(this).is(".active")){ //addClass()为每个匹配的元素添加指定的类名。 $(this).addClass("active"); }else{ $(this).removeClass("active"); } // is => 简化版 if(!$(this).hasClass("active")){ $(this).addClass("active"); }else{ $(this).removeClass("active"); } //无is版 $(this).toggleClass("active") }) </script> </body> </html>
动画
简单动画：show、hide、fadeIn、fadeOut、slideDown、slideUp
自定义动画：animate
动画队列：queue
终止动画：stop
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box,#box2 { width: 100px; height: 100px; background: #000; margin: 10px; opacity: 1; float: left; position: absolute; left: 20px; top: 50px; } #box2 { background: yellowgreen; left: 150px; display: none; } #start_animate { position: absolute; z-index: 999; } #stop_animate { position: absolute; left:100px; z-index: 999; } </style> </head> <body> <button id="start_animate">开始动画</button> <button id="stop_animate">停止动画</button> <div id="box"></div> <div id="box2"></div> <script src="../libs/jquery-3.4.0.js"></script> <script> $("#start_animate").click(animate1); function animate1(){ //$("#box").hide(1000); //$("#box2").show(1000); //用于绑定两个或多个事件处理器函数，以响应被选元素的轮流调用的click事件。toggle将元素设置为隐藏或可见 //$("#box").toggle(1000); //$("#box2").toggle(1000); //fadeOut/fadeIn通过不透明度的变化来实现所有匹配元素的淡出/淡入效果，并在动画完成后可选地触发一个回调函数。 //$("#box").fadeOut(1000); //$("#box2").fadeIn(1000); //$("#box").fadeToggle(1000); //$("#box2").fadeToggle(1000); //fadeTo将匹配元素设置透明度为XXX //$("box").fadeTo(1000,0.3); //slideToggle通过高度变化来切换所有匹配元素的可见性(上下卷动)，并在切换完成后可选地触发一个回调函数。 //$("#box").slideToggle(1000); //$("#box2").slideToggle(1000); } $("#start_animate").click(animate2); function animate2(){ $("#box").css({ backgroundColor : "yellowgreen" }); $("#box").animate({ left : "+=100" }) .animate({ top : "+=100" }) //同步队列工具queue;想要继续执行后方异步队列必须要调用next方法 .queue(function(next){ $(this).css({ backgroundColor : "skyblue" }) next(); }) .animate({ left : "-=100" }) .animate({ top : "-=100" }) } $("#stop_animate").click(function(){ //stop([clearQueue],[jumpToEnd]) //clearQueue:如果设置成true，则清空队列。可以立即结束动画。 //gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。 $("#box").stop(true,true);//(是否清空动画队列，是否立即完成动画) }) </script> </body> </html>
事件
在选择元素上绑定一个或多个事件的事件处理函数：on()
在选择元素上移除一个或多个事件的事件处理函数：off()
在每一个匹配的元素上触发某类事件：trigger()
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态：hover(fn1,fn2)鼠标移上时触发第一个函数，移出时触发第二个函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> </ul> <script src="../libs/jquery-3.4.0.js"></script> <script> // $("li").click(function(){ // alert(1); // }) // $("li").click(function(){ // alert(2); // }) // $("li").on("click.a",function(){ // alert(1) // }) // $("li").on("click.b",function(){ // alert(2) // }) // $(document).on("click",function(){ // alert("i'm document") // }) // $("li").off("click.a"); // trigger 触发事件; // $("li").eq(0).trigger("click"); // 会发生事件冒泡; // $("li").eq(0).triggerHandler("click"); // 不会触发事件冒泡; // $("li").on("mouseenter",function(){ // $(this).css({ // backgroundColor : "red" // }) // }) // $("li").on("mouseleave",function(){ // $(this).css({ // backgroundColor : "#fff" // }) // }) // 复合事件 ; hover $("li").hover(function(){ $(this).css({ backgroundColor : "red" }) },function(){ $(this).css({ backgroundColor : "#fff" }) }) //.on简易写法 // $("li").on({ // "mouseenter" : function(){ // $(this).css({ // backgroundColor : "red" // }) // }, // "mouseleave" : function(){ // $(this).css({ // backgroundColor : "#fff" // }) // }, // }) //事件委托; //给每个li添加click事件 $("ul").on("click","li",function(){ // console.log(this); $li = $("<li>hello world</li>"); $("ul").append($li); }) $("li").one("click",function(){ alert(); }) </script> </body> </html>
