今天上的第一节jquery选择器小结（入门级）

来源：互联网发布：雄迈监控软件密码编辑：程序博客网时间：2024/05/17 06:29

JAVASCRIPT类库，简称js，作用是为了简化javascript的开发，他预定义了很多对象（属性和方法）和函数，特点是兼容了个大浏览器！

JQUERY其实就是一个js文件，分类： jQuery - Web版本(最主要)； jQuery UI(User Interface) - 集成UI内容； jQuery Mobile - 移动版本(WebApp)；QUnit - 用于测试。

版本： 1.4.2版本 - 企业开发使用； 1.8.3版本 - 企业使用最新； 1.11.3版本 - 目前jQuery最新；2.x.x版本 - 不再支持IE浏览器(8以前)。

特点： HTML代码(结构) - 标签；HTML内容 - 浏览器运行页面后显示的。

如何使用jQuery：1.在HTML页面中引入jQuery文件2.使用jQuery的选择器定位(获取)页面元素3.利用jQuery的API方法完成需求

基本内容：$(selector) - jQuery的工厂函数--- 该函数返回jQuery对象，jQuery的约定 - jQuery对象前增加"$"符号。

DOM对象与jQuery对象：

DOM对象 - 通过DOM获取的元素,称之为DOM对象；jQuery对象 - 通过jQuery包装DOM后产生的对象， jQuery对象的底层还是DOM对象。

DOM对象与jQuery对象的转换:

1.DOM对象转换为jQuery对象:$(DOM对象).

2. jQuery对象转换为DOM对象:1.jQuery对象是数组对象 - 角标2. jQuery对象提供get(index)方法.

注意 - DOM对象与jQuery对象之间不能相互调用.

jQuery事件: jQuery将DOM的事件封装成对应的方法.

选择器 - 是jQuery的根基

1.基本选择器
2.层级选择器
3.过滤选择器 - 在选择器前,具有":"符号
4. 基本过滤选择器
5. 子元素过滤选择器
6. 内容过滤选择器
7. 可见性过滤选择器
8. 属性过滤选择器
9. 表单对象属性过滤选择器
10. 表单选择器

下面就是几个例子的展示：

（备注：上述案列运行前，请先下载jquery文件，或者可以去jquery官网下载！）

基本选择器：

</pre><pre name="code" class="html"><!DOCTYPE html><html> <head>  <title>基本选择器</title>  <meta charset="utf-8" />  <script src="jquery-1.11.3.js"></script>  <style>div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}.mini {width : 100px;height : 100px;border : solid 1px black;background : blue;float : left;margin-right : 10px;}  </style> </head> <body>  <button id="btn1">id选择器</button>  <button id="btn2">元素选择器</button>  <button id="btn3">class选择器</button>  <button id="btn4">*选择器</button>  <button id="btn5">复合选择器</button>  <br><br>  <div id="d1">这是id为d1的div元素.</div>  <div class="mini"></div>  <div></div>  <div></div>  <div></div>  <script>// 1 获取btn1按钮,绑定onclick事件$("#btn1").click(function(event){/* * 改变背景颜色 * * 操作CSS的background-color的属性 * * jQuery操作CSS *   * css(name,value)方法 *     * name - CSS的属性名称 *     * value - CSS的属性值 */$("#d1").css("background","red");});// 2 元素选择器$("#btn2").click(function(){/* * JS定义的数组 * * 遍历数组,获取每一个元素 * * 遍历的过程中,改变每一个元素 * jQuery数组对象 * * 批处理 */$("div").css("background","red");/*var $divs = $("div");// 遍历数组for(var i=0;i<$divs.length;i++){// 获取每一个元素var div = $divs[i];div.className;}*/});$("#btn3").click(function(){$(".mini").css("background","red");});$("#btn4").click(function(){$("*").css("background","red");});$("#btn5").click(function(){// 多个选择器并列使用,中间使用","分隔$("#d1,.mini").css("background","red");});  </script> </body></html>

基本过滤选择器：

<!DOCTYPE html><html> <head>  <title>基本过滤选择器</title>  <meta charset="utf-8" />  <script src="jquery-1.11.3.js"></script>  <style>div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}.mini {width : 50px;height : 50px;border : solid 1px black;background : yellow;float : left;margin-right : 10px;}  </style> </head> <body>  <h3>基本过滤选择器</h3>  <h1>基本过滤选择器</h1>  <button id="btn1">:first</button>  <button id="btn2">:last</button>  <button id="btn3">:even</button>  <button id="btn4">:odd</button>  <button id="btn5">:gt</button>  <button id="btn6">:lt</button>  <button id="btn7">:eq</button>  <button id="btn8">:not</button>  <button id="btn9">:header</button>  <button id="btn10">:animated</button>  <br><br>  <div id="d1"></div>  <div id="one"></div>  <div class="mini"></div>  <div></div>  <div></div>  <script>$("#btn1").click(function(){$("div:first").css("background","green");});$("#btn2").click(function(){$("div:last").css("background","green");});$("#btn3").click(function(){$("div:even").css("background","green");});$("#btn4").click(function(){$("div:odd").css("background","green");});$("#btn5").click(function(){$("div:gt(1)").css("background","green");});$("#btn6").click(function(){$("div:lt(1)").css("background","green");});$("#btn7").click(function(){$("div:eq(1)").css("background","green");});$("#btn8").click(function(){$("div:not('.mini')").css("background","green");});$("#btn9").click(function(){$(":header").css("background","green");});// 让第一个div上下滑动function move(){$("#d1").slideToggle(500,function(){move();});}move();$("#btn10").click(function(){$(":animated").css("background","green");});  </script> </body></html>

子元素过滤选择器：

<!DOCTYPE html><html> <head>  <title>子元素过滤选择器</title>  <meta charset="utf-8" />  <script src="jquery-1.11.3.js"></script>  <style>div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}.mini {width : 50px;height : 50px;border : solid 1px black;background : yellow;float : left;margin-right : 10px;}  </style> </head> <body>  <button id="btn1">:nth-child</button>  <button id="btn2">:first-child</button>  <button id="btn3">:last-child</button>  <button id="btn4">:only-child</button>  <br><br>  <div><div class="mini"></div>  </div>  <div><div class="mini"></div><div class="mini"></div>  </div>  <div><div class="mini"></div><div class="mini"></div>  </div>  <div></div>  <div></div>  <script>// 1. 获取div元素的子元素是第二个$("#btn1").click(function(){// :nth-child选择器 是从1开始$("div:nth-child(2)").css("background","red");});// 2. 获取div元素的第一个子元素$("#btn2").click(function(){$("div:first-child").css("background","red");});// 3. 获取div元素的最后一个子元素$("#btn3").click(function(){$("div:last-child").css("background","red");});// 4. 如果哪个div元素只有一个子元素,那么选中$("#btn4").click(function(){$("div:only-child").css("background","red");});// 子元素过滤选择器 - 层级+基本过滤选择器  </script> </body></html>

内容过滤选择器：

<!DOCTYPE html><html> <head>  <title>内容过滤选择器</title>  <meta charset="utf-8" />  <script src="jquery-1.11.3.js"></script>  <style>div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}.mini {width : 50px;height : 50px;border : solid 1px black;background : yellow;float : left;margin-right : 10px;}  </style> </head> <body>  <button id="btn1">:contains</button>  <button id="btn2">:empty</button>  <button id="btn3">:parent</button>  <button id="btn4">:has</button>  <br><br>  <div>这是第一个div元素.class为div111</div>  <div>这是第二个div元素.class为div11<div class="mini"></div>  </div>  <div>这是第三个div元素.class为div<div class="mini"></div>  </div>  <div>这是第四个div元素.class为div1</div>  <div></div>  <script>$("#btn1").click(function(){// 文本包含"div11"的div元素$("div:contains('div11')").css("background","green");});$("#btn2").click(function(){// 不包含任何文本内容或子元素的div元素$("div:empty").css("background","green");});$("#btn3").click(function(){// 包含任何文本内容或子元素的div元素$("div:parent").css("background","green");});$("#btn4").click(function(){// 包含class为mini的div元素的父div元素$("div:has('.mini')").css("background","green");});  </script> </body></html>

可见性过滤选择器：

<!DOCTYPE html><html> <head>  <title>可见性过滤选择器</title>  <meta charset="utf-8" />  <script src="jquery-1.11.3.js"></script>  <style>div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}.one {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;display : none;}  </style> </head> <body>  <button id="btn1">可见</button>  <button id="btn2">不可见</button>  <br><br>  <div></div>  <div></div>  <div class="one"></div>  <div></div>  <div></div>  <script>$("#btn1").click(function(){$("div:visible").css("background","green");});$("#btn2").click(function(){$("div:hidden").show(3000).css("background","green");});  </script> </body></html>

属性过滤选择器:

<!DOCTYPE html><html> <head>  <title>属性过滤选择器</title>  <meta charset="utf-8" />  <script src="jquery-1.11.3.js"></script>  <style>div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}  </style> </head> <body>  <button id="btn1">按钮1</button>  <button id="btn2">按钮2</button>  <button id="btn3">按钮3</button>  <button id="btn4">按钮4</button>  <button id="btn5">按钮5</button>  <button id="btn6">按钮6</button>  <button id="btn7">按钮7</button>  <br><br>  <div id="div1" name="div1" title="text1"></div>  <div id="div11" name="div2" title="text11"></div>  <div name="div3" title="text1"></div>  <div id="div13" name="div4"></div>  <div id="div14" name="div5"></div>  <script>$("#btn1").click(function(){// 包含属性title的div元素$("div[title]").css("background","green");});$("#btn2").click(function(){// 包含属性title=text1的div元素$("div[title=text1]").css("background","green");});$("#btn3").click(function(){// 包含属性title!=text1的div元素(包含没有该属性的div元素)$("div[title!=text1]").css("background","green");});$("#btn4").click(function(){// 包含属性title值是以text开始的div元素$("div[title^=text]").css("background","green");});$("#btn5").click(function(){// 包含属性title值是以t1结束的div元素$("div[title$=t1]").css("background","green");});$("#btn6").click(function(){// 包含属性title值包含t1的div元素$("div[title*=t1]").css("background","green");});$("#btn7").click(function(){// 包含属性title值是以t1结束的,包含id属性的div元素// 多个属性过滤选择器并列使用$("div[title$=t1][id]").css("background","green");});  </script> </body></html>

表单对象属性过滤选择器:

<!DOCTYPE html><html> <head>  <title>表单对象属性过滤选择器</title>  <meta charset="utf-8" />  <script src="jquery-1.11.3.js"></script>  <style>div {width : 150px;height : 150px;border : solid 1px black;background : blue;float : left;margin-right : 10px;}  </style> </head> <body>  <button id="btn1">:enabled</button>  <button id="btn2">:disabled</button>  <button id="btn3">:checked</button>  <button id="btn4">:selected</button>  <br><br>  <input type="text" value="这是可用元素"><br>  <input type="text" disabled="disabled" value="这是不可用元素"><br><br>  <input type="radio" name="love" checked="checked" value="html">HTML  <input type="radio" name="love" value="css">CSS  <input type="radio" name="love" value="javascript">JAVASCRIPT  <br><br>  <select id="city"><option value="">-请选择-</option><option value="bj" selected="selected">-北京-</option><option value="tj">-天津-</option><option value="sh">-上海-</option><option value="nj">-南京-</option><option value="cq">-重庆-</option>  </select>  <script>// 1. 改变页面中可用元素的value属性值$("#btn1").click(function(){/** val()方法 - 获取|设置指定元素的value属性值* * 获取 - val()* * 设置 - val(value)*/$("input:enabled").val("xxx");});// 2. 改变页面中不可用元素的value属性值$("#btn2").click(function(){$("input:disabled").val("yyy");});// 3. 打印被选中的单选框的value属性值$("#btn3").click(function(){console.log($("input[name=love]:checked").val());// DOMvar loves = document.getElementsByName("love");for(var i=0;i<loves.length;i++){var love = loves[i];if(love.checked){console.log(love.value);}}});// 4. 获取下拉列表被选中的选项的value属性值$("#btn4").click(function(){console.log($("#city>option:selected").val());// DOM// 1. 获取select标签// 2. 根据select获取所有option标签// 3. 遍历所有option标签// 4. 判断哪个被选中// 5. 输出结果});  </script> </body></html>

本人第一次发微博，如果各位大神读完后，有任何建议，望积极提出，给小弟一些参考。

0 0