jQuery初识
jQuery
jQuery对象是通过jQuery对DOM对象的一种封装，jQuery对象是jQuery独有的
jQuery对象：var $variable = jQuery对象
jQuery的基础语法：$(selector).action()
例：$("#test).(html)
这个就相当于DOM代码：document.getElementById("test").innerHTML
寻找元素（选择器和筛选器）
选择器
基础选择器：$("*") $("#id") $(".class") $("element") $(".class,p,div")
//基本选择器 $("#id1").css("color","red"); /*语法结构$(selection).action()*/ $(".outher").css("color","blue");
层级选择器：$(".outher div") $(".outher>div") $(".outher+div") $(".outher~div")
//层级选择器 // $(".inner p").css("color","magenta"); /*父级下的所有符合的子标签，多层嵌套的也同样选择*/ // $(".inner>p").css("color","red"); /*父级下的第一层符合的子标签*/ // $(".inner+p").css("color","lime"); /*同级相邻的标签，注意只能下面的那个*/ // $(".inner~h1").css("color","red"); /*同级下面的标签，不是相邻的也可以*/
基本筛选器：$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)") $("li:lt(4)")
//基本筛选器 // $("li:first").css("color","red"); /*找到li标签并筛选出其中的第一个*/ // $("li:last").css("color","blue"); // $("li:eq(2)").css("color","red"); /*找到并筛选出其中第几个，eq的参数就是表示第几个*/ // $("li:even").css("color","red"); /*找到并筛选出奇数项*/ // $("li:gt(1)").css("color","red"); /*找到并筛选出索引之后的所有标签，注意是从0索引*/
属性选择器：$('[id="div1"]') $("[id='id2'][id]")
//属性选择器 $("[id='id2'][id]").css("color","red"); /*根据属性选择*/
表单选择器：$(":text") 只适用于表单------》这个相当于$("[type='text']")
//表单选择器 // $("[type='text']").css("height","100px"); $(":text").css("width","300px"); /*只适用于表单*/
筛选器
过滤筛选器：$("li").eq(2) t = $("ul li").hasClass("test")
//过滤筛选器 $("li").eq(2).css("color","red"); /*等同于基本筛选器，推荐*/ t = $("ul li").hasClass("test"); /*判断拿到的标签中是否有某个类，有返回true*/
查找筛选器：
//查找筛选器 // $(".inner").children("p").css("color","red"); /*查找子代标签，注意这个只查找第一层嵌套中的*/ // $(".inner").find("p").css("color","red"); /*查找嵌套中所有符合的子代标签*/ // $("li").eq(2).next().css("color","red"); /*查找指定标签的下一个标签*/ // $("li").eq(2).nextAll().css("color","red"); /*查找指定的标签下面所有符合的标签*/ // $("li").eq(1).nextUntil("#end").css("color","red"); /*查找指定标签的下面标签直到指定位置结束*/ // $("li").eq(4).prev().css("color","red"); /*查找上一个*/ // $("li").eq(4).prevAll().css("color","red"); /*查找上面所有的*/ // $("li").eq(4).prevUntil("#start").css("color","red"); /*查找上面直到指定位置结束*/ // console.log($(".inner .son p").parent().html()); /*查找到上一级*/ // $(".inner .son p").parents().css("color","red"); /*一直查找到顶层一级*/ // $(".inner .son p").parentsUntil(".inner").css("color","red"); /*查找到指定位置，开区间*/ // $("p").siblings().css("color","red"); /*查找和它同级的无论上下的所有标签，除了它自己*/
操作元素（属性，css，文档处理）
属性操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p class="p1">ss</p> <div class="div1" con="c1"></div> <input type="checkbox" checked="checked"> <input type="text" value="123"> <div id="id1"> <p>yyyyyyy</p> </div> <script src="jquery-3.4.1.js"></script> <script> // $(".div1").attr("con"); /*获取某个标签里的属性值，固有属性和自定义属性都可查找*/ // $(".div1").attr("con","con2"); /*修改某个元素属性的值*/ // $(":checkbox").prop("checked"); /*获取某个标签的属性值，只能查找固有属性*/ // $(":checkbox").remove("checked"); // $(".p1").addClass("hide"); /*增加一个类名*/ // $(".p1").removeClass("hide"); // $("#id1").html(); /*获取某个标签下的所有标签内容*/ // $("#id1").text(); /*获取某个标签下的所有标签里的文本内容*/ // $("#id1").html("<h1>sy</h1>"); /*替换某个标签里的所有标签*/ // $("#id1").text("sy"); /*替换某个标签下的所有标签的文本*/ // $(":text").val(); /*获取标签的value值，只能获取固有的属性value的值*/ // $(":text").val("789"); /*修改value值*/ // $(".p1").css({"color":"red","background-color":"pink"}); /*设置css样式*/ </script> </body> </html>
使用jQuery循环遍历
<body> <p>sss</p> <p>yyy</p> <p>zzz</p> <script src="jquery-3.4.1.js"></script> <script> arr=[111,222,333]; //方式一 $.each(arr,function(x,y){ /*将arr这个列表循环*/ console.log(x); /*循环得到的索引*/ console.log(y) /*循环得到的值*/ }); //方式二 $("p").each(function(){ /*遍历这个标签*/ console.log($(this)); /*$(this)代指当前遍历的一个标签*/ $(this).html("hello"); }); </script> </body>
使用jQuery设计正反选
<body> <button onclick="selectall();">全选</button> <button onclick="cancel();">取消</button> <button onclick="reverse()">反选</button> <table border="1" id="Table"> <tr> <td><input type="checkbox"></td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>222</td> </tr> <tr> <td><input type="checkbox"></td> <td>333</td> </tr> <tr> <td><input type="checkbox"></td> <td>444</td> </tr> </table> <script src="jquery-3.4.1.js"></script> <script> function selectall() { $(":checkbox").each(function(){ $(this).prop("checked",true) }); } function cancel(){ $(":checkbox").each(function(){ $(this).prop("checked",false); }); } function reverse(){ $(":checkbox").each(function(){ if($(this).prop("checked")){ $(this).prop("checked",false); } else{ $(this).prop("checked",true); } }); } </script> </body>
jQuery文档处理
<body> <div class="div1"> <p>111</p> </div> <button>add</button> <script src="jquery-3.4.1.js"></script> <script> $("button").click(function(){ var $ele = $("<h1></h1>"); /*新建一个标签，jQuery对象*/ $ele.html("hello world"); /*$ele是一个jQuery对象*/ $ele.css("color","red"); //内部插入：向标签里插入子标签 // $(".div1").append($ele); /*将这个对象添加到一个标签下，这个方法时标签调用*/ // $ele.appendTo(".div1") /*appendTo这个方法是对象调用*/ // $(".div1").prepend($ele); /*在首部添加*/ // $ele.prependTo(".div1")； //外部插入:插入同级标签 // $(".div1").after($ele); /*在这个标签后面插入一个同级的标签*/ // $ele.insertAfter(".div1"); // $(".div1").before($ele); /*在前面插入*/ // $ele.insertBefore(".div1"); //替换 // $("p").replaceWith($ele); //删除 // $(".div1").empty(); /*将这个标签里的内容删除*/ // $(".div1").remove(); /*将这个标签删除*/ //clone // var $ele2 = $(".div1").clone(); /*复制,注意这样复制会翻倍的添加*/ // $(".div1").after($ele2); }) </script> </body>
复制clone优化
<body> <div class="outer"> <div class="item"> <button onclick="add(this)">+</button> <input type="text"> </div> </div> <script src="jquery-3.4.1.js"></script> <script> function add(self){ var $ele = $(self).parent().clone(); /*通过获得点击的标签上一级来定位到一个标签，使得只复制一个*/ $ele.children("button").html("-").attr("onclick","remove_obj(this)"); $(".outer").append($ele); } function remove_obj(self){ $(self).parent().remove(); } </script> </body>
jQuery的css操作
$(".div1").offset() //查看这个标签距离视口(整个网页四边)的偏移量
$(".div1").offset().top //距离页面视口上边的偏移量
$(".div1").position() //查看这个标签距离已定位的父标签的偏移量，如果父标签未定位，则继续向上直至到视口
$(".div1").position().left //距离已定位父标签的左边的偏移量
window.onscroll=function（）//窗口滚动条监听事件
$(window).scrollTop() //滚动条在窗口的哪个位置，参数为0则代表顶端
$(window).scrollLeft()
$(".div1").height() //拿到这个标签的content的height
$(".div1").innerHeight() //拿到这个标签的content + padding的总height
$(".div1").outerHeight() //拿到这个标签的content + padding + border的总height
$(".div1").outerHeight(true)//拿到这个标签的content + padding +border + margin的总height
$(".div1").height("300px") //参数表示修改这个标签的height为300px
$(".div1").width()
jQuery事件绑定
例：$(".div1").click(function (){})
$(".div1").bind("click",function () {})
$(".div1").unbind("click") //解除绑定事件
事件委托
例：$("ul").on("click","li",function(){})
页面载入
$(document).ready(function(){}) 等待页面读取完后再执行
$(function(){}) 简写方式
动画效果
$(".div1").show() //显示这个标签,参数是毫秒
$(".div1").hide() //隐藏这个标签
$(".div1").toggle() //切换标签的show和hide
$(".div1").slideUp() //向上滑动隐藏
$(".div1").slideDown() //向下滑动显示
$(".div1").slideToggle() //切换方式滑动
$(".div1").fadeIn() //淡入
$(".div1").fadeOut() //淡出
$(".div1").fadeToggle() //切换状态
$(".div1").fadeTo(1000,0.3) //变成指定的透明度
自定义插件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>111</p> <p>222</p> <p>333</p> <script src="jquery-3.4.1.js"></script> <script> $.extend({ /*自定义一个方法*/ Myprint:function(){ /*方法名：函数主体*/ console.log("hello"); } }); $.Myprint(); /*执行这格自定义的方法*/ $.fn.extend({ /*自定义一个实例方法*/ GetText:function(){ // for(var i=0;i<this.length;i++){ // console.log(this[i].innerHTML); // } $.each(this,function(x,y){ console.log(y.innerHTML); /*这里的是一个js对象*/ }); } }); $("p").GetText(); /*用标签调用这个方法*/ </script> </body> </html>
