当前位置:编程学习 > JAVA >>

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 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,