本文共 7045 字，大约阅读时间需要 23 分钟。

1.parent(),parents(),closest()

parent(selector)//只匹配元素的直接父元素，它可以带一个选择器作为参数，对于匹配符合某些条件的父元素非常有用：

$("span #mySpan").parent().css("background","#f90");

$("p").parent("div .large").css("background","#f90");//对所有的《pa>标记的父元素进行处理

parents(selector)//作用和parent()很像，但它不仅限于匹配元素上一层，也就是说，他能返回多个祖先元素

$("li   .nav").parents('li') //找到他的所有父元素

closest从本身意思上可以看出是：最靠近的。从本身开始，逐级向上级搜索匹配的元素，并返回最先匹配（最靠近该元素）的祖先元素。

从选择器匹配的元素------而不是父元素----开始遍历，。。。。。这意味着如果传入closest()的选择器匹配当前操作的元素，将返回自身

$("div     #div2").closest("div").css("background","oragent")//这样找到的就是div2这div本身。

2.position() 和offset()

都返回包含left,top这两个属性的对象，当对象不同

position()返回的是

含有position：relative的元素的最近的父元素或祖先元素----的位置。

如果没有这样父元素或者祖先元素，则返回相对文档（即视区左上角）的位置

offset()返回的是：

计算相对文档的位置，不论元素的父元素或祖先元素的position属性如何

3css('width')和css(‘height’)      与 width() 和height()

计算元素的像素值，都是元素真正的维度----不论其如何被内部内容拉伸

区别：返回的数据类型不同。

css()返回字符型维度：即30px

width(),height()返回整数型维度：即30

注意点：尽量少用css（）写法，因为ie获取到的是auto，

4click() (etc)、bind()  live()    delegate()

将事件绑定到元素的方法。

$('#table  td').click(function(){

alert('this td you click contains  '+ $(this).text());

});

$("#table  td").bind('click',function(){

alert('this td you click contains  '+ $(this).text());

});

bind特点1，可以一次绑定多个事件，多个事件用空格分隔并作为第一个参数

注：contextmenu是鼠标右键事件

$("#table  td").bind('click     contextmenu',function(){

alert('this td you click contains  '+ $(this).text());

});

还可以这样写：

$("#table td").bind(

"click",function(){},

"blure",function(){},

"keypress",function(e){switch(e.which)  {case 40:  alert('44')//}},

"mouserover",function(){alert($(this).text())}

);

bind特点2：能更好的控制事件处理函数中的处理过程。【通过传递三个参数】

 bind的事件解除：unbind()

$("#table  td").bind("click    contentmenu",{message: 'hello'},function(e){

alert(e.data.message);

});

给回调函数传递了一组变量供它读取。

疑问：为什么不在回调函数之外设置变量并让回调函数读取？

答案：与作用域和闭包有关

当读取变量时，js从直接作用域开始，并向外读取

var  message = "aaaaaaaaaaaaa";

$("#table  td").bind("click",function(e){

alert(message);

});

var  message = "bbbbbbbbbbbbbbb";

$("#table  td").bind("contentmenu",function(e){

alert(message);

});

无论用鼠标左键还是右键，都是弹出bbbbbbb, 因为alert(在触发时读取message变量，而且不是绑定事件时)

如果在绑定事件时给每个事件提供自己的message版本，那么可以解决这个问题

$("#table  td").bind("click",{message:'aaaaaaaaaaaaaaa'},function(e){

alert(e.data.message);

});

$("#table  td").bind("contentmenu",{message:'bbbbbbbbbbbb'}function(e){

alert(e.data.message);

});

live()

die()解除

与bind()作用几乎一样，但又重要区别：可将事件绑定到当前或者未来的元素（当前不存在，加载文档后通过dom脚本生成的元素）

下面是等价写法：主要他们的标点

$("#newDiv").css("width",100);

$("#newDiv").css("height",100);

$("#newDiv").css("background","orange");

《====》

$("#newDIv").css({

"width":100,height:100,background:'orange'});

$("#newDIv").attr("title","aaaa");

$("#newDIv").attr("disabled","disablede");

<======>

$("#newDIv").attr({ 'title':el.attr('title'), 'aria-haspopup':true, 'tabIndex':el.attr('tabIndex') })

 live缺点：与大多数jquery不同，它无法用于链式结构，只能直接用于选择器：

$（"#myDiv      a"）.live("mouseover",function(){     alert("sssssssss");});

$（"#myDiv “）.children('a').live("mouseover",function(){     alert("sssssssss");});//这样会失败

delegate() 与live一样也可以绑定到当前和未来元素中

undelegate()解除

jquey1.4.2中才有的方法，它可以通过将选择器内的上下文，作为第一个参数俩解决上面live的缺点：

1.可以加选择器，选择器也可以写多个，中间逗号隔开

2，还可以连续写多个delegate

$（"#myDIv"）

.delegate('li.ui-multiselect-optgroup-label      a',"mouseover",function(){

alert('aaaaaaaaaaa');

})

.deleget("label','mouseover',function(){

alert('bbbbbbbbbbbbb');

})

.delegate('input[type="checkbox"], input[type="radio"]', 'click.multiselect', function(e) {

        var $this = $(this);         var val = this.value;         var checked = this.checked;         var tags = self.element.find('option');         // bail if this input is disabled or the event is cancelled         if(this.disabled || self._trigger('click', e, { value: val, text: this.title, checked: checked }) === false) {           e.preventDefault();           return;         }

first() last()：第一个，最后一个

menu.find('ul').first();

menu.find('ul').last();

children()   find()

children()返回

它返回由选择器返回的一个或者多个元素的直接子元素。

如果我们想要将一张表中所欲包含单词”dog“的<td>变成橙色，可以用下面语句：

$("#table  tr").children("td:contains(dog)").css('background',"orange");

find()

他的作用与childern()非常类似，只是它会查找子元素或者更远的子孙元素。他通常比children()更安全。

比如：我们需要隐藏所有包含hideme类的<tr>

但这些开发人员会在表格中省略<tbody>,因此我们需要包含所有可能的情况

$("#table  tbody tr .hideme").hide();

如果没有<tbody>将会失败，我们可以使用find

$("#table").find("tr .hideme").hide();

not()  is()  :not()

not():返回选择器不匹配的元素：将所有不包括someclass类的段落变成橙色

$("p").not(".someclass").css("colore","orange");

is()     :是一个测试函数，只会返回一个布尔值:

$("myform").submit(function(){

if($(this).find('input').is('.required[value=]')){//表单中input class类而且值为空,is是链式结构的一部分

alert("有需要必填的内容没有填写");

return false;

}

});

:not()  :是not()的伪选择器等价方法。作用相同，只有一点区别：

$('p :not(.someclass)').css("color","orange");

each()   filter()//迭代访问由选择器返回的每个元素并对其进行操作 each():有两种用法：

用法1：将回调函数作为唯一的参数传递

$('p').each(function(){

alert($(this).text());

});

用法2：用来处理数组和类似数组的对象

var  myarray = ['one','two'];

有两种写法：

第一种：$.each(myarray,function(key,val){

});

第二种：$(myarray).each(function(key,val){

});

filter();//不能用于数组和对象

区别的牛逼之处在于：他可以加过滤条件，而不是把所有的对象都进行遍历，不满足条件的跳过不处理

和each()一样，可以访问链表中每个元素，但如果没通过某个测试，就会从链表中移除该元素。

用法：传递给它一个选择器字符串，

$('p  .someclass'),css("color","orange");

$('p').filter('.someclass').css('color','orange');

$("p").filter(function(){

return$(this).text().indexOf("hello")!=-1//这里return了true才能执行下面的语句语句，否则什么都不做

}).css('color','orange');

文档中找到每个《P>,如果包含”hello“字符串，就将他变成橙色。否则不处理。

$("p :contains('hello')").css('color',"orange");

对于简单条件，这没问题，但是filter()更多是用来更复杂或者冗长的测试，然后确定一个元素是否可保留在链中。

===================================================================================================

说说闭包：

下面通过一个简单例子来说明：

<html>

<head>

<title>闭包的本质</title>

</head>

<body>

<script>

//a是一个普通的函数：

function A(a){

         return a;

}

//B是一个带函数返回值的函数

function B(b){

      return funciton(){

               return b;

       }

}

var x = A(10);//因为A除了返回a什么也没做，执行A()函数后，调用堆栈被销毁，没有产生闭包

var y = B(20);//因为B返回一个匿名函数引用，它访问到B()被调用时产生的环境，因此这里产生了一个闭包结构（closure或者function instance）,在它的环境中，b=20,因此y()返回的结果是20

var z = B(30);//同样，这里产生了第二个“闭包结构”，在它的环境中，b=30,因此z()返回结果是30

alert(x);//得到10；

alert(y（）);//得到20；

alert(z());//得到30；

</script>

</body>

</html>

推荐一个写的通俗易懂的文章：

js中判断是否包含某个字符串用indexOf()函数

var souce = "this is the target";

var target = "target";

var index = source.indexOf(target)

if(index===“-1”){

alert(‘说明不包含这个字符串’);

}

jquery绑定多个事件：用大括号括起来，这个和等价写法一样，其实都是用{}包裹起来多个

$（"#xxx"）.bind({

click:function(){},

keypress:function(e){},//有关键盘

mouseover:function(){},

mouseenter:function(){},

mouseleave:function(){},

focus:function(){},

blur:funciton(){},

});

有关键盘

 button.bind({

        click: clickHandler,

        keypress: function(e) {

          switch(e.which) {

            case 27: // esc

              case 38: // up

              case 37: // left

              self.close();

            break;

            case 39: // right

              case 40: // down

              self.open();

            break;

          }

        },

keyup:function(event){

var  code = event.keyCode();

if(vent.keyCode>=48&&event.keyCode<=57){

}

}

});

下面主要想让大家看看windows的event事件

点击非显示区域隐藏：

document.onclick = function(e){

//下面两个都是为了区分是ie还是ff

e= e||windows.event; //e对象存在时回返e,当window.event存在时返回event，这样就区分ff,ie了

var obj = e.srcElement?e.srcElement:e.target;//这是一种规范，ie下支持e.srcElement，ff支持e.target

if(!e||!(showdiv.contains(obj)||obj==input||obj==a)){

showdiv.style.display = "none";

}

}

今天遇到一个问题setInterval（函数，时间）

由于setInterval函数里面的函数，有个参数，所以，如果

直接写setInterval(update(basePath),500);会报错

必须这样写：setInterval(function(){update(basePath);},500);用一个function(){}函数，把要调用的函数包裹起来

  

转载地址：https://blog.csdn.net/lixld/article/details/32704889 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！