JQuery方法查询
1一、核心:$是jquery类的一个别名,$()构造一个jquery对象,jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。
21、 ${表达式}:根据这个表达式来查找所有匹配的元素。
3 eg:$("div>p"); 查找所有p元素,且这些p元素都是div的子元素.
4 $("input:radio",document.forms[0]); 查找文档第一个表单中,所有的单选按钮。
5 $("div",xml.responseXML);在一个由ajax返回的xml文档中,查找所有的div元素。
62、$(html标记字符串) :根据提供的html字符串,创建jquery对象包装的dom元素。
7 eg: $("<div><p>Hello</p></div>").appendTo("body");
8 创建一个 <input> 元素必须同时设定 type 属性
9 $("<input type='text'>")
10
113、$(dom元素):将一个或多个dom元素转换为jquery对象。
12 eg: $(document.body).css( "background", "black" ); 设置页面背景色
134、$(document).ready(function(){})==$(function(){});在页面加载完成后自动执行的代码。
14
15二、jquery对象访问。eq返回的是jquery对象,只能使用jquery方法,get返回的是dom元素对象,只能使用dom方法.
16 1、$(dom元素).each(function(){}):以每一个匹配的元素作为上下文来执行一个函数
17 2、$(dom元素).size()==$(dom元素).length;对象中元素的个数。eg:<img src="test1.jpg"/> <img src="test2.jpg"/>,jquery代码:$("img").size(); 返回2
18 3、context:返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没有指定,那么context指向当前的文档(document)。
19 4、$(dom元素).get():取得所有匹配的dom元素的集合。如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。
20 5、$(dom元素).get(index):取得其中一个匹配的元素.
21 6、$(dom元素).index():搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。
22
23三、插件机制:
241、jQuery.fn.extend(object);扩展 jQuery 元素集来提供新的方法,针对某一个dom元素。
25 eg:jQuery.fn.extend({
26 check: function() { return this.each(function() { this.checked = true; });},
27 uncheck: function() { return this.each(function() { this.checked = false; });}
28 });
29 调用:
30 $("input[type=checkbox]").check();
31 $("input[type=radio]").uncheck();
32
332、$.extend(object);用来在jQuery命名空间上增加新函数,针对所有dom元素。
34 $.extend({
35 min:function(a,b){return a<b?a:b;},
36 max:function(a,b){return a>b?a;b;}
37 });
38 调用:$.max(10,20);
39
40四、选择器
41基本:
42 1、$("#id"): 根据给定的ID匹配一个元素。
43 2、$("dom元素名"):根据给定的元素名匹配所有元素
44 3、$(".Class类名"): 根据给定的类匹配元素。
45 4、$("*") :匹配所有元素。
46 5、$("dom元素.class类名"):选择所有class属性为指定类名的dom元素。
47 6、$(".stripe tr"): 获取class属性为stripe的table元素下的所有行
48
49层级:
50 1、$("ancestor descendant"):在给定的祖先元素下匹配所有的后代元素
51 2、$("parent > child"):在给定的父元素下匹配所有的子元素
52 3、$("prev + next"):匹配所有紧接在 prev 元素后的 next 元素
53 4、$("prev ~ siblings"):匹配 prev 元素之后的所有 siblings(同级) 元素
54
55简单:
561、$("tr:first") 匹配找到的第一个元素
572、$("tr:last") 匹配找到的最后一个元素
583、$("input:not(:checked)") 去除所有与给定选择器匹配的元素
594、$("tr:even") 匹配所有索引值为偶数的元素,从 0 开始计数
605、$("tr:odd") 匹配所有索引值为奇数的元素,从 0 开始计数
616、$("tr:eq(1)") 匹配一个给定索引值的元素
627、$("tr:gt(0)") 匹配所有大于给定索引值的元素
638、$("tr:lt(2)") 匹配所有小于给定索引值的元素
64内容:
651、$("div:contains('John')") 匹配包含给定文本的元素
662、$("div:has(p)") 匹配所有包含 p 元素的 div 元素
673、$("td:empty") 查找所有不包含子元素或者文本的空元素
68
69可见性:
701、$("tr:visible") 查找所有可见的 tr 元素
712、$("tr:hidden") 匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到
72属性:
731、$("div[id]") 查找所有含有 id 属性的 div 元素
742、$("input[name='newsletter']") 查找所有 name 属性是 newsletter 的 input 元素
753、$("input[name!='newsletter']") 查找所有 name 属性不是 newsletter 的 input 元素
764、$("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素
775、$("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素
786、$("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素
797、$("input[id][name$='man']") 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的
80子元素:
811、nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2) 匹配其父元素下的第N个子或奇偶元素
822、$("ul li:first-child") 在每个 ul 中查找第一个 li
833、$("ul li:last-child") 在每个 ul 中查找最后一个 li
844、$("ul li:only-child") 在 ul 中查找是唯一子元素的 li
85表单:
861、$(":input") 查找所有的input元素
872、$("text") 匹配所有的单行文本框
883、$(":password") 匹配所有密码框
894、$("radio") 匹配所有单选按钮
905、$("checkbox") 匹配所有复选框
916、$("submit") 匹配所有提交按钮
927、$("image") 匹配所有图像域
938、$("button") 匹配所有按钮
949、$("file") 匹配所有文件域
9510、$("hidden") 匹配所有不可见元素,或者type为hidden的元素
96表单对象属性:
971、$("input:checked") 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
982、$("input:enabled") 匹配所有可用元素
993、$("input:disabled") 匹配所有不可用元素
1004、$("select option:selected") 匹配所有选中的option元素
101
102
103五、属性操作
104 操作属性:
105 1、$("img").attr("src"); 返回文档中第一个图像的src属性值。
106 2、$("img").attr("src","test.jpg"); 为所有匹配的元素设置一个属性值
107 3、$("img").attr("title", function() { return this.src }); 为所有匹配的元素设置一个计算的属性值
108 4、$("img").removeAttr("src"); 从每一个匹配的元素中删除一个属
补充:web前端 , JavaScript ,