一、jQuery基本用法
1.jQuery安装与使用
Jquery核心
"$"符号在 jQuery 中代表对jQuery 对象的引用, "jQuery"是核心对象.
通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。<!--引入jquer文件 --> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> //获取元素对象 var div=$("#mydiv"); console.log(div); var div2=jQuery("#mydiv"); console.log(div2); </script>
2.jQuery包装集对象与DOM对象
1）DOM对象
通过原生JS方式获取dom对象2)Jquery包装集对象
通过Jqueru方式获取Jquery包装集对象
3)Jquery包装集对象与Dom对象
DOM对象 ——> Jquery对象
转换：$(dom对象)
Jquery对象 ——> DOM对象
转换：取下标：Jquery对象[下标]<div id="div"> hello world </div> <script type="text/javascript"> //通过原生js方式获取dom对象，通过id属性获取dom对象 var div=document.getElementById("div"); console.log(div); //DOM转换成jQuery $(dom对象) var div2Jquery=$(div); console.log(div2Jquery); console.log("======---------"); //通过jQuery方式获取jQuery包装集对象 通过id选择器获取 var divJquery=$("#div"); console.log(divJquery); //jquery转换成DOM对象 取下标：Jquery对象[下标] var div3DOM=$("#div")[0]; console.log(div3DOM); </script>
二、jQuery选择器
1.基础选择器
选择器 名称 举例 id 选择器 #id $("#testDiv")选择 id 为 testDiv 的元素 元素名称选择器 element $(“div”)选择所有 div 元素 类选择器 .class $(".blue")选择所有 class=blue 的元素 选择所有元素 * $("*")选择页面所有元素 组合选择器 selector1, selector2, selectorN $("#testDiv,span,.blue")同时选中多个选择器匹配的元素 <div id="mydiv1">id选择器1<span>span中的内容</span></div> <div id="mydiv1" class="blue">元素选择器</div> <span class="blue">样式选择器</span> <script type="text/javascript"> //id选择器 #id属性值 如果出现多个同名ID，只会获取第一个 var mydiv=$("#mydiv1") console.log(mydiv); //元素名称选择器 标签名/标签名 var span=$("span"); console.log(span); //类选择器 .class属性值 var blue=$(".blue"); console.log(blue); //选择所有元素 * var eles=$("*"); console.log(eles); //组合选择器 var elements=$("#mdiv1,.blue,span"); console.log(elements);//会去重
2.属性选择器
( [ 属 性 名 ] ) ∗ ∗ 选 择 设 置 过 指 定 属 性 名 的 元 素 ∗ ∗ ([属性名])** 选择设置过指定属性名的元素 ** ([属性名])∗∗选择设置过指定属性名的元素∗∗([属性名=属性值])
选择设置过指定属性名为指定属性值的元素<div id="mydiv1" class="red">id选择器1<span>span中的内容</span></div> <div id="mydiv1" class="blue">元素选择器</div> <span class="blue">样式选择器</span> <script type="text/javascript"> //选择设置过指定属性名的元素 var spans=$("[class]"); console.log(spans); //选择设置过指定属性名为指定属性值的元素 var cls=$("[class='blue']"); console.log(cls); </script>
3.层次选择器
选择器 名称 举例 后代选择器 ancestor descendant $("#parent div")选择 id 为 parent 的元素的所有 div 元素 子代选择器 parent > child $("#parent>div")选择 id 为 parent 的直接 div 子元素 相邻选择器 prev + next $(".blue + img")选择 css 类为 blue 的下一个 img 元素 同辈选择器 prev ~ sibling $(".blue ~ img")选择 css 类为 blue 的之后的 img 元素 <div id="grendfather"> <div id="parent"> 爸爸 <div id="child"> <p>大儿子</p> <p>小女儿</p> </div> </div> <div id="uncle"> 叔叔 <div id="child"> <p>大女儿</p> <p>小儿子</p> </div> </div> <div id="anut"> 婶婶 </div> </div> <script type="text/javascript"> //后代选择器（空格)$("#parent div")选择id为parent的元素的所有div元素 var par=$("#grendfather div"); console.log(par); //子代选择器 parent > child（大于号）$("#parent>div")选择id为parent的直接div子元素 var zidai=$("#grendfather > div"); console.log(zidai); //相邻选择器 prev + next（加号） $(".blue + img")选择css类为blue的下一个img元素 （选择相邻的下一个指定元素） var xl=$("#parent + div"); console.log(xl); //同辈选择器 prev ~ sibling（波浪号）$(".blue ~ img")选择css类为blue的之后的img元素 var tp=$("#parent ~ div"); console.log(tp); </script>
4.表单选择器
Forms 名称 举例 表单选择器 :input 查找所有的 input 元素：$(":input")；注意：会匹配所有的 input、 textarea、select 和 button 元素。 文本框选择器 :text 查找所有文本框：$(":text") 密码框选择器 :password 查找所有密码框：$(":password") 单选按钮选择器 :radio 查找所有单选按钮：$(":radio") 复选框选择器 :checkbox 查找所有复选框：$(":checkbox") 提交按钮选择器 :submit 查找所有提交按钮：$(":submit") 图像域选择器 :image 查找所有图像域：$(":image") 重置按钮选择器 :reset 查找所有重置按钮：$(":reset") 按钮选择器 :button 查找所有按钮：$(":button") 文件域选择器 :file 查找所有文件域：$(":file") <form id='myform' name="myform" method="post"> <input type="hidden" name="uno" value="9999" disabled="disabled"/> 姓名:<input type="text" id="uname" name="uname" /><br /> 密码:<input type="password" id="upwd" name="upwd" value="123456" /><br /> 年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩 <input type="radio" name="uage" value="1"/>你懂得 <br /> 爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球 <input type="checkbox" name="ufav" value="爬床" checked="checked"/>爬床 <input type="checkbox" name="ufav" value="代码"/>代码<br /> 来自:<select id="ufrom" name="ufrom"> <option value="-1" selected="selected">请选择</option> <option value="0">北京</option> <option value="1">上海</option> </select><br /> 简介:<textarea rows="10" cols="30" name="uintro"></textarea><br /> 头像:<input type="file" /><br /> <input type="image" src="http://www.baidu.com/img/bd_logo1.png" width="20" height="20"/> <button type="submit" onclick="return checkForm();">提交</button> <button type="reset" >重置</button> </form> <script type="text/javascript"> //:input选择所有的表单元素，包括input标签、select标签、textarea标签及button标签 var inputs=$(":input"); console.log(inputs); //元素选择器 input var inpts=$("input"); console.log(inpts); //:checkbox 选择所有的复选框 var checkbs=$(":checkbox"); console.log(checkbs); //选择被选中的复选框 var ches=$(":checkbox:checked"); console.log(ches); //:checked 选择所有被选中的元素（单选框、复选框、下拉框） var checks=$(":checked"); console.log(checks); //:selected 选择所有被选中的元素 （下拉框） var seles=$(":selected"); console.log(seles); // :eq(index) 匹配下标1的复选框 var ck=$(":checkbox:eq(1)"); console.log(ck); // :gt(index) 匹配下标大于指定值的元素 var gts=$("[name='ufav']:gt(0)"); console.log(gts); </script>
5.过滤选择器
过滤 名称 举例 :checked 选择所有被选中的元素（单选框、复选框、下拉框） :selected 选择所有被选中的元素 （下拉框） :eq(index) 匹配下标为指定值的元素 :gt(index) 匹配下标大于指定值的元素 :even 匹配下标是偶数的元素 :odd 匹配下标是奇数的元素 //:checked 选择所有被选中的元素（单选框、复选框、下拉框） var checks=$(":checked"); console.log(checks); //:selected 选择所有被选中的元素 （下拉框） var seles=$(":selected"); console.log(seles); // :eq(index) 匹配下标1的复选框 var ck=$(":checkbox:eq(1)"); console.log(ck); // :gt(index) 匹配下标大于指定值的元素 var gts=$("[name='ufav']:gt(0)"); //:even :odd $("tr:gt(0):odd").css("background-color","pink"); $("tr:gt(0):even").css("background-color","skyblue");
三、Jquery Dom操作
1.操作元素的属性
方法 说明 举例 attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined。 attr(‘checked’) attr(‘name’) prop(属性名称) 获取具有true和false两个属性的属性值 prop(‘checked’)
方法 说明 举例 attr(属性名称，属性值) 设置指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined。 attr(‘checked’,’checked’) attr(‘name’,’zs’) prop(属性名称，属性值) 设置具有 true 和 false 两个属性的属性值 prop(‘checked’,’true’)
方法 说明 举例 removeAttr(属性名) 移除指定的属性 removeAttr(‘checked’) <input type="checkbox" value="man" id="ck1" aa="bb" checked="checked"/> 男 <input type="checkbox" value="woman" id="ck2" /> 女 <script type="text/javascript"> //获取属性（设置过checked） var cheAtt=$("#ck1").attr("checked"); var cheProp=$("#ck1").prop("checked"); console.log(cheAtt); //checked console.log(cheProp);//true //获取属性（没有设置过checked） var cheAtt2=$("#ck2").attr("checked"); var cheProp2=$("#ck2").prop("checked"); console.log(cheAtt2); //undefined console.log(cheProp2);//false console.log("-------------------------"); //固有属性 var val1=$("#ck1").attr("value"); var val2=$("#ck1").prop("value"); console.log(val1);//man console.log(val2);//man console.log("=========================="); //自定义属性 获取值 var aa1=$("#ck1").attr("aa"); console.log(aa1); var aa2=$("#ck1").prop("aa");//bb console.log(aa2);//undefined console.log("++++++++++++++++++++++++++"); //设置属性 checked //$("#ck2").attr("checked","checked"); $("#ck2").prop("checked",true);//推荐使用可以设置不选中方便 //设置复选框不选中 $("#ck2").prop("checked",false); console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"); //设置固有属性 $("#ck1").attr("title","性别"); $("#ck2").prop("title","性别"); //自定义属性 设置属性 $("#ck1").attr("hhhh","哈哈哈哈");//推荐使用 $("#ck2").prop("heihei","嘿嘿");//没有自定属性 //移除 $("#ck1").removeAttr("hhhh");
2.操作元素的样式
方法 说明 attr(“class”) 获取class属性的值，即样式名称 attr(“class”,”样式名”) 修改class属性的值，修改样式 addClass(“样式名”) 添加样式名称 css(“具体样式名”,“样式值”) 添加具体的样式 (相似style属性的样式) removeClass(class) 移除样式名称 <h3>css()方法设置元素样式</h3> <div id="conBlue" class="blue larger">天蓝色</div> <div id="conRed">大红色</div> <div id="remove" class="blue larger">天蓝色</div> <script type="text/javascript"> //attr("class") 获取class样式名 var className=$("#conBlue").attr("class"); console.log(className); //attr("class","样式名") 设置class样式名 （会将原本的样式移除，设置新的样式） $("#conRed").attr("class",className); //addClass("样式名") 添加样式名 //（会保留的原有的样式；如果出现相同属性的样式，则以在style标签中后定义的样式名为准） $("#conRed").addClass("red"); //设置具体的样式 $("#conRed").css("color","white"); //设置多个样式 $("#remove").css({"background":"pink","font-size":"14px"}); </script>
3.操作元素的值
方法 说明 html() 获取元素的 html 内容 html(“html,内容”) 设定元素的 html 内容 text() 获取元素的文本内容，不包含 html text(“text 内容”) 设置元素的文本内容，不包含 html val() 获取元素 value 值 val(‘值’) 设定元素的 value 值 <h3><span>html()和text()方法设置元素内容</span></h3> <div id="html"></div> <div id="text"></div> <input type="text" name="uname" value="oop" /> <script type="text/javascript"> //获取非表单元素 取值 var htmlCon=$("h3").html(); console.log(htmlCon); var textCon=$("h3").text(); console.log(textCon); //非表单元素 赋值 $("#html").html("hello"); $("#text").text("hello"); //添加内容 $("#html").html("<h2>hello</h2>"); $("#text").text("<h2>hello</h2>"); //表单元素：取值 var val=$("input[type='text']").val(); console.log(val); //赋值 $("input[type=text]").val("哈哈哈");
4.创建元素和添加元素
1）创建元素
$(‘元素内容’) $(‘ this is a paragraph!!!
’)2）添加元素
方法 说明 prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。 $(content).prependTo(selector) 把 content 元素或内容加入 selector 元素开头 append(content) 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。 $(content).appendTo(selector) 把 content 元素或内容插入 selector 元素内，默认是在尾部 before() 在元素前插入指定的元素或内容:$(selector).before(content) after() 在元素后插入指定的元素或内容:$(selector).after(content) <h3>prepend()方法前追加内容</h3> <h3>prependTo()方法前追加内容</h3> <h3>append()方法后追加内容</h3> <h3>appendTo()方法后追加内容</h3> <span class="red">男神</span> <span class="blue">偶像</span> <hr /> <div class="green"> <span>小鲜肉</span> </div> <script type="text/javascript"> //prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。 $(".green").prepend("<span>小奶狗</span>"); //$(content).prependTo(selector)把 content 元素或内容加入 selector 元素开头 $("<span>小狗</span>").prependTo($(".green")); //将存在的元素追加到指定的位置 $(".green").prepend($(".red")); //append(content)在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。 $(".green").append("<span>小狐狸</span>"); //$(content).appendTo(selector) 把 content元素或内容插入selector 元素内，默认是在尾部 $("<span>老狐狸</span>").appendTo($(".green")); //before() 在元素前插入指定的元素或内容:$(selector).before(content) $((".blue")).before("<span class='pink'>女神</span>"); //after() 在元素后插入指定的元素或内容:$(selector).after(content) $((".blue")).after("<span class='yellow'>歌手</span>"); </script>
5.删除元素
方法 说明 remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。 empty() 清空所选元素的内容 <h3>删除元素</h3> <span class="green">jquery<a>删除</a></span> <span class="blue">javase</span> <span class="green">http协议</span> <span class="blue">servlet</span> <script type="text/javascript"> // remove()删除所选元素或指定的子元素，包括整个标签和内容一起删。 $(".blue").remove(); //empty() 清空所选元素的内容 $(".green").empty(); </script>
6.遍历元素
遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。<h3>遍历元素 each()</h3> <span class="green">jquery</span> <span class="green">javase</span> <span class="green">http协议</span> <span class="green">servlet</span> <script type="text/javascript"> //获取全部span标签 $(".green").each(function(index,element){ console.log("index:"+index); console.log(element); }); $(".green").each(function(){ console.log(this); console.log($(this)); });
四、Jquery事件
1.ready()加载事件
ready加载事件类似于onload事件
语法：
( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) ; ∗ ∗ 简 写 版 ： ∗ ∗ (document).ready(function(){});** 简写版： ** (document).ready(function());∗∗简写版：∗∗(function(){});
ready()方法可以写多个，按顺序执行ready事件与onload事件的区别：
这两个方法都是预加载事件，等页面加载完毕后执行的方法。
ready事件：当页面的DOM结构加载完毕后执行
onload事件：当页面的dom结构及页面资源加载完毕后执行<script type="text/javascript"> //load事件 window.onload=function(){ console.log("load事件"); } //ready加载事件 $(document).ready(function(){ console.log("哈哈哈哈"); console.log($("#btn")); }); //简写版 $(function(){ console.log($("#btn")); console.log("ready事件"); }); </script>
2.bind()绑定事件
bind()绑定元素事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(selector).bind( eventType [, eventData], handler(eventObject))
**eventType ：**是一个字符串类型的事件类型，就是你所需要绑定的事件。
这类类型可以包括如下：
blur, focus, focusin, focusout, load, resize, scroll,
unload, click, dblclick,mousedown, mouseup, mousemove,
mouseover, mouseout, mouseenter, mouseleave,change,
select, submit, keydown, keypress, keyup, error 。
**[, eventData]：**传递的参数，格式：{名:值,名2:值2}
**handler(eventObject)：**该事件触发执行的函数<button type="button" id="btn1">按钮1</button> <button type="button" id="btn2">按钮2</button> <button type="button" id="btn3">按钮3</button> <button type="button" id="btn4">按钮4</button> <button type="button" id="btn5">按钮5</button> <button type="button" id="btn6">按钮6</button> <button type="button" id="btn7">按钮7</button> <script type="text/javascript"> //bind绑定事件 $("#btn1").bind("click",function(){ console.log("点击btn1..."); }); $("#btn2").bind("click",{name:"李四",age:18},function(event){ console.log(event.data); console.log(event.data.name+"年龄是："+event.data.age); }); //常用版本 $("#btn3").click(function(){ console.log("btn3....."); }); // 给某个元素绑定多个事件，执行同一个函数 $("#btn4").bind("click mouseout",function(){ console.log("btn4,,,,,,"); }); // 给元素绑定多个事件，并执行不同的函数 $("#btn5").bind("click",function(){ console.log("btn5 单击。。。"); }).bind("mouseout",function (){ console.log("btn5 移出"); }); //对象object型 $("#btn6").bind({ "click":function(){ console.log("btn6 单击。。。"); }, "mouseout":function(){ console.log("btn6 移出"); } }); //简版 $("#btn7").click(function(){ console.log("btn7 单击。。。"); }).mouseout(function(){ console.log("btn7 移出。。。"); }); </script>
3.表单实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格操作</title> </head> <body> </body> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 数组 var data = [ { "userId":1, "uname":"zhangsan", "uage":18, "usex":true }, { "userId":2, "uname":"lisi", "uage":19, "usex":false }, { "userId":3, "uname":"wangwu", "uage":20, "usex":false } ]; /*console.log(data); console.log(data[0]); console.log(data[0].uname); console.log(data[0].uage);*/ // 创建表格对象 var table = $("<table border='1' width='600px' style='border-collapse: collapse;' align='center'></table>"); // 创建表头对象 var trHead = $("<tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr>"); // 将表头对象追加到表格对象中 append() table.append(trHead); // 遍历用户数组 for(var i =0; i < data.length; i++){ // 得到每一个用户对象 var user = data[i]; // 按钮 var buttons = "<button>修改</button> <button οnclick='deleteUser("+user.userId+")'>删除</button> <button οnclick='deleteUser2(this)'>删除</button>"; // 判断性别 var usex = (user.usex)==true ? "男" : "女"; // 创建用户tr对象 var tr = $("<tr id='tr_"+user.userId+"' align='center'><td>"+user.userId+"</td><td>"+user.uname+"</td><td>"+user.uage+"</td><td>"+usex+"</td><td>"+buttons+"</td></tr>"); // 将用户tr对象追加到table中 table.append(tr); } // 将表格对象追加到body标签中 $("body").append(table); /** * 删除用户 * 1、提醒用户是否确认删除 */ function deleteUser(userId) { // 1、提醒用户是否确认删除 var flag = window.confirm("您确认要删除吗？"); // 如果确认删除 if (flag) { // 需要给tr标签绑定id属性值 $("#tr_" + userId).remove(); } } function deleteUser2(_this) { console.log(_this); $(_this).parent().parent().remove(); } </script> </html>
扫一扫
4755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
