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 常用的元素查找方法总结

$("#myELement")    选择id值等于myElement的元素
$("div")           选择所有的div标签元素,返回div元素数组
$(".myClass")      选择使用myClass类的css的所有元素
$("*")             选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如 $("#myELement,div,.myclass")
$("A B")    查找A元素下面的所有子节点,包括非直接子节点
$("A>B")    查找A元素下面的直接子节点
$("A+B")    查找A元素后面的兄弟节点,包括非直接子节点
$("A~B")    查找A元素后面的兄弟节点,不包括非直接子节点层叠选择器:$("form input")     选择所有的form元素中的input元素$("#main > *")      选择id值为main的所有的子元素$("label + input")  选择所有的label元素的下一个input元素节点,$("#prev ~ div")    同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签基本过滤选择器:$("tr:first")    选择所有tr元素的第一个$("tr:last")     选择所有tr元素的最后一个$("input:not(:checked) + span")  过滤掉:checked 的选择器的所有的input元素$("tr:even")     选择所有的tr元素的第0,2,4... ...个元素(注意:数组序号是从0开始)$("tr:odd")      选择所有的tr元素的第1,3,5... ...个元素$("td:eq(2)")    选择所有的td元素中序号为2的那个td元素$("td:gt(4)")    选择td元素中序号大于4的所有td元素$("td:ll(4)")    选择td元素中序号小于4的所有的td元素$(":header")$("div:animated")内容过滤选择器:$("div:contains('John')") 选择所有div中含有John文本的元素$("td:empty")             选择所有的为空(也不包括文本节点)的td元素的数组$("div:has(p)")           选择所有含有p标签的div元素$("td:parent")            选择所有的以td为父节点的元素数组可视化过滤选择器:$("div:hidden")     选择所有的被hidden的div元素$("div:visible")    选择所有的可视化的div元素属性过滤选择器:$("div[id]")                    选择所有含有id属性的div元素$("input[name='newsletter']")   选择所有的name属性等于'newsletter'的input元素$("input[name!='newsletter']")  选择所有的name属性不等于'newsletter'的input元素$("input[name^='news']")        选择所有的name属性以'news'开头的input元素$("input[name$='news']")        选择所有的name属性以'news'结尾的input元素$("input[name*='man']")         选择所有的name属性包含'news'的input元素$("input[id][name$='man']")     可以使用多个属性进行联合选择该选择器是得到所有的含有id属性并且那么属性以man结尾的元素子元素过滤选择器:$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")$("div span:first-child")        返回所有的div元素的第一个子节点的数组$("div span:last-child")         返回所有的div元素的最后一个节点的数组$("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组表单元素选择器:$(":input")       选择所有的表单输入元素,包括input, textarea, select 和 button$(":text")        选择所有的text input元素$(":password")    选择所有的password input元素$(":radio")       选择所有的radio input元素$(":checkbox")    选择所有的checkbox input元素$(":submit")      选择所有的submit input元素$(":image")       选择所有的image input元素$(":reset")       选择所有的reset input元素$(":button")      选择所有的button input元素$(":file")        选择所有的file input元素$(":hidden")      选择所有类型为hidden的input元素或表单的隐藏域表单元素过滤选择器:$(":enabled")     选择所有的可操作的表单元素$(":disabled")    选择所有的不可操作的表单元素$(":checked")     选择所有的被checked的表单元素$("select option:selected") 选择所有的select 的子元素中被selected的元素选取一个name 为 S_03_22 的 input text框的上一个td的text值$("input[@name =S_03_22]").parent().prev().text()名字以 S_ 开始,并且不是以 _R 结尾的$("input[@name ^='S_']").not("[@name $='_R']")一个名为 radio_01 的 radio 所选的值$("input[@name =radio_01][@checked]").val();

jQuery 快速查询大全

常用的选择器:#id              根据给定的id匹配.classname       根据给定的类名匹配name             根据给定的元素名匹配   *                匹配所有的元素select1,select2  将每一个匹配到的元素合并后一起返回s1 s2            选取s1元素里所有的s2元素 子孙parent>child     获取parent元素下的child元素 儿子prev+next        选取紧接在prev元素后的next元素prev~siblings    选取prev之后所有的siblings元素常用的过滤选择器::first         选取第一个元素:last          选取最后一个元素:not(selector) 去除所有与给定选择器匹配的元素:even          选取索引值为偶数的元素,从0开始:odd           选取索引值为奇数的元素:eq(index)   匹配一个给定索引值的元素:gt(index)   匹配大于给定索引值的元素:lt(index)   匹配小于给定索引值的元素:header        选择h1,h2....一类的标签:animated      匹配正执行动画效果的元素常用的内容过滤选择器::contains(text) 匹配包含给定文本的元素:empty          匹配所有不包含子元素或者文本的空元素:has(selector)  匹配含有选择器所匹配元素的元素:parent         选取含有子元素或文本的元素:hidden         选取所有不可见元素:visible        选取所有可见元素常用的属性过滤选择器(跟在元素后面用,过滤器):[attr]            选取拥有此属性的元素[arrt=val]        属性等于val    [arrt!=val]       属性不等于val [arrt^=val]       属性以val开始的[arrt$=val]       属性以val结束的 [arrt*=val]       属性包含val的 [arrt~=val]       属性包含val且以空格隔开[attr1][attr2]... 多个属性选择器合并成一个复合属性选择器常用的表单选择器(直接使用)::input 选取所有<input>、<textarea>、<select>、<button>元素:text 选取所有的单行文本框:password 选取所有的密码框:radio 选取所有的单选按钮:checkbox 选取所有的复选框:submit 选取所有的提交按钮:image 选取所有的图像按钮:reset 选取所有的重置按钮:button 选取所有的按钮:file 选取所有的上传域常用的表单对象属性过滤选择器::disabled 选取所有不可用元素:enabled 选取所有可用元素:checked 选取所有被选中的元素:selected 选取所有被选中的选项元素管理选择器得到的结果:size()            获取选择器中元素的个数index(element)    查找元素在集合中的位置add()             给集合添加元素not()             去除元素集合中的某个元素filter()          筛选去除元素集合中的元素获得新集合find()            通过查询获取新的元素集合each()            对选择器中的元素进行遍历end()             回到操作对象的上一个对象andself()         将前面的对象进行组合后共同处理创建元素节点:用 $() 来创建节点var $node = $('<p title="hello">hello</p>');插入元素节点:append()     向每个匹配的元素内部追加子元素内容 appendTo()prepend()    向每个匹配的元素内容前置子元素内容 prependTo()after()      在每个匹配元素后插入同辈内容 insertAfter()before()     在每个匹配元素之前插入内容 insertbefore()删除元素节点:remove()var $remove_li = $("ul li:eq(1)").remove( ); 删除ul第2个li,返回被删除的li对象$("ul li").remove("li[ title='a']"); 通过参数来选择性删除detach()var $remove_li =$("ul li:eq(1)").detach( ); 和remove类似,但绑定的事件、附加的数据会保留下来empty()$("ul li:eq(1)").remove( ); 清空所选元素中所有的后代元素内容复制元素节点:clone()$("li:eq(1)").clone(true).appendTo("ul");复制第二个li元素插入到ul中,并传递了一个参数true代表复制元素同时复制元素中绑定的事件。替换元素节点:replaceWith()$("li:eq(1)").replaceWith("<li>c</li>"); 替换掉第二个li元素replaceAll() 和 replaceWith() 颠倒语法包裹元素节点:wrap()         用参数标签把外面的标签包裹起来$("li").wrap(<i></i>);wrapAll()      用参数标签把多个标签整体包裹起来,如其中有其他标签则放到包裹元素后wrapInner()    把匹配到元素内部的内容用参数标签包裹起来节点属性操作:attr()          获取前面元素的参数中的属性,参数可以 kv 对用来设置属性removeAttr()    删除属性节点样式操作:addClass()       追加参数中的类选择器,不同会叠加,相同会覆盖removeClass()    删除类选择器toggleClass()    重复切换参数中的类选择器,有就去除,没有就使用hasClass()       判断是否含有参数中的类选择器样式,返回boolean值设置获取值:html()    设置内容会解析html语句,无参数时获取text()    设置内容不会解析语句,无参数时获取val() 设置input元素value值,下拉框选中项,下拉列表多选项(需要用[]括起来,逗号分开多个值),复选框选中项,单选框选中项,无参数时获取遍历节点操作:children()    取得匹配元素的子元素集合next()        取得后面紧邻的同辈元素prev()        取得前面紧邻的同辈元素parent()      取得匹配元素的父级元素parents()     取得匹配元素的先辈元素的集合siblings()    取得匹配元素前后所有的同辈元素closest()     取得最近的匹配元素,先取自身如果自身不存在,则向父元素取最近的一个先辈CSS-DOM技术:$("p").css({"color":"#ff0000", "background":"blue"});  不加参数是获取css,加参数是修改cssscrollTop() 和 scrollLeft()  设置相对滚动条顶部和左侧的偏移offset()    获取和设置元素在当前视窗的相对偏移$("#dv").offset({top:10, left:30});var $offset = $("#dv").offset();$("#dv").html("left:" + $offset.left + ",top:" + $offset.top);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毫秒。并在之后执行反馈!

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

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 方法查询大全相关推荐

  1. mongodb查询大全mongo语句

    mongodb查询大全mongo语句 一.前言 虽然这些语句在开发当中不会使用,因为springdataMongoDB封装的非常完美了.但是这里的语句思想和关系型数据库有些区别,所以需要拿出来详细的讲 ...

  2. 使用hibernate的this.getSession().createSQLQuery(sql).list();方法查询数据时出现查到的数据和想象的不一致,很是郁闷,诡异...

    今天 使用hibernate的this.getSession().createSQLQuery(sql).list();方法查询数据时出现查到的数据和想象的不一致的问题,郁闷我很长一段时间 执行的方法 ...

  3. 扩展方法where方法查询不到数据,不会抛异常,也不是返回的null

    如题,"扩展方法where方法查询不到数据,不会抛异常,也不是返回的null",示例代码如下: Product类: public class Product{private str ...

  4. JavaScript事件与jQuery方法

    JavaScript中的事件 jQuery中的方法 两者关系 大多数DOM事件都有一个等效的jQuery方法 注意,是大多数,不是全部 JavaScript 使用的是页面元素的事件 直接在页面的元素中 ...

  5. jquery方法.serializeArray()获取name和value并转为json数组

    jquery的.serializeArray()方法可以获取形如以下 [ {name: 'firstname', value: 'Hello'}, {name: 'lastname', value: ...

  6. click js自动点击 vue_vue.js2.0点击获取自己的属性和jquery方法

    如下所示: :data-index="index" :dt="index" v-on:click="onclick($event,index)&quo ...

  7. 增强优化JavaScript性能的方法 - 技巧大全

    一.优化页面加载时间 在修改JavaScript代码提升网页或应用程序的性能之前,我们先了解一下客户端与JavaScript代码之间的交互处理: JavaScript代码通过HTML的<scri ...

  8. Spring Data Jpa的JpaRepository的getOne()方法查询数据实体时报错could not initialize proxy

    问题描述:在使用Spring Data Jpa的JpaRepository的getOne()方法查询数据实体时报以下错误: org.hibernate.LazyInitializationExcept ...

  9. 扩展Jquery方法创建LigerUI Grid

    ///** //*封装jquery get请求ajax //*author:叶明龙 //*time:2012-12-10 //*/ function getAjax(url, para, fn) {i ...

最新文章

  1. org.springframework.dao.InvalidDataAccessApiUsageException: Write operations are not allowed in r...
  2. 插入排序算法(基于Java实现)
  3. java的知识点17——java.util.Arrays类、多维数组
  4. python列表转字节_如何在Python中将十进制数转换为字节列表
  5. 全排列函数(next_permutation)
  6. JAVA基础--IO输入输出(File使用)17
  7. windows 搭建kms服务器激活_自建KMS激活服务器的技巧
  8. 杰奇python采集器_linux下能完美运行的杰奇采集器ckp
  9. java省市县级联查询
  10. 英语的形容词变为of加名词形式的具体用法
  11. 如何把图片制作成GIF动图?GIF图是怎样合成的?
  12. (HTTP 503) (Request-ID: req-4f56de6f-d29c-4c44-aed3-e6ef8253384a)
  13. 【spring】切入点(Pointcut)、方面/切面(Aspect、Advisor)详解
  14. ChatGPT 常见错误原因及解决方案:报错、回答不完整、网络错误等
  15. #一日一图#自己的小窝舒服
  16. M1 电脑可以体验Windows11系统吗?M1 MAC安装win11详细教程(附图解)
  17. java windows 打印机_使用Java中的客户端计算机打印机(不是部署应用程序的服务器)进行打印...
  18. 【二分查找详解外加递归写法】附有全部代码
  19. 高蛋白过敏我们该如何缓解?教你几招远离过敏吃喝无忌
  20. 第四章 数学知识 质数相关

热门文章

  1. NLP、炼丹技巧和基础理论文章索引
  2. 智能支付稳定性测试实战
  3. 最新蚂蚁金服Java面试题:Docker+秒杀设计+RocketMQ+亿级数据设计
  4. 技术动态 | 知识图谱从哪里来:实体关系抽取的现状与未来
  5. 【转】常用数学函数篇(Linux c)
  6. 讲解Linux数据库安装
  7. mysql的字码设置方法
  8. 分布式事务两阶段提交
  9. 运维-替换-修改kibana徽标
  10. 关于直播,所有的技术细节都在这里了(2)《转载》