Jquery的使用 1. 下载Jquery的核心JS文件 （http://www.juqery.com） 2. 在需要使用Jquery的页面引入JS文件
Jquery对象 "$“代表的是Jquery对象的引用，相当于"jQuery” $ ==> jQuery 注：只有Jquery对象才能使用Jquery提供的方法。
Jquery包装集对象与Dom对象互相转换 Jquery包装集对象 转 Dom对象： 获取Jquery包装集的下标 Dom对象 转 Jquery包装集对象： $(Dom对象)
当获取元素对象，元素不存在时， 通过document获取的值，返回null （通过判断返回值是否为null，来得知元素是否存在） 通过Jquery获取的值，返回空包装集 （通过判断包装集的长度length，来得知元素是否存在，存在至少length为1
<div id="mydiv">hello</div> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 获取divvar div = $("#mydiv");var div2 = jQuery("#mydiv");console.log(div);console.log(div2);console.log("------------");// Dom对象：通过document获取 divvar divDom = document.getElementById("mydiv");console.log(divDom);// Jquery包装集对象：通过jquery选择器获取 divvar divJquery = $("#mydiv");console.log(divJquery);console.log("====Jquery包装集对象与Dom对象互相转换=====");// 将Dom对象转换成Jquery包装集对象，使用$()将dom对象括起来var domToJquery = $(divDom);console.log(domToJquery);// 将Jquery包装集对象转换成Dom对象，获取Jquery包装集对象的下标var jqueryToDom = divJquery[0];console.log(jqueryToDom);console.log("------------");// 获取不存在的元素// Dom对象console.log(document.getElementById("test"));// jquery对象console.log($("#test")); </script></body></html> JQery选择器 基础选择器基础选择器 id选择器 $("#id属性值") 获取指定id属性值的元素。如果出现多个同名id，只会获取第个。 类选择器 $(".class属性值") 获取指定class属性值的元素 元素选择器 $(“标签名/元素名”) 获取指定标签名的元素
通用选择器 $("*") 获取所有的元素 组合选择器 ( " 选 择 器 1 , 选 择 器 2... " ) 获 取 指 定 选 择 器 选 中 的 元 素 ， 多 个 选 择 器 之 间 用 逗 号 隔 开 注 ： 如 果 在 使 用 J q u e r y 对 象 时 未 引 入 J q u e r y 的 核 心 J S 文 件 ， 则 会 报 错 。 （ ("选择器1,选择器2...") 获取指定选择器选中的元素，多个选择器之间用逗号隔开 注：如果在使用Jquery对象时未引入Jquery的核心JS文件，则会报错。（ ("选择器1,选择器2...")获取指定选择器选中的元素，多个选择器之间用逗号隔开注：如果在使用Jquery对象时未引入Jquery的核心JS文件，则会报错。（ is not defined）
<div id="mydiv1">id选择器1<span>span中的内容</span></div><div id="mydiv1" class="blue">元素选择器</div><span class="blue">样式选择器</span><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">// id选择器$("#id属性值") var mydiv1 = $("#mydiv1");console.log(mydiv1);// 类选择器$(.class属性值)var clas = $(".blue");console.log(clas);// 元素选择器$("标签名/元素名") var divs = $("div");console.log(divs);// 通用选择器 $("*")var all = $("*");console.log(all);// 组合选择器 $("选择器1,选择器2...")var group = $("#mydiv1,.blue,div");console.log(group);</script></body></html> 层次选择器1.后代选择器 空格 $(“指定元素 元素名”) 获取指定元素的所有指定子元素（包含子元素及子元素的子元素）
子代选择器 大于号 > $(“指定元素 > 元素名”) 获取指定元素的所有指定第一代子元素（只会选择第一级子元素）相邻选择器 加号 + $(“指定元素 + 元素名”) 获取指定元素的下一个指定元素（只会找一个元素）同辈选择器 波浪号 ~ $(“指定元素 ~ 元素名”) 获取指定元素后面的所有指定元素 <ul id="food"> <li>水果 <ul> <li>香蕉</li> <li>苹果</li> <li>梨</li> </ul> </li> <li>蔬菜 <ul> <li>白菜</li> <li>油菜</li> <li>卷心菜</li> </ul> </li> </ul> <hr> <div>选择器1</div> <div id="mydiv">选择器2</div> <span>选择器span</span> <div>选择器3</div> <div>选择器4</div> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 后代选择器 空格var hd = $("#food li");console.log(hd);// 子代选择器 大于号 >var zd = $("#food > li");console.log(zd);// 相邻选择器 加号 +var xl = $("#mydiv + div");console.log(xl);// 同辈选择器 波浪号~var tb = $("#mydiv ~ div");console.log(tb); </script> </body></html> 表单选择器表单选择器 （type） :input 表单元素器 选择所有的表单元素，包含input元素、textarea元素、selecte元素 :radio 单选框选择器 :checbox 多选框选择器
input input元素选择器 选择所有的input元素 格式: $(":类型")
<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="爬床"/>爬床 <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 src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">// :inputvar forms = $(":input");console.log(forms);// inputvar inputs = $("input");console.log(inputs);// 获取所有的单选框var radios = $(":radio");console.log(radios);</script> </body></html> 属性选择器 [属性名] $("[属性名]") 获取所有设置过指定属性名的元素 [属性名=‘属性值’] $("[属性名=‘属性值’]") 获取所有设置过指定属性名为指定值的元素
过滤选择器 :checked $(":checked") 获取选中状态为选中的元素（单选框与复选框） :selected $(":selected") 获取选中状态为选中的元素（下拉框） :gt(index) $(":gt(index)") 获取下标大于指定值的元素 :eq(index) $(":eq(index)") 获取下标等于指定值的元素 :odd $(":odd") 获取所有的奇数下标 :even $(":even") 获取所有的偶数下标
<form id='myform' name="myform" method="post"> <input type="hidden" name="uno" value="9999" disabled="disabled"/> 姓名:<input type="text" id="uname" class="blue" 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="radio" name="usex" value="0" checked="checked"/>男 <input type="radio" name="usex" value="1"/>女 <br /> 爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球 <input type="checkbox" name="ufav" value="爬床"/>爬床 <input type="checkbox" name="ufav" value="代码"/>代码<br /> 来自:<select id="ufrom" name="ufrom" class="blue" multiple="multiple"> <option value="-1" >请选择</option> <option value="0" selected="selected">北京</option> <option value="1" selected="selected">上海</option><option value="2">杭州</option><option value="3" selected="selected">深圳</option> </select><br /> 简介:<textarea rows="10" cols="30" name="uintro"></textarea><br /> 头像:<input type="file" /><br /> <button type="submit" onclick="return checkForm();">提交</button> <button type="reset" >重置</button> </form> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // [属性名]$("[属性名]") var test = $("[name]");console.log(test);// [属性名='属性值']$("[属性名='属性值']")var test2 = $("[name='ufav']");console.log(test2);// 多种选择器结合使用 （获取name为usex的被选中的单选框）var test3 = $(":radio[name='usex']:checked");console.log(test3);// :selected// $("#ufrom option") 获取下拉框所有的下拉选项// $("#ufrom option:selected") 获取下拉框所有的被选中的下拉选项// $("#ufrom option:selected:eq(0)") 获取下拉框被选中的第一个下拉选项var ufrom = $("#ufrom option:selected:gt(0)");console.log(ufrom); </script></body></html> JQuery操作元素的属性attr() 设置属性 对象.attr(“属性名”,“属性值”); 获取属性 var 属性值 = 对象.attr(“属性名”); prop() 设置属性 对象.prop(“属性名”,“属性值”); 获取属性 var 属性值 = 对象.prop(“属性名”);
区别： 1. 固有属性 元素本身就拥有的属性 attr()和prop()都可以操作固有属性 2. 返回值是布尔类型的属性 checked、selected、disabled prop()操作返回值是布尔类型的属性 3. 自定义属性 用户自己定义的属性 attr()可以操作，prop()不可以操作
总结：如果属性的返回值是布尔类型，选择prop方法；否则使用attr方法 <form action="" id="myform"><input type="checkbox" name="ch" id="ck1" checked="checked" aa="AA"/> aa<input type="checkbox" name="ch" id="ck2" />bb</form><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">/** * 固有属性 *//* 获取属性 */// attr()var name1 = $("#ck1").attr("name");console.log(name1);// prop()var name2 = $("#ck1").prop("name");console.log(name2);/* 设置属性 */// $("#ck2").attr("checked", "checked");// $("#ck2").prop("checked", "checked");/** * 返回值是布尔类型的属性 *//* 获取属性 */// attrvar cked1 = $("#ck1").attr("checked");console.log(cked1);// propvar cked2 = $("#ck1").prop("checked");console.log(cked2);// attrvar cked3 = $("#ck2").attr("checked");console.log(cked3);// propvar cked4 = $("#ck2").prop("checked");console.log(cked4);/* 设置属性 */// attr// $("#ck2").attr('checked','checked');// prop// $("#ck2").prop("checked", true);$("#ck1").prop("checked",false);/** * 自定义属性 *//* 获取属性 */// attrvar aa1 = $("#ck1").attr("aa");console.log(aa1);// propvar aa2 = $("#ck1").prop("aa");console.log(aa2);/* 设置属性 */// attr$("#ck1").attr("bb","BB");// prop$("#ck1").prop("cc","CC");</script></body></html> 操作元素的样式操作元素的样式 1. 获取元素的样式名 attr(“class”) 2. 设置元素的样式 （将原本的样式值修改成新的值，所以会将原本的样式覆盖） attr(“class”,“样式名”) 3. 添加元素的样式 （在原本的样式基础上追加新的样式） addClass(“样式名”) 4. 添加具体的样式 （样式通过style属性添加） css() 添加一个具体的样式 css(“样式名”,“样式值”) 添加多个具体的样式 css({“样式名”:“样式值”,“样式名”:“样式值”}) 5. 移除样式 removeClass(“样式名”)
<!DOCTYPE html><html><head><meta charset="utf-8"><title>操作元素的样式</title><style type="text/css">div{padding: 8px;width: 180px;}.blue{background: blue;}.larger{font-size: 30px;}.green {background : green;}.red{background: red;}</style></head><body><!-- 操作元素的样式1. 获取元素的样式名attr("class")2. 设置元素的样式 （将原本的样式值修改成新的值，所以会将原本的样式覆盖）attr("class","样式名")3. 添加元素的样式 （在原本的样式基础上追加新的样式）addClass("样式名")4. 添加具体的样式 （样式通过style属性添加）css()添加一个具体的样式 css("样式名","样式值")添加多个具体的样式 css({"样式名":"样式值","样式名":"样式值"})5. 移除样式removeClass("样式名") --><h3>css()方法设置元素样式</h3><div id="conBlue" class="blue larger">天蓝色</div><div id="conRed">大红色</div><div id="remove" class="blue larger">天蓝色</div><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">// 1. 获取元素的样式名console.log($("#conBlue").attr("class"));// 2. 设置元素的样式 （将原本的样式值修改成新的值，所以会将原本的样式覆盖）$("#conBlue").attr("class","green");$("#conRed").attr("class","larger");// 3. 添加元素的样式 （在原本的样式基础上追加新的样式）$("#conRed").addClass("red");// 4. 添加具体的样式// $("#conRed").css("color","blue");$("#conRed").css({"color":"blue","background":"pink"});// 5. 移除样式$("#remove").removeClass("larger");</script></body></html> 操作元素的内容val() 操作表单元素的值 取值：var 值 = 表单元素对象.val(); 赋值：表单元素对象.val(值); html() 操作非表单元素的内容 （包含html标签） 取值：var 内容 = 对象.html(); 赋值：对象.html(内容); text() 操作非表单元素的文本内容 （不包含html标签） 取值：var 内容 = 对象.text(); 赋值：对象.text(内容);
<input type="text" name="uname" id="uname" value="oop" /> <div id="html"></div> <div id="text"></div> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* val() 操作表单元素的值 */ // 通过原生JS获取值console.log(document.getElementById("uname").value);// 通过Jquery方式获取console.log($("#uname").val());// 赋值$("#uname").val("面向对象");// document.getElementById("uname").value = "面向对象";/* html() 操作非表单元素的内容 （包含html标签） */// 赋值$("#html").html("Hello");$("#html").html("<h2>Hello</h2>");// 取值console.log($("#html").html());/* text() 操作非表单元素的文本内容 （不包含html标签） */// 赋值$("#text").text("Hello");$("#text").text("<h2>Hello</h2>");// 取值console.log($("#html").text()); </script> </body></html>创建和添加元素
创建元素 $(“元素标签”)
添加元素 对象.before(“内容”) 前追加，在元素的同级追加，内容可以是对象、html或字符串等 对象.after(“内容”) 后追加，在元素的同级追加，内容可以是对象、html或字符串等 对象.prepend(“内容”) 在元素的内部最前面追加子元素，内容可以是对象、html或字符串等 对象.append(“内容”); 在元素的内部最后面追加子元素，内容可以是对象、html或字符串等 $(“内容”).prependTo(对象) 在元素的内部最前面追加子元素，内容可以是对象、html或字符串等 $(“内容”).appendTo(对象) 在元素的内部最后面追加子元素，内容可以是对象、html或字符串等 注： 追加元素时（同级添加和子元素添加） 如果元素不存在，则创建元素，并添加 如果元素存在，则会获取已存在的元素，并剪切到新的位置
<h6>before()方法前追加</h6> <h6>after()方法后追加</h6> <span class="red">男神</span> <span class="blue">偶像</span> <h6>prepend()方法前追加子元素内容</h6><h6>prependTo()方法前追加子元素内容</h6><h6>append()方法后追加子元素内容</h6><h6>appendTo()方法后追加子元素内容</h6><div class="green"> <span >小鲜肉</span></div> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">// 定义html字符串var htmlTxt = "<p>这是一个段落</p>";console.log(htmlTxt);// 将html字符串转换成Jquery对象var htmlJquery = $(htmlTxt);console.log(htmlJquery);console.log(htmlJquery.html());console.log("---------同级追加-----------");// 得到目标对象var ns = $(".red");// 准备要追加的内容var span = "<span class='pink'>女神</span>";// 将内容追加到指定元素前面// ns.before(span);// 将内容追加到指定元素后面ns.after(span);// 得到要追加的元素（已存在的元素）var blue = $(".blue");// 追加已有元素ns.before(blue);console.log("-----------子元素追加-----------");// 准备要追加的元素var sp = "<span>老腊肉</span>";// prepend() 前面追加子元素//$(".green").prepend(sp);// append() 后面追加子元素var sp2 = "<span>小奶狗</span>";//$(".green").append(sp2);// prependTo()$(sp).prependTo($(".green"));// appendTo()$(sp2).appendTo($(".green"));// 追加已存在的元素$(".green").append($(".blue")); </script></body></html> 删除元素 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 src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 删除元素 删除class属性为green的元素$(".green").remove();// 清空元素$(".blue").empty(); </script></body></html> 遍历元素 each() 对象.each(function(index,element){ // index:下标 // element:元素，dom元素 // this：元素，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 src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(".green").each(function(index,element){// this 是dom对象// console.log(this);// console.log(this.innerHTML);// console.log($(this).html());console.log("下标：" + index);console.log(element);console.log($(element));}); </script></body></html>