jQuery方法获得的集合为类数组对象,可以用一些数组的方法。集合里面的元素为DOM元素,不是jQuery对象。

jQuery设置css3属性的兼容性写法:

$(element).css({
  "webkitTransform":"xxx",
  "MozTransform":"xxx",
  "MsTransform":"xxx",
  "OTransform":"xxx",
  "transform":"xxx"}
);

jquery 1.9版本中移出了hover事件,改为mouseenter和mouseout事件;

查询元素上面绑定的所有事件的方法:

jquery._data($(ele)[0],"events"); //返回该元素上绑定的所有事件,每个类型事件维持一个数组,改变该数组顺序即可改变事件触发顺序;委托事件只有在触发时(debugger)才能被查询到
$.cache[index].events;//通过元素的properties查找事件对象的索引jQuery17208377453013832714:87,然后通过$.cache[87].events可以查看该元素上绑定的所有事件。
//在事件的handler上右键,选择show function definition查看事件处理函数的定义。
getEventListeners(targetNode);//chrome在console的API,可以查询元素上面绑定的事件,但只能看到原生方法绑定的回调函数

命名空间的使用:

解绑多个事件处理函数中的一个时,必须有函数名(对该函数的引用),即匿名函数不能解绑,此时可以用命名空间处理。

同一元素上绑定多个事件,要控制触发顺序时,也可用命名空间解决。

/*解绑多个事件处理函数中的一个*/
$("selecotr").on("click.myFoo", function(){
// stuff
})
$("selecotr").unbind('[click].myFoo');
/*控制同一元素上的事件处理函数的触发顺序*/
$('ele').on('click.doStuff1',function(){doStuff1();});
$('ele').on('click.doStuff2',function(){doStuff2();});
$('ele').trigger('click.doStuff2').trigger('click.doStuff1');
$('ele').trigger('click.doStuff1').trigger('click.doStuff2);

$().html()可以接收传入DOM节点组成的类数组对象或数组参数,被当做字符串处理,但是节点上绑定的事件会丢失。通过节点移动(append,before等)事件不会丢失。

remove()方法:该节点及其所有后代节点将同时被删除,返回一个指向已被删除的节点的引用,可在以后继续使用,其绑定的事件会丢失。
detach()和remove()一样,但其所有绑定的事件、附加的数据都会保留下来。 
empty()并不是删除该节点,而是清空元素的所有后代节点。

$("Content").insertBefore("Target")===$("Target").before("Content")在…前插入兄弟元素。

$(A).append(B)在B内部末尾追加;如果$(A)已经在页面上,则导致$(A)移动到B的尾部,并不是复制A。tr集合排序后可以直接append到tbody。

$(…).prepend()在…内部的开头追加。

:nth-child()用法

基本用法
:nth-child(n) 选中第n个子元素 //元素从1开始数
:nth-child 范围用法
正方向范围 
:nth-child(n+x) 选中从第x个开始的多个子元素 //n从0开始自动+1,
例如:nth-child(n+6) ,就相当于让你选中第6个 :nth-child(6) 和其后的所有子元素
负方向范围
:nth-child(-n+x) 选中从第1个到第x个子元素
例如:nth-child(-n+9),就相当让你选中第9个和其之前的所有子元素
前后限制范围
nth-child(n+4):nth-child(-n+8) 选中第4-8个子元素

$(…)获取的结果永远是对象,即使页面上没有找到元素。因此判断某个元素是否存在时,不能使用if( $(…) )来判断,而应该使用if( $(…).length )来判断。0为Falsy。

parents()从父元素开始匹配一直往上找,结果为大于等于0个对象;closest()从当前元素本身开始匹配一直往上找,找到即停,结果为0或1个对象

jQuery( selector, [ context ] )
用法 1 :设置选择器环境
默认情况下,选择器从文档根部对 DOM 进行搜索。不过,可以为 $() 设置可选的 context 参数。
$("div.foo").click(function() {
  $("span", this).addClass("bar");
});
由于将 span 选择器限定到 this 这个环境中,只有被点击元素中的 span 才会得到‘bar’。在内部,选择器环境是通过 .find() 方法实现的,等价于 $(this).find("span")。

find(exp):从当前集合的后代元素中继续查找
filter(exp):从当前集合的平级元素中过滤出

gt(n),lt(n)索引从0开始,不包括本身n
$("selector").slice(from, to)性能比$("selector:lt")更好

jQuery.extend(obj)扩展jQuery这个类本身,像$.ajax()就是为jQuery扩展ajax静态方法。

该方法更多用于扩展某个对象属性,即将多个对象合并到目标对象上(如插件中的默认参数var option = $.extend({},defaultVal, object1 [,objectN]))。若只有一个参数,则合并到jQuery上。
jQuery.fn.extend(obj) 扩展的是jQuery对象原型的方法:jQuery.fn=jQuery.prototype,任何jQuery对象都可以调用。

$("selector:visible")不能利用原生DOM,性能不好;改为$("selector").filter(":visible")更好。

该方法查找的元素不包括:display:none;或width和height都为0;或<input type=hidden/>的元素。

注意:Elements with (visibility: hidden) or (opacity: 0) are considered visible, since they still consume space in the layout.所以如果父元素visibility:hidden;隐藏,$("selectro:visible")查询仍能包含此元素。

css属性visibility:hidden;元素在页面不可见,但原来的空间仍保留。
display:none;元素不可见,且页面中不占任何空间。
overflow:hidden.溢出隐藏的元素也算visible的元素。

如何暂时禁用监听的事件函数?
在ele上设置data属性{isDisable:true},函数内部加判断,fasle时直接return;true时再执行后续代码。

end():回到最近的一个"破坏性"操作之前,即将链式调用匹配的元素集合变为前一次匹配的状态,可以连续调用end方法。例如在调用css方法后调用end方法继续链式操作。

$.when($.ajax(1),$.ajax(2)).then(function(xhr1,xhr2){
  …//xhr1为数组,xhr1[0]项为$.ajax(1)返回的数据,xhr1[1]为响应结果的字符串
})

select选项
1:var options=$(" option:selected");   //获取选中的项
2:var value=options.val();        //获取选中项的值 ==$("select").val();
3:var text=options.text();        //获取选中项的文本,要通过选项获取;通过select只能获取选中的val值,不能获取文本
4.$('select').val('xxx');        //直接选中value为xxx的选项。== $('select').find('[value=xxx]').prop('selected',true)
此时虽然值改变了,但不会触发change事件(需要失去焦点时才触发)。可以通过$('select').trigger('change',{key:value})手动触发change事件。

input:checkbox点击

如果用鼠标点击或在其获得焦点时按空格,会先切换其checked选中状态再触发click事件;而通过jQuery用代码触发click事件,则会先触发click事件再切换状态。冲突的解决方法:
1.在click的监听函数中加一个异步,等checked属性改变之后再做判断
  setTimeout(function() { $(self).is(':checked'); ... }, 0);
2.改用onChange 方法(原生表单元素都支持)
3.不使用Jquery对象的方法进行触发,而是原生DOM的方法: document.getElementById('#xxx').click() ===$('inputSelector').get(0).click();

//选中页面中指定的按钮

$("input[type='radio'][name=‘xxx’][value='xxx']").prop("checked",true);
//获取某个单选按钮的值
$('input[name="xxx"]:checked').val();

全局ajax事件
  $(document).ajaxSuccess(function(event, jqXHR, ajaxOptions, data){

    …//jqXHR包含了plainObject data;可以通过ajaxOptions判断需要特别处理的ajax请求

  })
全局方法,监听每个通过jquery发送的ajax请求。先触发local的success方法,再触发全局的success方法。通过global:false可以设置为不触发全局的AJAX事件。
$( document ).ajaxStop(function() { …});//当页面所有的ajax完成时触发回调函数。可以通过global:false禁用。
全局回调函数的注销:
  $(document).ajaxStop(function () {
    $(this).unbind("ajaxStop");  //可以注销
      //Some code
  });

定义一个轮询,判断需要使用的变量是否存在。如果不存在,就继续轮询,如果变量存在则停止轮询。

(function polling(){
if ("undefined" == typeof (xxx) ){
setTimeout(polling,300);
}else{
fun(...);
}
}());

$('…').click();//用代码触发事件,相当于直接调用回调函数,仍在当前环境执行栈,后续其他代码需要等click处理函数执行完才能执行。jQObj.trigger('xxx')同上。

$(‘ele’).on('click',function(){
var oldTime=new Date();
while(new Date()-oldTime<5000){};
console.log('clicked')
});
console.log("start");
$('ele').click();
console.log("end");
//输出 start、clicked、end;

页面上有多个相同的id时,直接搜总会搜到第一个。但通过限定范围,虽然可以搜到后面那个同id,但是应该用前缀+计数命名法避免同id。

标签书写不规范,浏览器会帮助修改,不影响显示效果。但jQuery是从DOM树上获取信息的,反而会因为浏览器的修正而增加修复bug的难度。比如label标签不闭合,不影响显示,但通过text()获取的就是错误的数据,会获取到最后一个闭合标签那。

对象的方法也是对象的属性,可以通过.方法名访问,也可以通过中括号内字符串访问,即['方法名']:
  $('#js-cb .btn-m')[ expression ? 'hide' : 'show'](); 更简洁的写法。

$("selector").text()获取的文本会包含html标签中的空格,需要用trim()方法处理。

window.onload() vs $(document).ready()
window.onload是原生js函数,指页面包含的图片等所有资源都加载完成时才触发的load事件,比较晚。
$(document).ready()是jQuery中的函数,在DOM树构建完成后就触发,和图像、css或js文件是否加载完毕无关。此时js已经可以操作DOM树了,可交互时间提前。
实际上jQuery内部是调用了H5的DOMContentLoaded事件。对于低版本IE,则是用readystatechange事件近似的模拟DOMContentLoaded事件。

jQuery使用记录的更多相关文章

  1. jquery删除记录弹出提示框

    来自于<jquery权威指南> ------------------- 点击删除时,弹出提示框,并做相应的删除确定或取消 完整代码如下: <!DOCTYPE html PUBLIC ...

  2. JQuery点滴记录-持续更新

    1. 获取各个控件的值 1)获取textArea等控件的值 2)获取span的值 3)删除ul下的所以li 2. jquery获取服务器控件dropdownlist的值 ddl_Type2为dropd ...

  3. 一些关于 checkbox的前台 jquery 操作 记录

    $(function() { //页面载入函数 var partList = jQuery.parseJSON( '${KeyWordsList}'); $.each(partList,functio ...

  4. 2016.8.16 JQuery学习记录

    1.$(document).ready(function(){}); 这个函数会在浏览器加载完页面之后,尽快执行: 2.所有的JQuery函数用有个$开始表示,All jQuery functions ...

  5. jquery学习记录

    1.选择器实例 语法 描述 $(this) 当前 HTML 元素 $("p") 所有 <p> 元素 $("p.intro") 所有 class=&q ...

  6. jQuery学习记录1

    jquery 和 js css里面都是坑呀 this.style.backgroundColor 和 css {background:#8df;} 是冲突的,用了前者,再$(this).addClas ...

  7. Jquery Mobile 记录

    使用的是C#语言,.Net+Jquery Mobile 框架开发 1.使用水平组切换操作 <fieldset id="Tfdset1" data-role="con ...

  8. jquery/js记录点击事件,单击次数加一,双击清零

    目的:点击按钮,点击后在网页上显示点击次数,双击清零 实现:js或者jquery 代码如下: <%@ page language="java" contentType=&qu ...

  9. jquery 使用记录

    1.jquery 筛选一个属性符合多个条件  var myTag=$("input[id=myid][name=myname][type=button]").length; 2.j ...

随机推荐

  1. 异步编程的两种模型,闭包回调,和Lua的coroutine,到底哪一种消耗更大

    今天和人讨论了一下CPS变形为闭包回调(典型为C#和JS),以及Lua这种具有真正堆栈,可以yield和resume的coroutine,两种以同步的形式写异步处理逻辑的解决方案的优缺点.之后生出疑问 ...

  2. 持续集成:TestNG中case之间的关系

    持续集成:TestNG中case之间的关系   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq: ...

  3. 老李分享:loadrunner操作mysql数据库

    老李分享:loadrunner操作mysql数据库        在poptest测试开发工程师就业培训的课程中,针对一套商业系统进行性能测试,目标是mysql后台数据库的负载能力,在这里我把测试代码 ...

  4. Java排序算法之堆排序

    堆的概念: 堆是一种完全二叉树,非叶子结点 i 要满足key[i]>key[i+1]&&key[i]>key[i+2](最大堆) 或者 key[i]<key[i+1] ...

  5. mui 页面间传值得2种方式

    通过最近得工作开发刚接触mui框架,用到了页面间得传值, 第一种:通过url进行传值 父页面代码: mui.openWindow({ id:'子页面.html', url:'子页面.html?para ...

  6. Divide Groups(分组)

    题目链接 题目大意是说输入数字n 然后告诉你第i个人都认识谁? 让你把这些人分成两堆,使这每个堆里的人都互相认识. 做法:把不是互相认识的人建立一条边,则构建二分图,两堆的人肯定都互相认识,也就是说, ...

  7. 每天一个linux命令(63):Linux中zip压缩和unzip解压缩命令详解

    文章转自:http://www.jb51.net/LINUXjishu/105916.html 1.把/home目录下面的mydata目录压缩为mydata.zipzip -r mydata.zip ...

  8. 浅谈C#数组(二)

    六.枚举集合 在foreach语句中使用枚举,可以迭代集合中的元素,且无需知道集合中元素的个数.foreach语句使用一个枚举器.foreach会调用实现了IEnumerable接口的集合类中的Get ...

  9. php 启动过程 - sapi MSHUTDOWN 过程

    php 启动过程 - sapi MSHUTDOWN 过程 概述 当服务器关闭时, 会走到 sapi MSHUTDOWN 过程 注册过程 本次内容是在 php 启动过程 - sapi MINIT 过程 ...

  10. JavaScript中的数据结构及实战系列(2):栈

    开题: 不冒任何险,什么都不做,什么也不会有,什么也不是. 本文目录 栈介绍: JavaScript实现栈: 栈的应用: 栈介绍: 和队列一样,栈也是一种表结构,但是和队列的"先进先出&qu ...