一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jQuery 常用方法使用总结

时间:2015-07-18 编辑:简简单单 来源:一聚教程网

jQuery 常用的方法整理如下

1.jquery  data(name)

data() 方法向被选元素附加数据,或者从被选元素获取数据。

$("#btn1").click(function(){
  $("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
  alert($("div").data("greeting"));
});

2.jquery arguments

arguments是指向实参对象的引用,实参对象是一个类数组对象 .

arguments 的索引 从 0, 1,2,....递增,与实参逐个对应.

arguments.length 属性代表实参的个数

arguments一定不是数组, 是长的比较像数组的一个对象,虽然也有length属性

arguments每个函数都会有,因此,arguemnts只会在内部找自身的arguments,无法引用到外层的arguments


// 求圆形面积,矩形面积, 三角形面积
  function area () {
  if(arguments.length == 1) {
  alert(3.14 * arguments[0] * arguments[0]);
  } else if(arguments.length == 2) {
  alert(arguments[0] * arguments[1]);
  } else if(arguments.length == 3) {
  alert(arguments[0] + arguments[1] + arguments[2]);
  } else {
  return null;
  }
  }


//调用
  area(10,20,30);
  

3.jquery target()     event.target

target 属性规定哪个 DOM 元素触发了该事件。


$("p, button, h1, h2").click(function(event){
  $("div").html("Triggered by a " + event.target.nodeName + " element.");
});









//当点击p标签的时候显示:点击事件由 P 元素触发
....


4.jquery trigger(event,[参1,参2,...])

trigger() 方法触发被选元素的指定事件类型。(可自定义事件,可以传参)自定义事件非常重要且有用!


 //myEvent为自定义事件名

        $("#p1").bind("myEvent",function(str1,str2) {

               alert(str1 + ' ' + str2);

          });  

         $("#p1").trigger("myEvent",["Hello","World"]);

//也可以这样写:

    $("#p1").bind("myEvent",function(str1,str2) {

               alert(str1 + ' ' + str2);

          }).trigger("myEvent",["Hello","World"]);


5.js substring(start,stop)

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

substring() 方法返回的子串包括 start 处的字符,但不包括 stop 处的字符。


var str="Helloworld!"
document.write(str.substring(3,7))

//结果
lowo

var str="Hello  world!"//有两个空字符
document.write(str.substring(3,7))

//结果
lo

//两者的结果有区别,字符串之间的空字符串占用索引!



 看清楚 没有r 这个stop处的字符!

重要事项:与 slice() 和 substr() 方法不同的是,substring() 不接受负的参数。

6.js slice(start,stop)

slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。与上面的substring一样不包括 stop处的字符;

还有一个不同是:start,stop可以使用负数!也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推。


71.siblings()

siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。



 
Hello

 

selected">Hello Again


 

And Again








结果:



8.nextAll()

    nextAll() 方法返回被选元素的所有跟随的同胞元素。






div (父)
 

p


  span
 

h2


 

h3


 

p






结果:



9.end()

end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。


 
 



 

Hello, how are you?


 


结果:



10.wrap(wrapper)

wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。






This is a paragraph.


This is another paragraph.






结果:


wrap(function())

使用函数来规定在每个被选元素周围包裹的内容。







这是一个段落。





结果:




11.each()

each() 方法规定为每个匹配元素规定运行的函数。(提示:返回 false 可用于及早停止循环。)






  • Coffee

  • Milk

  • Soda




结果:


12.call()

调用一个对象的一个方法,以另一个对象替换当前对象。

apply()

应用某一对象的一个方法,用另一个对象替换当前对象。

提示:call与apply的不同就是call传的值可以是任意的,而apply传的剩余值必须为数组。


function add(a, b) { return a + b; }

function sub(a, b) { return a - b; }

//apply
var a1 = sub.apply(add, [4, 2]);
var a2= add.apply(sub, [4, 2]);  


//call
var a1 = sub.call(add, 4, 2);

var a2= add.call(sub, 4, 2);

//输出:a1=2  a2=6

热门栏目