本文共 18528 字,大约阅读时间需要 61 分钟。
一、jQuery的下载方式
1、可以去官方网站下载,然后放到入库里,通过script引入的方式来使用。
2、简单的方式: npm i jquery@版本号 //兼容版 npm i jquery //最新版我的放在这儿了: F:\js-exercise\node_modules\jquery ,然后用script引入: ""
二、jQuery的创建
1、先说说通过DOM方式创建的CSS样式,然后再看jQuery方式,作一下对比。
var div;init();function init() { div = document.createElement("div"); div.style.width = "100px"; div.style.height = "100px"; div.style.backgroundColor = "red"; div.addEventListener("mouseover", mouseHandler); div.addEventListener("mouseout", mouseHandler); div.addEventListener("click", clickHandler); document.body.appendChild(div);}function clickHandler(e) { div.style.width = "200px"; div.style.height = "200px";}function mouseHandler(e) { if (e.type === "mouseover") { div.style.backgroundColor = "blue"; } else if (e.type === "mouseout") { div.style.backgroundColor = "red"; }}
2、通过jQuery方式,发现大量使用匿名函数,而且还使用点语法" . " 、" $ " 。
$(" ").width(100).height(100).css("backgroundColor","red").appendTo("body").hover(function(){ $(this).css("backgroundColor","blue");},function(){ $(this).css("backgroundColor","red");}).click(function(){ $(this).width(200).height(200);})
3、连缀法,点 " . " 语法的使用,以对象为例,来看下是怎么使用的。
var obj={ a:function(){ console.log("aaa"); return this; //返回到该对象obj,就能使用点语法了 }, b:function(){ console.log("bbb"); return this; }, c:function(){ console.log("ccc"); return this; }}// obj.a(); //对象里面,obj的点语法一般是这样用的// obj.b();// obj.c();obj.a().b().c(); //现在就可以连用点语法了
4、再看看$符号的使用,作为变量,作为函数名。
(1)$特殊符号作为变量: var $=2; //打印显示结果2(2)$特殊符号作为函数名: function jQuery(){ console.log("aaa"); } var $=jQuery; //所以运行$,就相当于写了个jQuery函数并执行了 $(); //是可以打印出aaa的或者直接: function $() { console.log("jquery"); } $(); //结果是jquery , 函数能执行(3)此时 $===jQuery ,看以下此时$的类型: console.log(typeof $,typeof jQuery,$===jQuery); //function function true
三、jQuery的简单选择器
1、先来简单看一下选择器的用法。
// $("div") //就可以把div都选中$("div").text("abc");//等同于给每一个div里面增加textContent值为abc$("div").html("超链接");//就相当于给每一个div放入一个超链接$("div").css({ width:50, height:50, backgroundColor: "tomato", margin:10});//相当于给每一个div设置css样式的宽高和背景色及margin值
2、获取
console.log($("div"));//选择器获取了所有div标签,这个列表就叫做jQuery对象,jQuery对象不能使用任何DOM的方法// $("div").addEventListener()//错误的如果希望使用DOM的方法,必须将jQuery转换为DOM对象://将jQuery列表中某个一个DOM获取出来,以下两种方法都行console.log($("div")[0]);console.log($("div").get(0));//将jQuery对象转换为DOM数组console.log(Array.from($("div"))); //(4) [div, div, div, div]将DOM元素转换为jQuery:var div=document.createElement("div");console.log($(div)); //$(DOM) 就可以将DOM元素转换为jQuery对象
看一下相关结果:
console.log($(“div”)) 获取的是一个jQuery对象,jQuery对象不能使用任何DOM的方法。 3、最常用选择器console.log($("div"));//标签选择器console.log($(".div1"));//class选择器console.log($("#div0"));//id选择器$("div,span,a");//群组选择器$("div span");//后代选择器(包含选择器,选择所有span子元素标签)$("div>span");//子代选择器(只选择div下的子元素span,至于div子元素的子元素里面是不是有span,并不在意)$(".div1~span");//兄弟选择器(该class为div1的标签,其下面的兄弟span都被选中,上面的不选)$(".div1+span");//相邻兄弟选择器(该class为div1的标签,只有其下紧密相联的第一个span被选中,没有就不选)$("*");//通配符,所有的$(".div1>*");//class是div1的元素的所有子元素$(".div1 *");//class是div1的元素的所有后代元素$(".div1+*");//class是div1的元素的任何相邻元素console.log($(".div1").length);//class是div1这个元素的子元素数量$("div.div2");//class是div2的div$("div .div2");//div的后代中所有class是div2的元素使用jQuery方法比选择器更快:$(".div1").find("span"); //等同 $(".div1 span");$(".div1").children("span");//等同于 $(".div1>span");$(".div1").children();//等同于$(".div1>*");$(".div1").next("span");//等同于$(".div1+span");$(".div1").nextAll("span");//等同于$(".div1~span");$(".div1").nextUntil("span");//class是div1的元素向下选择到span元素之前的所有任何兄弟元素,不包含该元素$(".div1").prev("span");//向上选择相邻的上一个span元素$(".div1").prevAll("span");//向上选择所有span元素$(".div1").prevUntil("span");//向上选择到span元素的所有兄弟元素$(".div1").siblings();//可以选择.div1元素的向上和向下的所有兄弟元素,不包含该元素
四、jQuery属性选择器
这是用到的div标签元素,以他为例:
0122.133.144.155.166.16.2
1、先来看下CSS的属性选择器,与jQuery属性选择器做个对比。
/* 以标签div示例 */div[property]{ /* 选中属性名为property的全部div */ width: 30px; height: 30px; background: cadetblue; display: inline-block; /*转成内联块,可以横向排列*/}/* 以下所有属性值,双引号可加可不加 */div[property=aaa]{ /* 选中属性值为aaa的div */ background: yellowgreen;}/* 以下^ $符号的使用有点像正则中的开头结束 */div[property^="b"]{ /* 属性值以b开头的的div */ background-color: violet;}div[property$="c"]{ /* 属性值以c结尾的div */ background-color: tomato;}div[property|=dd]{ /* | 的作用:如果值为 ab,或是ab后紧跟一个"-",都满足条件 */ background-color: yellow;}div:not([property="aaa"]){ /* not 伪类选择器 */ /* div中 不是property="aaa"的*/ color: white;}div[property~="eee"]{ /* 属性值必须是eee或者eee后面跟有空格 */ background-color: brown;}div[property*="f"]{ /* 属性值里存在f字符的div */ background-color: burlywood;}/* 复合写法 */div[property*="f"][class="div_fff"]{ /* 且 ;所有条件皆满足才可 */ color: chartreuse;}2、再看一下用jQuery怎么写:
// jQuery中css样式写法// 首先要引入这个jQuery.js文件// 其实就是把css属性选择器拿进来,除了not伪类选择器的那个,我把上面的翻译了下来$("[property]").css({ width: 30, height: "30px", background: "cadetblue", display: "inline-block"});$("[property=aaa]").css({ background: "yellowgreen"})$("[property^=b]").css({ backgroundColor: "violet"})$("[property$=c]").css("backgroundColor","tomato");$("[property|=dd]").css("backgroundColor","yellow");$("div:not([property=aaa])").css("color","white");$("[property~=eee]").css("backgroundColor","brown");$("[property*=f]").css("backgroundColor","burlywood");$("[property*=f][class=div_fff]").css("color","chartreuse");能够发现,jQuery的属性选择器的结果与css属性选择器的结果并无二致。
五、jQuery过滤器
以ul、li、a为例。
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4 超链接
1、first、last、nth-child()、type…
// 以ul、li、a为例,先设置下横向排列以及间距$("li").css({ display: "inline-block", margin: 10}) $("li:first").css("backgroundColor","red");//全部li中的第一个// 等同于// $("li").first().css("backgroundColor","red");$("li:first-child").css("backgroundColor","blue");//li作为父容器当中第一个子元素时$("a:first-of-type").css("backgroundColor","orange");//a作为父容器当中的第一个a标签类型的子元素时$("li:last").css("backgroundColor","lightgreen");//全部li中的最后一个// 等同于// $("li").last().css("backgroundColor","lightgreen");$("li:last-child").css("backgroundColor","yellow");//li作为父容器当中最后一个子元素时$("a:last-of-type").css("backgroundColor","teal");//a作为父容器当中的最后一个a标签类型的子元素时$("li:nth-child(2)").css("backgroundColor","violet");//当前元素为父容器的第2个子元素 2不是索引值,从1开始$("a:nth-of-type(2)").css("backgroundColor","turquoise");//寻找当前元素的父容器中第二个是a类型的元素, 2不是索引值
2、元素奇数偶数的选中方法:
$("li:nth-child(2n)").css("backgroundColor","red");//偶数 元素$("a:nth-of-type(2n)").css("backgroundColor","orange");//偶数 元素类型// $("li:nth-child(even)").css("backgroundColor","red")//偶数 元素// $("a:nth-of-type(even)").css("backgroundColor","orange")//偶数// $("a:odd").css("backgroundColor","orange");//奇数 这是按照索引值设置 从0开始 把所有a放在一个列表中,奇偶获取 元素类型$("li:nth-child(2n-1)").css("backgroundColor","blue");//奇数 元素$("a:nth-of-type(2n-1)").css("backgroundColor","yellowgreen");//奇数 元素类型// $("li:nth-child(odd)").css("backgroundColor","blue");//奇数 元素// $("a:nth-of-type(odd)").css("backgroundColor","yellowgreen");//奇数 元素类型// $("a:even").css("backgroundColor","blue");//偶数 这是按照索引值设置 从0开始 把所有a放在一个列表中,奇偶获取 元素类型最后各一项有些特殊,还是自己动手练练比较好。这里有一个小栗子: 。
3、not、eq、gt、lt
111222333444555
// $("div:not(.ab)").css("background","red");//不是什么内容// 等同于$("div").not(".ab").css("background","red");$("div:eq(1)").css("color","yellow");//是按照索引开始从第0个开始的// 等同于// $("div").eq(1).css("color","yellow");$("div:gt(1)").css("color","blue");//大于1$("div:lt(1)").css("color","violet");//小于1
4、header、animated、focus 用的不多
$(":header");//选择h1-h6标签$(':animated');//选择所有动画元素$(":focus");//获取焦距的元素 一般针对表单元素和超链接
5、子元素、父元素
919333444ofo
$("div").css({ width:30, height:30, display:"inline-block"})$("div:empty").css("background","tomato");//没有子元素或者没有内容的空元素$("div:has(.ofo)").css("background","pink");//判断div元素中是否后代元素中有class是ofo的元素,返回被选中的元素// 等同于//$("div").has("#ofo").css("background","pink");//这里用的是ID选择器,但作用元素都是这个div$(".ab:parent").css("background","yellow");//class是ab的元素如果有子元素或者内容的被选中$("div:contains(1)").css("color","blue");//判断div的后代中是否包含文本内容1以上这几项的结果是页面上的几个方块的颜色字体展示。console.log($(".ofo").parent());//选择父容器console.log($(".ofo").parents());//选择所有父容器console.log($(".ofo").parentsUntil("html"));//选择所有父容器到html之前的这几项的结果是控制台的显示内容,这样就好理解的多了。
6、隐藏、显示
console.log($(":hidden"));//隐藏 // display:none这是隐藏的; visibility: hidden不属于隐藏; visibility: visibie是显示console.log($(":visibie"));//显示的内容
7、判断对错,结果为true、false;到目前为止,只有这两项返回值是true、false,其他都是返回被选中的元素。
console.log($("div").is(".ab")); //判断div中有没有class是ab的元素 返回值true或者falseconsole.log($("div").hasClass("ab")); //判断div中有没有class是ab的元素 返回值true或者false区别:is不单可以判断class,还可以判断其他选择器;而hasClass只能判断class
8、截取
console.log($("div").slice(2,4)); //将所有选中元素的列表截取第几个到第几个,不包含尾部,跟数组中的slice用法相同
六、text html value each
1、text
功能:填充文本。根据不同的选择器,不同的情况,填充文本。
<1> 直接填充文本$("p").text("the first").css("color","tomato");<2> 可以写匿名函数,有两个参数,index是从0开始的索引,item是标签中的内容$("div").text(function(index,item){ // return "div-"+item; // 根据内容有关 return "div-"+index; // 根据索引有关})<3> 获取console.log($("div").text());//获取元素内容,会将所有元素的textContent结果连在一起返回一个字符串
2、html
功能:可以往标签里填充另外的标签元素(innerHTML内容)。
<1> 设置innerHTML内容$(".three").html("超链接"); <2> 也可以给每一个div设置不同的内容$("div").html(function(index,item){ return `${ item}`;//这样就可以根据div的呢内容设置超链接})<3> 下面方法获取的html结果只有第一个console.log($("div").html()); //在选择的列表中返回第一个元素的html的内容
value
<1> 可以给多个表单来写$("input").val("aaa");<2> 如果希望不一样$("input").val(function(index){ return index;});<3> 在选择列表中返回第一个元素的value值console.log($("input").val());
each
功能:遍历,可以遍历数组、对象、jQuery对象
<1> 遍历数组var arr=["a","b"];$.each(arr,function(index,item){ console.log(item);})<2> 遍历对象var data={ a:1,b:2}$.each(data,function(prop,value){ console.log(prop,value);})<3> 遍历jQuery的对象$.each($("div"),function(index,item){ console.log(item);//就是每一个元素内容})// 而元素自身就带一个each,自身可以遍历$("div").each(function(index,item){ console.log(index,item);})
综合小应用
要求实现:把网址一次添加进去,然后横向排列。
在上面先创建好6个div。var list = [ { site: "网易", url: "http://www.163.com" }, { site: "腾讯", url: "http://www.qq.com" }, { site: "京东", url: "http://www.jd.com" }, { site: "淘宝", url: "http://www.taobao.com" }, { site: "CSDN", url: "http://www.csdn.com" }, { site: "搜狐", url: "http://www.sohu.com" }];//第一种方法$("div").html(function (index) { return `${ list[index].site}`}).css("display","inline-block"); //第二种方法$.each(list, function (index, item) { $("div").eq(index).html(`${ item.site}`).css("display","inline-block"); })
七、attr data prop
attr 是给标签属性设置 。
prop 是给jQuery对象的所有DOM元素设置属性,不设置标签属性 。 data 是给所有jQuery对象的引用增加属性,并不设置DOM属性,亦不设置标签属性 。attr
功能:操作属性。
<1> 设置一样的属性$("p").attr("property", "aaa"); //给所有属性设置值$(".abc").attr("property", "bbb");//给class为abc的p标签设置自定义属性property值为bbb//属性值得获取,下面这种方法只能获取第一个元素的这个属性值;//不可以获取多个属性值,只能获取某一个属性值console.log($("p").attr("property"));<2> 设置一个属性的多个不同值$("div").attr("div000", function (index, item) { return index + 1;//index从0开始,现在是从1开始})<3> 以对象形式设置多个元素的多个相同属性值$("span").attr({ span001: 1, span002: 2})<4> 设置多个属性的不同属性值$("a").attr({ a001: function (index, item) { return index + 1; }, a002: function (index, item) { return index + 2; }})<5> 删除attr$("span").removeAttr("span001");//删除某个属性
prop
功能:给每一个DOM元素都设置了对象属性,不设置标签属性。
<1> 设置对象属性$("div").prop("ab","3");//尽管没有div有ab这个属性,照样可以设置console.log($("div").prop("ab"));//而且还可以得到这个属性 结果是3<2> 错误的方法$("div").ab=3;//增加一个console.log($("div").ab);//undefind// 但是已打印就undefined了,为什么会这样?// 因为如果直接给jQuery对象设置对象属性时,jQuery再重新选择时,这个对象和上一次选择的对象引用不同。// jQuery对象一般是若干个,每次使用选择器获取的jQuery对象的引用都不同。// console.log($("p").class);//undefind<3> 下面的设置方法是可以的var divs=$("div");divs.ab=30;console.log(divs.ab);//这就可以打印出来,因为对象引用一样 结果30$("div").prop("ab",300);//prop是给每一个DOM元素都设置了对象属性 // 所以用prop来存储属性ab等于300,这样就可以打印出console.log($("div").prop("ab"));//获取第一个jQuery对象的DOM元素的对象属性 结果300
data
功能:是给每个jQuery对象的引用增加属性,并不设置DOM属性,也不设置标签属性 。这样我们可以随时获取到这个属性了。
$("div").data("ab","3");//给jQuery引用对象增加了属性ab,没有给DOM增加属性// 获取一下看看console.log($("div").data("ab"));//也能打印出3,有点类似于prop,担又不一样console.log($(".div0").data("ab")); //给jQuery的引用关系都增加了属性// 这样可以避免冲突,比如说:$("input").data("value",300) //这样跟DOM属性名冲突时,不会改变DOM的,而会存储同样一个jQuery对象引用属性console.log($("input").data("value"));// 注意:多选框时,checkBox或者radio不能使用attr设置checked,必须使用prop设置checked $("[type=checkbox]").prop("checked",true);
jQuery中的css样式设置
1、样式设置,通过.css()
// 行内样式 $("div").css("color", "red");// 不同div单个style样式设置$("div").css("color", function (index) { if (index === 0) return "red"; if (index === 1) return "green"; return "blue";})// 写多个样式$("div").css({ width: "50px", height: 50, backgroundColor: "tomato"})// 不同div多个style样式设置$("div").css({ width: function (index) { return 200-(index + 1)*50; //返回不同的宽度 }, height:function(index){ return 200-(index+1)*50; }, backgroundColor: function (index) { if (index === 0) return "tomato"; if (index === 1) return "yellowgreen"; return "teal"; }})//获取 $("div").css()console.log($("div").css("width"));//获取列表第一个元素的widthconsole.log($("div").css(["width","height"])) ;//获取列表第一个元素的宽高,数组式写法,以对象返回//除了获取行内样式,也可以获取css计算后样式console.log($("div").css("backgroundColor"));var div=document.querySelector("div");console.log(getComputedStyle(div).backgroundColor);//计算后样式
2、class属性的增加删除
$("div").addClass("div0 div1") //增加class属性$("div").removeClass("div0") //删除class属性
3、toggleClass 切换样式
toggleClass 切换样式 只能用于操作交互,鼠标点击,飘过啥的.
.div0{ width:50px; height: 50px; color: blue; background-color: red;}.div1{ width: 100px; height: 100px; background-color: gold; /* border: 1px solid #000; */}
$("div").addClass("div0").click(function () { $(this).toggleClass("div1"); //把DOM元素变成jQuery元素,再点一次就切换回DOM了 往返切换 点击切换 开关切换 // 效果是:点击div,从样式.div0变成.div1;再点一下,又变回.div0的样式 $(this).toggleClass("div1", true); // 只可以切换成jQuery元素,不能切换回去 // 效果是:只能从样式.div0变成样式.div1 $(this).toggleClass("div1", false); //不能切换 // 效果是:不管你怎么点,div始终是.div0的样式})
4、直接设置样式,不必通过.css()
<1> 高度height()与宽度width()用法等同,下面只演示width的://可以直接设置div的宽度$("div").width("50px");//数值、字符串都行$("div").width(50);//可以设置不同的宽度$("div").width(function(index){ return (index+1)*50;})// 获取宽度console.log($("div").width());<2> innerWidth、outerWidthconsole.log($("div").innerWidth()) //width+padding的值$("div").innerWidth(100)//会重新自动设置这个宽度,并且会将100-padding后再设置console.log($("div").innerWidth()) //width+padding的值console.log($("div").outerWidth()) //width+padding+border$("div").outerWidth(100) //设置时,也会自动减去border//如果设置了参数true,则只能获取而不能设置console.log($("div").outerWidth(true)) //占位宽度 width+padding+border+marign
5、定位 元素偏移方法
.div0{ width: 100px; height: 100px; background-color: tomato; position: absolute; left: 100px; top: 100px;}.div1{ width:50px; height: 50px; background-color: gold; }
<1> 用css样式直接设置,不过这种设置出来的位置不能与offset设置出来的同时存在,毕竟这只是旁门左道,算不得正统,offset才是唯一可以设置定位位置的王。如果,把position去掉,只写left、top,是不能设置的。$(".div0").css({ position:"absolute", left:30, top:80});console.log($("div").offset());//获取 {top: 30, left: 80}<2> 只有offset可以设置 “定位位置” ;position只能用来获取,不能设置值$(".div1").offset({ left:100,top:100});console.log($(".div1").offset());//获取 {top: 100, left: 100}console.log($(".div1").position()) //获取 {top: 100, left: 100}不过offset与position还是有区别的,获取的结果不一样。offset相对于页面左上角的位置,而position定位时相对于父容器。var div=document.querySelector(".div0");console.log(div.getBoundingClientRect());//相对视口console.log(div.offsetLeft);//结果是100console.log($(".div1").position().left)//定位时相对于父容器console.log($(".div1").offset())//相对于页面左上角的位置<3> 可以设置窗口的滚动条位置$(document).scrollTop(30);//针对窗口设置滚动条位置console.log($(window).scrollTop());//同样能获取滚动条位置
6、事件
$(".div").on("click",clickHandler);function clickHandler(e){ $(".div").off("click",clickHandler);}
jQuery与DOM
1、DOM元素的创建&添加
body里先手动创建一个div: <1> DOM元素的创建、添加var div = $(" ");//创建DOM元素$("body").append(div);// 等同于var div = document.createElement("div");document.body.appendChild(div);// 创建简单的方法$("body").append(" ");//针对body;这种append的结果,如果没有特别强调的,必然是调用这个方法的对象$(" ").appendTo("body").css({ width: 50, height: 50, backgroundColor: "red"});//也会返回一个对象,但此时的css是针对div标签的了append 父容器添加子元素 父容器.append(子元素)appendTo 子元素向父元素里添加 子元素.appendTo(父容器)主动性不同。<2> DOM元素的插入// 将子元素插入在父元素的最前面(第一位)// 给body的前面插入$("body").prepend(" ");//插入到最前面了$(" ").prependTo("body");//也会插入到body最前面// 插入到某元素的兄弟节点后$(".div1").after(" ");$(" ").insertAfter(".div1");// 插入到某元素的兄弟节点前$(".div1").before(" ");$(" ").insertBefore(".div1");
2、包裹节点wrap
$("span").wrap(" ");//所有的span外包了一层div//所有的span外包了一层a标签let arr=["http://www.qq.com","http://www.taobao.com","http://www.jd.com","http://www.163.com"]$("span").wrap(function(index,item){ return ``; //这样就可以给不同的span添加不同的超链接});// 去掉包裹$("span").unwrap();//删除父容器,取消包裹// 把所有东西包裹在一起$("span").wrapAll(" ");//把所有的元素包裹在一个div中// 在里层包裹,将该标签里面的内容包裹$("span").wrapInner("");
克隆clone
jQuery里的克隆都是深复制,没有浅复制。
$("div").clone(true).appendTo("body"); //true意为是否复制事件clone方法得到的结果是被克隆的元素,然后之后的所有操作都是针对被克隆出的元素 。clone(true)里的参数意为是否复制事件,为true赋值,否则不复制。
$("").appendTo("body").css({ width:50, height:50, backgroundColor:"red"}).on("click",function(){ $(this).css({ backgroundColor:"green" })}).clone(false).appendTo("body");// }).clone(true).appendTo("body");
没有复制事件时,怎么点击也不会改变克隆出的元素,说明没有复制事件。
删除节点&事件
$(".div1").remove(); //删除节点及事件
$(".div1").detach(); //删除节点,但不删除事件 $(".div1").empty(); //清空该元素的所有与子元素或内容举个小栗子:(自己试一下)
var divs=$("").appendTo("body").css({ width:50, height:50, backgroundColor:"red"}).on("click",function(){ $(this).css({ backgroundColor:"green" }) // remove删除元素,并且删除该元素的事件 // $(this).remove(); // detach 删除元素,但是不删除事件,下一次将这个元素重新放在页面上时,元素仍然有事件 $(this).detach(); $("").appendTo("body").on("click",function(){ divs.appendTo("body"); }) // $(this).empty();//清空该元素的所有子元素或者内容})
替换
举个例子:用span替换掉div1
$("").replaceAll(".div1");// 新的来替换旧的$(".div1").replaceWith("");// 旧的被替换成新的
jQuery事件机制、动画、插件、通信
转载地址:https://blog.csdn.net/weixin_43297321/article/details/104290550 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!