JQuery方法查询大全【重要】 - 小众知识
首页 - 编程开发 - 其他语言 - JavaScript

JQuery方法查询大全【重要】

2022-11-28 07:00:21 苏内容
  标签： JQuery
阅读：2554

From：https://www.cnblogs.com/zengjie123/p/4893546.html

jQuery 参考手册 - 选择器：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

选择器：https://www.runoob.com/jquery/jquery-ref-selectors.html

一、核心

$ 是 jquery 类的一个别名，$() 构造一个 jquery 对象，jQuery 的核心功能都是通过这个函数实现的。 jQuery 中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。

1、 $(表达式)

根据这个表达式来查找所有匹配的元素。

$("div>p");     查找所有p元素，且这些p元素都是div的子元素. 
$("input:radio", document.forms[0]);    查找文档第一个表单中，所有的单选按钮。 
$("div",xml.responseXML);   在一个由ajax返回的xml文档中，查找所有的div元素。 

注意：jQuery() 的第二个参数是 DOM 节点内容。如果没有指定那么 context 指向当前的文档 (document) 。 

2、$(html标记字符串)

根据提供的 html 字符串，创建 jquery 对象包装的dom元素。

$("<div><p>Hello</p></div>").appendTo("body");  
$("<input type='text'>");     创建一个 <input> 元素必须同时设定 type 属性

3、$(dom元素)

将一个或多个dom元素转换为 jquery 对象。

$(document.body).css( "background", "black" ); 设置页面背景色  
$(document).ready(function(){})==$(function(){})；在页面加载完成后自动执行的代码。

二、jquery 对象访问

返回的是 jquery 对象，只能使用 jquery 方法，get 返回的是 dom 元素对象，只能使用 dom 方法. 

  • 1、$(dom元素).each(function(){});  以每一个匹配的元素作为上下文来执行一个函数 
  • 2、$(dom元素).size()==$(dom元素).length;  对象中元素的个数。示例：<img src="test1.jpg"/> <img src="test2.jpg"/>，jquery代码：$("img").size(); 返回2 
  • 3、context：传给 jQuery() 的原始的 DOM 节点内容，即 jQuery() 的第二个参数。如果没有指定，那么 context 指向当前的文档 (document) 。 
  • 4、$(dom元素).get()：取得所有匹配的dom元素的集合。如果你想要直接操作 DOM 对象而不是 jQuery 对象，这个函数非常有用。 
  • 5、$(dom元素).get(index)：取得其中一个匹配的元素. 
  • 6、$(dom元素).index(): 搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。 

三、插件机制

1、jQuery.fn.extend(object);

扩展 jQuery 元素集来提供新的方法,针对某一个dom元素。 

jQuery.fn.extend({ 
    check: function() { return this.each(function() { this.checked = true; });}, 
    uncheck: function() { return this.each(function() { this.checked = false; });} 
}); 
调用： 
$("input[type=checkbox]").check(); 
$("input[type=radio]").uncheck(); 

2、$.extend(object);

用来在 jQuery 命名空间上增加新函数,针对所有dom元素。 

$.extend({ 
    min:function(a,b){return a<b?a:b;}, 
    max:function(a,b){return a>b?a;b;} 
}); 
调用：$.max(10,20); 

四、选择器 

基本 选择器：

$("#id")            //ID选择器, 根据给定的ID匹配一个元素
$("div")            //元素选择器, 选择所有div
$(".classname")     //类选择器, 根据给定的类匹配元素。 
$("*")              //匹配所有元素。
$(".classname,.classname1,#id1")   //组合选择器

层次 选择器：

$("ancestor descendant"):在给定的祖先元素下匹配所有的后代元素 
$("parent > child"):在给定的父元素下匹配所有的子元素 
$("prev + next"):匹配所有紧接在 prev 元素后的 next 元素 
$("prev ~ siblings"):匹配 prev 元素之后的所有 siblings(同级) 元素

$("#id>.classname ")     // 子元素选择器
$("#id .classname ")     // 后代元素选择器
$("#id + .classname ")   // 紧邻下一个元素选择器
$("#id ~ .classname ")   // 兄弟元素选择器

过滤 选择器(重点)：

$("li:first")        // 第一个li
$("li:last")         // 最后一个li
$("li:even")         // 挑选下标为偶数的li
$("li:odd")          // 挑选下标为奇数的li
$("li:eq(4)")        // 下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")        // 下标大于 2 的li
$("li:lt(2)")        // 下标小于 2 的li
$("li:not(#runoob)") // 挑选除 id="runoob" 以外的所有li

内容 过滤 选择器：

$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 // 不包含子元素或者文本的空元素
$("div:has(p)")               // 匹配所有包含 p 元素的 div 元素 
$("td:parent")                //含有子元素或者文本的元素

可见性 过滤 选择器：

$("tr:visible") 查找所有可见的 tr 元素 
$("tr:hidden") 匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到 

属性 过滤 选择器：

$("div[id]") 查找所有含有 id 属性的 div 元素 
$("input[name='newsletter']") 查找所有 name 属性是 newsletter 的 input 元素 
$("input[name!='newsletter']") 查找所有 name 属性不是 newsletter 的 input 元素 
$("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素 
$("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素 
$("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素 
$("input[id][name$='man']") 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 

$("div[id]")          // 所有含有 id 属性的 div 元素
$("div[id='123']")    // id属性值为123的div 元素
$("div[id!='123']")   // id属性值不等于123的div 元素
$("div[id^='qq']")    // id属性值以qq开头的div 元素
$("div[id$='zz']")    // id属性值以zz结尾的div 元素
$("div[id*='bb']")    // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素

状态 过滤 选择器：

$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option

子元素： 

匹配其父元素下的第N个子或奇偶元素 
:nth-child(even)   偶数元素
:nth-child(odd)     奇数元素
:nth-child(3n)     
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2) 

$("ul li:first-child")  在每个 ul 中查找第一个 li 
$("ul li:last-child")   在每个 ul 中查找最后一个 li 
$("ul li:only-child")   在 ul 中查找是唯一子元素的 li

表单 选择器：

$(":input")    查找所有的input元素 
$("text")      匹配所有的单行文本框, 等价于 $("[type=text]")

推荐使用 $("input:text") 效率更高，下同

$(":password") 匹配所有密码框 
$("radio")     匹配所有单选按钮 
$("checkbox")  匹配所有复选框 
$("submit")    匹配所有提交按钮 
$("image")     匹配所有图像域 
$("button")    匹配所有按钮 
$("file")      匹配所有文件域 
$("hidden")    匹配所有不可见元素，或者type为hidden的元素 

表单 对象 属性

$("input:checked")  匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) 
$("input:enabled")  匹配所有可用元素 
$("input:disabled") 匹配所有不可用元素 
$("select option:selected") 匹配所有选中的option元素 

jQuery 常用的元素查找方法总结

  1. $("#myELement")    选择id值等于myElement的元素
  2. $("div")           选择所有的div标签元素，返回div元素数组
  3. $(".myClass")      选择使用myClass类的css的所有元素
  4. $("*")             选择文档中的所有的元素，
  5. 可以运用多种的选择方式进行联合选择：
  6. 例如 $("#myELement,div,.myclass")
  7. $("A B")    查找A元素下面的所有子节点，包括非直接子节点
  8. $("A>B")    查找A元素下面的直接子节点
  9. $("A+B")    查找A元素后面的兄弟节点，包括非直接子节点
  10. $("A~B")    查找A元素后面的兄弟节点，不包括非直接子节点
  12. 层叠选择器：
  13. $("form input")     选择所有的form元素中的input元素
  14. $("#main > *")      选择id值为main的所有的子元素
  15. $("label + input")  选择所有的label元素的下一个input元素节点，
  16. $("#prev ~ div")    同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
  18. 基本过滤选择器：
  19. $("tr:first")    选择所有tr元素的第一个
  20. $("tr:last")     选择所有tr元素的最后一个
  21. $("input:not(:checked) + span")  过滤掉：checked 的选择器的所有的input元素
  22. 		$("tr:even")     选择所有的tr元素的第0，2，4... ...个元素（注意：数组序号是从0开始）
  23. 		$("tr:odd")      选择所有的tr元素的第1，3，5... ...个元素
  24. 		$("td:eq(2)")    选择所有的td元素中序号为2的那个td元素
  25. 		$("td:gt(4)")    选择td元素中序号大于4的所有td元素
  26. 		$("td:ll(4)")    选择td元素中序号小于4的所有的td元素
  27. 		$(":header")
  28. 		$("div:animated")
  30. 内容过滤选择器：
  31. 		$("div:contains('John')") 选择所有div中含有John文本的元素
  32. 		$("td:empty")             选择所有的为空（也不包括文本节点）的td元素的数组
  33. 		$("div:has(p)")           选择所有含有p标签的div元素
  34. 		$("td:parent")            选择所有的以td为父节点的元素数组
  36. 可视化过滤选择器：
  37. 		$("div:hidden")     选择所有的被hidden的div元素
  38. 		$("div:visible")    选择所有的可视化的div元素
  40. 属性过滤选择器：
  41. $("div[id]")                    选择所有含有id属性的div元素
  42. $("input[name='newsletter']")   选择所有的name属性等于'newsletter'的input元素
  43. $("input[name!='newsletter']")  选择所有的name属性不等于'newsletter'的input元素
  44. $("input[name^='news']")        选择所有的name属性以'news'开头的input元素
  45. $("input[name$='news']")        选择所有的name属性以'news'结尾的input元素
  46. $("input[name*='man']")         选择所有的name属性包含'news'的input元素
  47. $("input[id][name$='man']")     可以使用多个属性进行联合选择
  48. 该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
  50. 子元素过滤选择器：
  51. $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
  52. $("div span:first-child")        返回所有的div元素的第一个子节点的数组
  53. $("div span:last-child")         返回所有的div元素的最后一个节点的数组
  54. $("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组
  56. 表单元素选择器：
  57. $(":input")       选择所有的表单输入元素，包括input, textarea, select 和 button
  58. $(":text")        选择所有的text input元素
  59. $(":password")    选择所有的password input元素
  60. $(":radio")       选择所有的radio input元素
  61. $(":checkbox")    选择所有的checkbox input元素
  62. $(":submit")      选择所有的submit input元素
  63. $(":image")       选择所有的image input元素
  64. $(":reset")       选择所有的reset input元素
  65. $(":button")      选择所有的button input元素
  66. $(":file")        选择所有的file input元素
  67. $(":hidden")      选择所有类型为hidden的input元素或表单的隐藏域
  69. 表单元素过滤选择器：
  70. $(":enabled")     选择所有的可操作的表单元素
  71. $(":disabled")    选择所有的不可操作的表单元素
  72. $(":checked")     选择所有的被checked的表单元素
  73. $("select option:selected") 选择所有的select 的子元素中被selected的元素
  75. 		选取一个name 为 S_03_22 的 input text框的上一个td的text值
  76. 		$("input[@name =S_03_22]").parent().prev().text()
  78. 		名字以 S_ 开始，并且不是以 _R 结尾的
  79. 		$("input[@name ^='S_']").not("[@name $='_R']")
  81. 		一个名为 radio_01 的 radio 所选的值
  82. 		$("input[@name =radio_01][@checked]").val();

jQuery 快速查询大全

  1. 常用的选择器：
  2. #id              根据给定的id匹配
  3. .classname       根据给定的类名匹配
  4. name             根据给定的元素名匹配
  5. *                匹配所有的元素
  6. select1,select2  将每一个匹配到的元素合并后一起返回
  7. s1 s2            选取s1元素里所有的s2元素 子孙
  8. parent>child     获取parent元素下的child元素 儿子
  9. prev+next        选取紧接在prev元素后的next元素
  10. prev~siblings    选取prev之后所有的siblings元素
  12. 常用的过滤选择器：
  13. :first         选取第一个元素
  14. :last          选取最后一个元素
  15. :not(selector) 去除所有与给定选择器匹配的元素
  16. :even          选取索引值为偶数的元素，从0开始
  17. :odd           选取索引值为奇数的元素
  18. :eq(index)   匹配一个给定索引值的元素
  19. :gt(index)   匹配大于给定索引值的元素
  20. :lt(index)   匹配小于给定索引值的元素
  21. :header        选择h1，h2....一类的标签
  22. :animated      匹配正执行动画效果的元素
  24. 常用的内容过滤选择器：
  25. :contains(text) 匹配包含给定文本的元素
  26. :empty          匹配所有不包含子元素或者文本的空元素
  27. :has(selector)  匹配含有选择器所匹配元素的元素
  28. :parent         选取含有子元素或文本的元素
  29. :hidden         选取所有不可见元素
  30. :visible        选取所有可见元素
  32. 常用的属性过滤选择器(跟在元素后面用，过滤器)：
  33. [attr]            选取拥有此属性的元素
  34. [arrt=val]        属性等于val
  35. [arrt!=val]       属性不等于val
  36. [arrt^=val]       属性以val开始的
  37. [arrt$=val]       属性以val结束的
  38. [arrt*=val]       属性包含val的
  39. [arrt~=val]       属性包含val且以空格隔开
  40. [attr1][attr2]... 多个属性选择器合并成一个复合属性选择器
  42. 常用的表单选择器(直接使用)：
  43. :input 选取所有<input>、<textarea>、<select>、<button>元素
  44. :text 选取所有的单行文本框
  45. :password 选取所有的密码框
  46. :radio 选取所有的单选按钮
  47. :checkbox 选取所有的复选框
  48. :submit 选取所有的提交按钮
  49. :image 选取所有的图像按钮
  50. :reset 选取所有的重置按钮
  51. :button 选取所有的按钮
  52. :file 选取所有的上传域
  54. 常用的表单对象属性过滤选择器：
  55. :disabled 选取所有不可用元素
  56. :enabled 选取所有可用元素
  57. :checked 选取所有被选中的元素
  58. :selected 选取所有被选中的选项元素
  60. 管理选择器得到的结果：
  61. size()            获取选择器中元素的个数
  62. index(element)    查找元素在集合中的位置
  63. add()             给集合添加元素
  64. not()             去除元素集合中的某个元素
  65. filter()          筛选去除元素集合中的元素获得新集合
  66. find()            通过查询获取新的元素集合
  67. each()            对选择器中的元素进行遍历
  68. end()             回到操作对象的上一个对象
  69. andself()         将前面的对象进行组合后共同处理
  71. 创建元素节点：
  72. 用 $() 来创建节点
  73. var $node = $('<p title="hello">hello</p>');
  75. 插入元素节点：
  76. append()     向每个匹配的元素内部追加子元素内容 appendTo()
  77. prepend()    向每个匹配的元素内容前置子元素内容 prependTo()
  78. after()      在每个匹配元素后插入同辈内容 insertAfter()
  79. before()     在每个匹配元素之前插入内容 insertbefore()
  81. 删除元素节点：
  82. remove()
  83. var $remove_li = $("ul li:eq(1)").remove( ); 删除ul第2个li，返回被删除的li对象
  84. $("ul li").remove("li[ title='a']"); 通过参数来选择性删除
  86. detach()
  87. var $remove_li =$("ul li:eq(1)").detach( ); 和remove类似，但绑定的事件、附加的数据会保留下来
  89. empty()
  90. $("ul li:eq(1)").remove( ); 清空所选元素中所有的后代元素内容
  92. 复制元素节点：
  93. clone()
  94. $("li:eq(1)").clone(true).appendTo("ul");
  95. 	复制第二个li元素插入到ul中，并传递了一个参数true代表复制元素同时复制元素中绑定的事件。
  97. 替换元素节点：
  98. replaceWith()
  99. $("li:eq(1)").replaceWith("<li>c</li>"); 替换掉第二个li元素
  100. replaceAll() 和 replaceWith() 颠倒语法
  102. 包裹元素节点：
  103. wrap()         用参数标签把外面的标签包裹起来
  104. $("li").wrap(<i></i>);
  105. wrapAll()      用参数标签把多个标签整体包裹起来，如其中有其他标签则放到包裹元素后
  106. wrapInner()    把匹配到元素内部的内容用参数标签包裹起来
  108. 节点属性操作：
  109. attr()          获取前面元素的参数中的属性，参数可以 kv 对用来设置属性
  110. removeAttr()    删除属性
  112. 节点样式操作：
  113. addClass()       追加参数中的类选择器，不同会叠加，相同会覆盖
  114. removeClass()    删除类选择器
  115. toggleClass()    重复切换参数中的类选择器，有就去除，没有就使用
  116. hasClass()       判断是否含有参数中的类选择器样式，返回boolean值
  118. 设置获取值：
  119. html()    设置内容会解析html语句，无参数时获取
  120. text()    设置内容不会解析语句，无参数时获取
  121. val()
  122. 	设置input元素value值，下拉框选中项，
  123. 	下拉列表多选项(需要用[]括起来，逗号分开多个值)，
  124. 	复选框选中项，
  125. 	单选框选中项，
  126. 	无参数时获取
  128. 遍历节点操作：
  129. children()    取得匹配元素的子元素集合
  130. next()        取得后面紧邻的同辈元素
  131. prev()        取得前面紧邻的同辈元素
  132. parent()      取得匹配元素的父级元素
  133. parents()     取得匹配元素的先辈元素的集合
  134. siblings()    取得匹配元素前后所有的同辈元素
  135. closest()     取得最近的匹配元素，先取自身如果自身不存在，则向父元素取最近的一个先辈
  137. CSS-DOM技术：
  139. $("p").css({"color":"#ff0000", "background":"blue"});  不加参数是获取css，加参数是修改css
  141.    scrollTop() 和 scrollLeft()  设置相对滚动条顶部和左侧的偏移
  142. 	
  143.    offset()    获取和设置元素在当前视窗的相对偏移
  144.                $("#dv").offset({top:10, left:30})；
  145.                var $offset = $("#dv").offset();
  146. $("#dv").html("left:" + $offset.left + ",top:" + $offset.top);
  147. 				
  148. position()  获取匹配元素相对父元素的偏移

五、属性操作

操作属性： 

$("img").attr("src"); 返回文档中第一个图像的src属性值。 
$("img").attr("src","test.jpg"); 为所有匹配的元素设置一个属性值 
$("img").attr("title", function() { return this.src }); 为所有匹配的元素设置一个计算的属性值 
$("img").removeAttr("src"); 从每一个匹配的元素中删除一个属性 
$("img").attr({ src: "test.jpg", alt: "Test Image" }); 将一个“名/值”形式的对象设置为所有匹配元素的属性。

操作 CSS

$("p").addClass("selected");    为每个匹配的元素添加指定的类名 
$("p").removeClass("selected"); 从所有匹配的元素中删除全部或者指定的类。一个或多个要删除的CSS类名，请用空格分开 
$("p").removeClass();           删除匹配元素的所有类 
$("p").toggleClass("selected"); 如果存在（不存在）就删除（添加）一个类 

var count = 0; 
$("p").click(function(){ 
    $(this).toggleClass("highlight", count++ % 3 == 0); 
});  //每点击三下加上一次 'selected' 类 

HTML代码: 

$("div").html();    取得第一个匹配元素的html内容 
$("div").html("<p>Hello Again</p>");    设置每一个匹配元素的html内容 

文本： 

$("p").text();    取得所有匹配元素的内容 
$("p").text("<b>Some</b> new text.");    设置所有匹配元素的文本内容 

值：

$("#single").val()    获得第一个匹配元素的当前值。 
$("input").val("hello world!");    设置每一个匹配元素的值 

六、筛选 

过滤： 

   1、$("p").eq(1) 获取第N个元素，这个元素的位置是从0算起 
   2、 if ( $(this).hasClass("protected") ) 检查当前的元素是否含有某个特定的类，如果有，则返回true。 
   3、$("p").filter(".selected") 筛选出与指定表达式匹配的元素集合 
   4、is(expr) 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。 
   5、$("p").not( $("#selected")[0] ) 删除与指定表达式匹配的元素 

查找：

   1、$("div").children();取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。 
   2、$("p").find("span");搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 
   3、$("p").next();取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合 
   4、$("p").prev();取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 
   5、$("div").parent;取得一个包含着所有匹配元素的唯一父元素的元素集合。 
   6、$("span").parents;找到每个span元素的所有祖先元素 
   7、$("div").siblings();取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合 

七、文档处理

内部插入： 

        1、$("p").append("<b>Hello</b>"); 向每个匹配的元素内部尾部追加内容 
        2、$("p").prepend("<b>Hello</b>"); 向每个匹配的元素内部前部追加内容 
        2、$("p").appendTo("#foo"); 把所有段落追加到ID值为foo的元素中。 

外部插入： 

        1、$("p").after("<b>Hello</b>"); 在每个匹配的元素之后插入内容 
        2、$("p").before("<b>Hello</b>"); 在每个匹配的元素之前插入内容 

包裹 

        1、$("p").wrap("<div class='wrap'></div>"); 把所有匹配的元素用其他元素的结构化标记包裹起来。 

替换： 

        1、$("p").replaceWith("<b>Paragraph. </b>"); 将所有匹配的元素替换成指定的HTML或DOM元素。 

删除： 

        1、$("p").empty(); 删除匹配的元素集合中所有的子节点。 
        2、$("p").remove(); 从DOM中删除所有匹配的元素 

八、CSS 操作 

CSS: 

        1、$("p").css("color"); 取得第一个段落的color样式属性的值 
        2、$("p").css({ color: "#ff0011", background: "blue" }); 把一个“名/值对”对象设置为所有匹配元素的样式属性。 
        3、$("p").css("color","red"); 在所有匹配的元素中，设置一个样式属性的值 

位置： 

        1、var offset = p.offset();获取匹配元素在当前视口的相对偏移，返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。 
        2、var position = p.position();获取匹配元素相对父元素的偏移 

尺寸： 

        1、$("p").height(); 取得第一个匹配元素当前计算的高度值（px）。 
        2、$("p").height(20); 为每个匹配的元素设置CSS高度(hidth)属性的值 
        3、$("p").width(); 取得第一个匹配元素当前计算的宽度值（px）。$(window).width(); 获取当前窗口的宽 
        4、$("p").width(20); 为每个匹配的元素设置CSS宽度(width)属性的值 

九、效果 

基本： 

1、$("p").show() 显示隐藏的匹配元素 
2、$("p").hide() 隐藏显示的元素 
3、$("p").show("slow"); 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。 
speed(String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) 
callback (Function)  : (Optional) 在动画完成时执行的函数，每个元素执行一次。

示例：用迅速的动画将隐藏的段落显示出来，历时200毫秒。并在之后执行反馈！ 

  1. <p style="display: none">Hello</p>
  2. //jQuery 代码:
  3. $("p").show("fast",function(){
  4. $(this).text("Animation Done!");
  5. });

4、$("p").hide("slow"); 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。 
5、$("p").toggle() 切换元素的可见状态 
6、$("p").toggle("slow"); 以优雅的动画切换所有匹配的元素，并在显示完成后可选地触发一个回调函数 

淡入淡出: 

1、$("p").fadeIn("slow"); 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数 
2、$("p").fadeOut("slow"); 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。 
3、$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66); 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数 

自定义： 
1、$("#block").animate({ 
    width: "90%", 
    height: "100%", 
    fontSize: "20em", 
    borderWidth: 10 
}, 1000 );    用于创建自定义动画的函数。

十、事件

事件处理： 

1、$("p").bind("click", function(){ alert( $(this).text() );}); 为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数 
2、$("p").one("click",function(){alert(${this}.text());}) 当所有段落被第一次点击的时候，显示所有其文本 
3、trigger(type,[data])在每一个匹配的元素上触发某类事件 

事件委派

$("p").live("click", function(){$(this).after("<p>Another paragraph!</p>");}); 
给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。
也能绑定自定义事件。与bind()不同的是，live()一次只能绑定一个事件 

事件切换:

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法 
$("td").hover( 
function () { 
    $(this).addClass("hover"); 
}, 
function () { 
    $(this).removeClass("hover"); 
} 
); 鼠标悬停的表格加上特定的类 

每次点击后依次调用函数。 
$("td").toggle( 
function () { 
    $(this).addClass("selected"); 
}, 
function () { 
   $(this).removeClass("selected"); 
} 
);

事件 示例

$("p").blur(); 触发每一个匹配元素的blur事件 
$("p").blur( function () { alert("Hello World!"); } ); 在每一个匹配元素的blur事件中绑定一个处理函数 
change()；change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触 
change(fn);在每一个匹配元素的change事件中绑定一个处理函数。 
$("p").click(); 触发每一个匹配元素的click事件 
$("p").click(function(){});在每一个匹配元素的click事件中绑定一个处理函数 
dblclick()；dblclick事件会在元素的同一点双击时触发。 
$("p").dblclick( function () { alert("Hello World!"); }); 在每一个匹配元素的dblclick事件中绑定一个处理函数。 
$(document).ready(function(){ $("#login").focus();}); 触发每一个匹配元素的focus事件。 
$("input[type=text]").focus(function(){this.blur();}); 在每一个匹配元素的focus事件中绑定一个处理函数。 
keydown()；keydown事件会在键盘按下时触发。 
keydown(fn)；在每一个匹配元素的keydown事件中绑定一个处理函数。 
keypress()；触发每一个匹配元素的keypress事件 
keypress(fn)；在每一个匹配元素的keypress事件中绑定一个处理函数。 
keyup()；触发每一个匹配元素的keyup事件 
keyup(fn)；在每一个匹配元素的keyup事件中绑定一个处理函数。 
mousedown(); 
mouseup(); 
mousemove(); 
mouseover(); 
mouseout(); 
$("form:first").submit();提交本页的第一个表单。 
$("form").submit(function(){return false;});阻止页面提交。

十一、ajax 

ajax 请求

1、通用方式：

    $.ajax(prop); prop是一个hash表，它可以传递的key/value有以下几种: 
    (String)type：数据传递方式(get或post)。 
    ((String)url：数据请求页面的url 
    ((String)data：传递数据的参数字符串，只适合post方式 
    ((String)dataType：期待数据返回的数据格式(例如 "xml", "html", "script",或 "json") 
    ((Boolean)ifModified： 当最后一次请求的相应有变化是才成功返回，默认值是false 
    ((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout 
    ((Boolean)global：是否为当前请求触发ajax全局事件，默认为true 
    ((Function)error：当请求失败时触发的函数。 
    ((Function)success：当请求成功时触发函数 
    ((Function)complete：当请求完成后出发函数 

2、$.get(url, params, callback) 

    用 get 方式向远程页面传递参数，请求完成后处理函数，除了url外，其它参数任意选择！ 
    $.get("ajax.asp", 
        {name:"young", age:"25"}, 
        function(data){ alert("Data Loaded: " + data); } 
    ) 

3、$.getJSON(url, params, callback)

        用 get 方式向远程 json 对象传递参数，请求完成后处理函数 callback 

4、$.post(url, params, callback)

        用 post 方式向远程页面传递参数，请求完成后处理函数 callback 

十二、工具类

数组 和 对象操作

1、$.each(obj,callback); 通用例遍方法，可用于例遍对象和数组。
    回调函数拥有两个参数：
        第一个为对象的成员或数组的索引，
        第二个为对应变量或内容。 
   $.each( [0,1,2], function(i, n){alert( "Item #" + i + ": " + n );}); 
2、jQuery.grep(array,callback,[invert])；使用过滤函数过滤数组元素，此函数至少传递两个参数：待过滤数组和过滤函数 
3、$.map(array,callback);将一个数组中的元素转换到另一个数组中 
4、$.inArray(value,array);确定第一个参数在数组中的位置(如果没有找到则返回 -1 ),从0开始。 
5、$.merge( [0,1,2], [2,3,4] ) 
    合并两个数组。返回的结果会修改第一个数组的内容，
    第一个数组的元素后面跟着第二个数组的元素，不去掉重复项。 
6、$.unique(array);删除数组中重复元素 
7、$.trim(" hello, how are you? "); 去掉字符串起始和结尾的空格 
8、$.isArray(obj);测试对象是否为数组。 
9、$.isFunction(obj); 测试对象是否为函数 

URL

1、$.param(obj); 将表单元素数组或者对象序列化。是.serialize()的核心方法。 
    var params = { width:1680, height:1050 }; var str = jQuery.param(params); 

2、$("form").serialize() ；序列表单内容为字符串，用于 Ajax 请求 

十三、jquery 操作 单选框 

    if($("input[type='radio']:checked")){ 
        var tt=$("input[name='chk']:checked").val(); 
    } 

十四、jquery 操作 复选框 

    var chkArr=""; 
    $(".cc:checked").each(function(){ 
           chkArr+=$(this).val()+"|"; 
    }); 

十五、jquery 实现 复选框 全选

    var checked=$("#allchk").attr("checked"); 
    $(".ww").each(function(){ 
       if($(this).attr("checked")!=checked){$(this).click();} 
    316});


扩展阅读
[JQuery] JQuery方法查询大全【重要】
[JQuery] jQuery中对动态添加的元素绑定事件
[JQuery] jquery中Json操作
[JQuery] jquery+javascript触发a标签的点击事件，模拟鼠标单击
相关阅读
autojs教学第二课--UI动态改变
autojs图片回收时img, bitmap和mat三者的关系
JQuery方法查询大全【重要】
jQuery中对动态添加的元素绑定事件
Does xmlhttprequest keep connection open after request has been processed?
fetch API中的request.mode有什么意义
JavaScript Fetch API Tutorial with JS Fetch Post and Header Examples
jquery中Json操作
用 js 的 selection range 操作选择区域内容和图片
Chrome插件消息传递实例


© CopyRight 2010-2021, PREDREAM.ORG, Inc.All Rights Reserved. 京ICP备13045924号-1