首页 > 代码库 > Jquery操作-（多种实例）--未完
Jquery操作-（多种实例）--未完
一、Jquery简介
定义
jQuery创始人是美国John Resig，是优秀的Javascript框架；
jQuery是一个轻量级、快速简洁的javaScript库。
jQuery对象
jQuery产生的对象时jQuery独有的，只能自己调用
书写规则
支持链式操作；
在变量前加"$"符号（var $variable = jQuery 对象）；
注：此规定并不是强制要求。
二、寻找元素
寻找元素包含两大部分，一部分是选择器，一部分是筛选器,正题之前在次强调一下$就是代表JQuery这个对象。
基本选择器
1.id选择器-最常用最基本
用于搜索的，通过元素的 id 属性中给定的值，（#号来表示），如果遇到查找的id存在特殊符号，请记得使用转义符：#foo\\[bar\\]
html代码：
<div id="notMe"><p>id="notMe"</p></div><div id="myDiv">id = "myDiv"</div>
JQuery代码：
$("#myDiv");结果：（结果还是一个对象）
2.element选择器-最常用最基本
根据给定的元素标签名匹配所有元素，仔细回忆一下都是那些来着？例如<div>标签、<a>标签、<p>标签等。。。
html代码：
<div id="notMe"><p>id="notMe"</p></div><div id="myDiv">id = "myDiv"</div><span>SPAN</span>
JQuery代码：
$("div")；结果：
3.class类名选择器-最常用最基本
根据给定的css类名匹配元素，有时候一个元素有很多类型，只要有一个符合就能被匹配到，同样一个类型也能存在多个元素中，只要符合查找类名也可以全部查询到。
html代码：
<div class="notMe">div class="notMe"</div><div class="myClass">div class="myClass"</div><span class="myClass">span class="myClass"</span>
JQuery代码：
$(".myClass")结果：
4.所有元素选择器*
html代码：
<div class="notMe">div class="notMe"</div><div class="myClass">div class="myClass"</div><span class="myClass">span class="myClass"</span><p>P</p>
JQuery代码：
$("*")结果：实际应用效果不是很好，相当于全都找出到。
5.集合选择器-常用-可以查找多个
将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
html代码：
<div>div</div> <p class="myClass">p class="myClass"</p> <span>span</span> <p class="notMyClass">p class="notMyClass"</p>
JQuery代码：
$("div,span,p.myClass")结果：
层级选择器
1.祖先元素下匹配所有的后代元素-ancestor descendant
在给定的祖先元素下匹配所有的后代元素，包括儿子，孙子，曾孙等等。
html代码：
<form> <label>Name:</label> <input name="name" /> <input name="name1" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset></form><input name="none" />
JQuery代码：
$("form input")结果：查找到了所有的form下的子元素-input。
2.父元素下匹配所有的子元素-parent > child
在给定的父元素下匹配所有的子元素，请注意是子元素，也就是儿子，不能再有其孙子啥的了
html代码：
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> <input name="name1" /> </form> <input name="none" />
JQuery代码：
$("form > input")结果：
[<input name="name" />,<input name="name1" />]
3.紧接在 prev 元素后的 next 元素-prev + next
选择器next的查找范围必须是与"prev元素"相邻的下一个元素，并且必须是"prev元素"的同辈元素。
html代码：
<form> <label>Name:</label> <input name="name" /> <input name="name1" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
JQuery代码：
$("label + input")结果：
[ <input name="name" />, <input name="newsletter" />
4.查找元素的所有兄弟姐妹-prev ~ siblings
注意：选择器siblings的查找范围必须是"prev元素"之后的元素，并且是同辈元素(即与"prev元素"有同一个的父元素)。
html代码：
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset></form><input name="none" /
JQuery代码：
$("form ~ input")结果：
[ <input name="none" /> ]
基本筛选器
基本含义就是对选择出来的元素列表进行筛选。这些基本上可以按照一定的规则去分类记忆：
- 元素位置筛选。
:first 获取第一个元素。
:last 获取最后一个元素。
- 根据元素索引值的奇偶性筛选。
:even
:odd
- 根据元素索引值的不等性筛选。
:eq(index) 匹配一个给定索引值的元素。
:gt(index) 匹配所有大于给定索引值的元素。
:lt(index) 匹配所有小于给定索引值的元素。
- 其他类型筛选。
:not(selector) 去除所有与给定选择器匹配的元素
:focus 匹配当前获取焦点的元素。
代码示例：如果想看更具体的信息，请猛点击吧：www.php100.com/manual/jquery/
$(‘li:first‘) //第一个元素$(‘li:last‘) //最后一个元素$("tr:even") //索引为偶数的元素，从 0 开始$("tr:odd") //索引为奇数的元素，从 0 开始 $("tr:eq(1)") //给定索引值的元素$("tr:gt(0)") //大于给定索引值的元素$("tr:lt(2)") //小于给定索引值的元素$(":focus") //当前获取焦点的元素$(":animated") //正在执行动画效果的元素
内容选择器
html代码：
<!--:contains(text)实例代码--> <div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <!--:empty和:parent 实例代码--> <table> <tr> <td>Value 1</td> <td></td> </tr> <tr> <td>Value 2</td> <td></td> </tr> </table> <!--:has(selector)实例代码--> <div> <p>Hello</p> </div> <div>Hello again!</div>
JQuery代码：
$("div:contains(‘John‘)"); //匹配包含给定文本的元素 $("td:empty"); //匹配所有不包含子元素或者文本的空元素 $("div:has(p)").addClass("test"); //匹配含有选择器所匹配的元素的元素,大白话就是找的是含有p元素的元素。 $("td:parent");//匹配含有子元素或者文本的元素结果：
<!--:contains(text)实例结果-->[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]<!--:empt实例结果y-->[ <td></td>, <td></td> ]<!--:has(selector)实例结果-->[ <div class="test"><p>Hello</p></div> ]<!--:parent 实例结果-->[ <td>Value 1</td>, <td>Value 2</td> ]
表单选择器
其实说白了就是选择器中的一个特殊的写法，用前面的方法也能操作成功，还有就是只对form表单里面的元素有用。
html代码：
<form> <p><input type="button" value="Input Button"/></p> <p><input type="checkbox" /></p> <p><input type="file" /></p> <input type="hidden" /> <p><input type="image" /></p> <p><input type="password" /></p> <p><input type="radio" /></p> <p><input type="reset" /></p> <p><input type="submit" /></p> <p><input type="text" /></p> <p><select><option>Option</option></select></p> <textarea></textarea> <p><button>Button</button></p> </form>
JQuery代码：
console.log($(":input")); //匹配所有 input, textarea, select 和 button 元素 console.log($(":text")); //匹配所有的单行文本框 console.log($(":password")); //匹配所有密码框 console.log($(":radio")); //匹配所有单选按钮 console.log($(":checkbox")); //匹配所有复选框 console.log($(":submit")); //匹配所有提交按钮 注意一下 submit和button都是 console.log($(":image")); //匹配所有图像域 console.log($(":reset")); //匹配所有重置按钮 console.log($(":button"));//匹配所有按钮 注意一下 submit和button都是 console.log($(":file"));//匹配所有文件域结果：
Jquery操作-（多种实例）--未完