JQuery 方法查询大全

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});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/495112.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库中char, varchar, nvarchar的差异

1. char固定长度&#xff0c;最长n个字符。2. varchar最大长度为n的可变字符串。&#xff08;n为某一整数&#xff0c;不同数据库&#xff0c;最大长度n不同&#xff09;char和varchar区别&#xff1a;varchar必char节省空间&#xff0c;但在效率上比char稍微差一些。说varchar…

快速转 TypeScript 指南

From&#xff1a;https://segmentfault.com/a/1190000040582994 TypeScript 教程&#xff1a;https://www.runoob.com/typescript/ts-tutorial.html TypeScript 入门教程&#xff1a;http://ts.xcatliu.com/ TypeScript 超详细入门教程&#xff08;上&#xff09;&#xff1a;…

对一句正则表达式的理解

在《Python基础教程》的第198页上看到这样一句&#xff1a; re.sub(emphasis_pattern, r<em>\1</em>, Hello, *world*!) 其中&#xff1a;emphasis_pattern r\*([^\*])\* 结果为&#xff1a;Hello, <em>world</em>! 对emphasis_pattern r\*([^\*])\*…

城市大脑建设的3个误区,大脑模型的分歧是关键

作者&#xff1a;刘锋 互联网进化论作者 计算机博士城市大脑是目前智慧城市建设热门的概念&#xff0c;因该说这是一个在中国本土诞生的科技概念和技术模型&#xff0c;作为一个新的领域&#xff0c;城市大脑究竟如何建设&#xff0c;事实上存在了两种不同的发展路径&#xff0…

关于mysql修改密码后的问题

今天心血来潮&#xff0c;把连接mysql的密码改了&#xff0c;wampSever重启后就遇到“phpMyAdmin 试图连接到 MySQL 服务器&#xff0c;但服务器拒绝连接。您应该检查 config.inc.php 中的主机、用户名和密码&#xff0c;并且确定这些信息与 MySQL 服务器的管理员所给出的信息一…

JavaScript 和 typeScript 中的 import、from

From&#xff1a;https://segmentfault.com/a/1190000018249137?utm_sourcetag-newest Github - allowSyntheticDefaultImports should be the default?exports、module.exports和export、export deault到底是咋回事JavaScript 中有多种 export 的方式&#xff0c;而 TypeSc…

深度丨建立合资公司,深度参与运营:详解景驰的无人驾驶生意经

来源&#xff1a;亿欧摘要&#xff1a; 对于景驰科技而言&#xff0c;最终实现商业价值的做法绝对不仅仅是把改装好的无人车卖出高价。在该公司看来&#xff0c;切入无人驾驶需求最旺盛的出租车市场&#xff0c;与出行服务公司、主机厂乃至政府产业基金成立合资公司&#xff0c…

使用SQL Server存储ASP.NET Session变量

创建和配置ASP.NET Session状态数据库在基于NLB&#xff08;网络负载平衡&#xff09;环境下的ASP.NET Web应用程序开发&#xff0c;我们需要将Session存储在数据库中供多个Web应用程序调用&#xff0c;以下为配置方法及注意事项。1.创建用于存储ASP.NET Session的数据库&#…

Linux工具快速教程

From&#xff1a;https://linuxtools-rst.readthedocs.io/zh_CN/latest/index.html 博客&#xff1a;http://blog.me115.comGithub地址&#xff1a;https://github.com/me115/linuxtools_rst分为三个部分&#xff1a; 第一部分为基础篇&#xff0c;介绍我们工作中常用的工具的…

学界 | DeepMind想用IQ题测试AI的抽象思维能力,进展还不错

来源&#xff1a;大数据文摘摘要&#xff1a;抽象理解能力一直是人类引以为豪的智慧来源。阿基米德基于对物体体积的抽象理解&#xff0c;悟到了物体的体积与物体浮力之间的关系。这就是抽象推理的魔力。基于神经网络的机器学习模型取得了惊人的成绩&#xff0c;但是测量其推理…

frida hook so层、protobuf 数据解析

手机安装 app &#xff0c;设置代理&#xff0c;然后开始抓包。 发现数据没法解密&#xff0c;查看请求的 url 是 http://lbs.jt.sh.cn:8082/app/rls/monitor&#xff0c;使用 jadx 反编译 app 后搜索这个 url&#xff08;提示&#xff1a;可以只搜索 url 中一部分&#xff0c;…

PHP session的工作原理

PHP SESSION原理我们知道&#xff0c;session是在服务器端保持用户会话数据的一种方法&#xff0c;对应的cookie是在客户端保持用户数据。HTTP协议是一种无状态协议&#xff0c;服务器响应完之后就失去了与浏览器的联系&#xff0c;最早&#xff0c;Netscape将cookie引入浏览器…

大数据技术与应用解读及案例分析(PPT)

来源&#xff1a;网络大数据摘要&#xff1a;大数据是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。大数据就是未来的石油。未来智能实验室是人工智能学家与科学院相关机构联合成立的人工智能&#xff0c;互联网和脑科学…

pywin32库 : Python 操作 windows 系统 API

Python 模块虽多&#xff0c;但也不可能满足所有需求。而且&#xff0c;模块为了便于使用&#xff0c;通常都封装过度&#xff0c;有些功能无法灵活使用&#xff0c;必须直接调用Windows API 来实现。要完成这一目标&#xff0c;有两种办法&#xff0c;一种是使用 C 编写 Pytho…

JVM内存管理:深入Java内存区域与OOM

Java与C之间有一堵由内存动态分配和垃圾收集技术所围成的高墙&#xff0c;墙外面的人想进去&#xff0c;墙里面的人却想出来。 概述&#xff1a; 对于从事C、C程序开发的开发人员来说&#xff0c;在内存管理领域&#xff0c;他们即是拥有最高权力的皇帝又是执行最基础工作的劳动…

华为秘密作战计划曝光,重注研发AI芯片挑战英伟达,轮值董事长挂帅

雷刚 问耕 发自 凹非寺 量子位 报道 | 公众号 QbitAI摘要&#xff1a;据报道&#xff0c;对于如何把AI引入所有业务&#xff0c;华为内部已经开启了代号为“达芬奇”的作战计划&#xff0c;并且成为华为高层每月一次讨论会的重点议题&#xff0c;也有不少华为高管以“D项目”来…

Python --- ctypes库的使用

ctypes 的官方文档 英文文档&#xff1a;https://docs.python.org/3/library/ctypes.html中文文档&#xff1a;https://docs.python.org/zh-cn/3.10/library/ctypes.html Python--ctypes(数据类型详细踩坑指南&#xff09;&#xff1a;https://zhuanlan.zhihu.com/p/145165873…

java单利模式写法

public class Something {private Something() {}private static class LazyHolder {public static final Something INSTANCE new Something();}public static Something getInstance() {return LazyHolder.INSTANCE;} } 这样的懒汉单例模式的实现&#xff0c;唯一的缺点是当…

机器学习近年来之怪现象

来源&#xff1a;网络大数据人工智能领域的发展离不开学者们的贡献&#xff0c;然而随着研究的进步&#xff0c;越来越多的论文出现了「标题党」、「占坑」、「注水」等现象&#xff0c;暴增的顶会论文接收数量似乎并没有带来更多技术突破。最近&#xff0c;来自卡耐基梅隆大学…

PySide6 : Qt for Python 教程

Qt for Python 教程&#xff1a;https://doc.qt.io/qtforpython/tutorials/index.html 官方文档示例&#xff1a;https://doc.qt.io/qtforpython/examples/index.html Qt for Python 提供了一系列带有演练指南的教程&#xff0c;以帮助新用户入门。 其中一些文档是从 C 移植到…