jQuery-第1节-jQuery和DOM对象互相转化、选择器
来源：互联网 发布：域名升级访问手机版 编辑：程序博客网 时间：2024/05/16 14:48
1. jQuery的简介
是一个JavaScript函数库
2. jQuery的优势
<script src="jquery.min.js"></script>
4.jQuery对象和DOM对象
（1）jQuery对象转为DOM对象
（2）DOM对象转为jQuery对象
（1）基本选择器
例子：
例子：
是一个JavaScript函数库
2. jQuery的优势
- 轻量级
- 强大的选择器
- 出色的DOM操作封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
<script src="jquery.min.js"></script>
4.jQuery对象和DOM对象
（1）jQuery对象转为DOM对象
- jQuery对象是一个数组对象，通过[index]方法得到DOM对象。如：$("#text")[0]
- 使用jQuery中的get(index)方法，如：$("#text").get(0)
<body><p id="p1">段落一</p><p id="p2">段落二</p><input type="button" value="使用DOM修改第一个段落" onclick="change()"><input id="btn1" type="button" value="使用JQuery修改第一个段落"><br/><input id="btn3" type="button" value="JQuery对象转为DOM对象"><script> //使用DOm修改第一个段落 function change(){ var a=document.getElementById("p1"); a.innerHTML="使用DOM修改第一个段落"; } // $(document).ready(function(){ //使用jQuery修改段落 $("#btn1").click(function(){ $("#p1").html("使用JQuery修改段落"); }); //JQuery对象转为DOM $("#btn3").click(function(){ //(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象. // $("#msg")[0] //(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象 //$("#msg").get(0) var dom_b=$("#p2")[0];//对象[0]从JQ对象中获取DOM对象 dom_b.innerHTML="JQuery对象转为DOM"; }); });</script></body>（2）DOM对象转为jQuery对象
- $(DOM对象名称)，如：$(document.getElementById("div"))
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JQuery对象和DOM对象</title> <script src="jquery.js"></script></head><body onload="load()"><p id="p1">段落一</p><p id="p2">段落二</p><input type="button" value="使用DOM修改第一个段落" onclick="change()"><input id="btn1" type="button" value="使用JQuery修改第一个段落"><br/><input id="btn2" type="button" value="DOM对象转为JQuery对象"><script> //使用DOm修改第一个段落 function change(){ var a=document.getElementById("p1"); a.innerHTML="使用DOM修改第一个段落"; } // $(document).ready(function(){ //使用jQuery修改段落 $("#btn1").click(function(){ $("#p1").html("使用JQuery修改段落"); }); //DOM对象转为JQuery $("#btn2").click(function(){ var b=document.getElementById("p2"); var jq_b=$(b);//$(DOM对象) //$(DOM 对象后产生的对象) jq_b.html("DOM对象转为JQuery"); });</script></body></html>5. jQuery的选择器（1）基本选择器
- * 如：$("*")，所有元素
- #id属性； 如：$("#lastname")中，所有id="lastname" 的元素
- .class属性；如： $(".intro") 中，所有 class="intro" 的元素
- element 如：$("p") 所有 <p> 元素
- .class属性 .class属性 如：$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
<p>H5edu.cn</p><p>你好</p><div><img src="image/logo.png" width="30%" height="30%"></div><input type="button" id="btn1" value="p标签隐藏"><br/><input type="button" id="btn2" value="全部显示"><br><input type="button" id="btn3" value="div,p隐藏"><script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").hide(); }); $("#btn2").click(function(){ $("*").show();//匹配所有的元素 }); $("#btn3").click(function(){ $("div,p,#btn1").hide();//集合元素，可以写标签，也可以加id属性，多个中间用，号分开 }); });</script>（2）层次选择器- $("class/id 元素")，查询class/id后的所有元素
- $("class/id>元素") ，查询class/id中所有的子节点（一级）
- $("class/id +next"),选取class/id元素的下一个元素
- $("class/id ~元素")，选取class/id中所有的元素
<h2>层次选择器</h2><div id="div1"> <p id="p1">段落</p> <h2>张新丁</h2> <h2>你好</h2> <div id="div2"> <img src="image/logo.png" width="30%" height="30%"> <h2>层次选择器</h2> <img src="image/logo.png" width="30%" height="30%"> <img src="image/logo.png" width="30%" height="30%"> </div> <p id="p2"> <img src="image/logo.png" width="30%" height="30%"> </p></div><script> $(function(){//简写：$(document).ready(function(){}); //div1 H2是指div1中所有的H2 $("#div1 H2").css("color","red"); //#div1>H2表示div1中的所有的直接子节点（一级） $("#div1>H2").css("background-color","pink"); //+号表示后面的一个元素 $("#p1+H2").css("border","1px solid blue"); //h2中所有的img $("h2~img").css({"width":"20%","height":"20%","border":"dashed 1px green"}); });</script>（3）过滤选择器- 基本过滤选择器：
- :first，匹配选择第一个元素
- :last匹配选择最后一个元素
- :not(selector)去除所有匹配元素
- :odd匹配所有奇数的元素
- :even匹配素偶数的元素
- :eq(index)匹配一个指定的索引值值的元素
- :gt(index)匹配大于指定所有值的元素
- :lt(index)匹配小于指定所有值的元素
- .header选择所有h1-h6的head标签
- :animated匹配正在执行的动画效果的元素
<h3>过滤选择器的使用</h3><ul> <li>:first匹配选择第一个元素</li> <li>:last匹配选择最后一个元素</li> <li>:not(selector)去除所有匹配元素</li> <li>:odd匹配所有奇数的元素</li> <li>:even匹配所有偶数的元素</li> <li>:eq(index)匹配一个指定的索引值的元素</li> <li>:gt(index)匹配大于指定所有值的元素</li> <li>:lt(index)匹配小于指定所有值的元素</li> <li>.header选择所有h1-h6的head标签</li> <li>:animated匹配正在执行的动画效果的元素</li></ul><table> <tr><td>HTML</td></tr> <tr><td>CSS</td></tr> <tr><td>JavaScript</td></tr> <tr><td>CSS3</td></tr> <tr><td>HTML5新增标签</td></tr></table><script> //设置所有的li的颜色 $(function(){ $("li").css("color","#999"); //设定第一个 $("li:first").css("color","red"); //设定最后一个 $("li:last").css("color","red"); //设定奇数 $("li:odd").css("background-color","pink"); //设定偶数 $("li:even").css("background-color","#abcdef"); //设定表隔行换色(奇数和偶数) $("tr:odd").css("background-color","cyan"); $("tr:even").css("background-color","purple"); });</script>2. 内容过滤选择器- $("id/class/标签 :contains('文本')")，选取文本内容的text元素
- $("id/class/标签 :has('标签')")，选取含有标签的所有元素
<div><a href="">欢迎来到张新丁的个人主页,张新丁的个人空间</a></div><br/><div><p>邮箱：zhang@qq.com</p></div><script> $(function(){ //:contains查找所有包含“张鑫”的a元素 $("a:contains('张新')").css("color","red"); //has匹配含有该元素 $("div:has('p')").css("border","1px solid red"); });</script>3. 可见性选择器- :hidden，选取所有不可见的元素
- :visible，选取所有可见元素
<input type="hidden" value="隐藏"><input type="text" value="文本框"><input type="button" id="btn1" value="获取hidden对象的value"><input type="button" id="btn2" value="获取可见对象text内容"><script> $(function(){ $("#btn1").click(function(){ //hidden是隐藏对象过滤器 alert($("input:hidden").val()); }); $("#btn2").click(function(){ //visible是显示对象的过滤器 alert($("input:visible").val()); }); });</script>4.属性过滤器- [attribute] $("[href]") 所有带有 href 属性的元素
- [attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
- [attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
- [attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
例子：
<img src="image/logo.png" width="30%" height="30%"><br><img src="image/logo.png" width="40%" alt="test" ><br><img src="image/logo.png" width="20%" alt="你好"><script> $(function(){ //选取有height属性的元素 $("img[height]").css("border","1px solid red"); //alt*='你好'选取指定属性值为‘你好’的元素 $("img[alt*='你好']").css("border","1px dashed blue"); });</script>5.子元素过滤器- :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
- :nth-child(2): 能选取每个父元素下的索引值为 2 的元素
- :nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
- :nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素
- :first:child: 获取每个父元素的第一个元素
- :last:child: 获取每个父元素的最后一个元素
- :only:child: 如果某一元素是它父元素中唯一的子元素，那么将匹配
<div> <h3>学习HTML5路线图</h3> <p>1.HTML</p> <p>2.CSS</p> <p>3.JavaScript</p> <p>4.JQuery</p></div><script> $("div p").css("color","red"); $("div p:nth-child(5)").css("color","blue"); //nth-child(2n-1): 能选取每个父元素下的索引值为 2n-1 的元素 $("div p:nth-child(2n-1)").css("color","yellow");</script>6.表单对象属性过滤器例子：
姓名<input type="text" value=""><br>性别<input type="radio" value="1" name="sex">男<input type="radio" value="2" name="sex">女<br><input type="button" value="获取"><script> $(function(){ $(":button").css({"width":"100%","height":"80%"}); $(":button").click(function(){ alert($(":text").val()); alert($(":radio:checked").val()); }); });</script> 0 0
- jQuery-第1节-jQuery和DOM对象互相转化、选择器
- jQuery DOM 对象互相转化
- js中的Dom对象和jQuery对象的互相转化
- jQuery和DOM对象转化
- DOM对象和jQuery对象互相转换
- jQuery对象与DOM对象的互相转化
- JQuery 选择器、过滤器及JQ对象和DOM对象的互相转换
- jQuery对象和DOM对象相互转化
- jQuery对象和DOM对象 转化
- jQuery对象和DOM对象相互转化
- jQuery对象和DOM对象相互转化
- jquery对象和dom对象转化
- jQuery对象和DOM对象相互转化
- jQuery对象和DOM对象的转化
- jquery parent jQuery对象和dom对象互相转换
- DOM对象和JQuery对象的区别与互相转换
- jQuery对象和DOM对象的互相转换
- jQuery对象和DOM对象的互相转换
- 自定义事件
- CGO，GOLANG调用C库，调用代码、静态库或动态库
- Andriod界面设计适配和Android Studio中的资源
- 非标准JSON解析
- 发送邮件
- jQuery-第1节-jQuery和DOM对象互相转化、选择器
- 欢迎使用CSDN-markdown编辑器
- GridView的一些属性
- 编程思想
- boostrap 列表- 有序、无序、描述
- document.WebBrowser.ExecWB 报错及其解决方案
- C++学习笔记（2） 顺序容器的使用
- android studio 加入jni的简单操作
- 记录一次攻击事件(redis 未授权漏洞利用直接登录服务器)v
