JQuery中的部分函数

 

1：addClass(class)Html的代码：

<p>Hello world<p>

JQuery的代码：

$(“p”).addClass（select）。

结果就变成：<p   class=”select”>Hello      world<p>

实例：向第一个P元素中添加一个类（样式）

$（“button”）.click（function（）{$（“p：first”）.addClass（“intro”）；}）

2：attr（）方法

一）              Attr（name）返回第一个匹配元素的属性值，如果，元素没有相应的属性，就返回undefined，其中name为string。

Html文本：<img  src= “a.jpg”>

我们可以用attr来获取img元素src的属性，具体如下：

$(function（）{

Var  imgsrc  =   $（“img”）.attr（“src”）；

alert（imgsrc）；})

二）              attr（key，value）：为所有匹配的元素设置一个属性值，key为string属性值，value为object属性值。

Html文本：<img  />

$（function（）{$（img）.attr（‘src’，‘a.jpg’）；//文件中显示：<img src=”a.jpg”>}）

三）              attr（properties）：在所有匹配元素中批量设置很多属性的最佳方式。注意，如果，你要设置对象的class属性，那么你必须使用‘className’作为属性名，或者你可以直接使用.addClass（class）和.removeClass（class）

Html文本：<img  />

Jquery:  $(function(){

        $(“img”).attr({src: “a.jpg”，title: “aaa”，className: “filter”});

})

removeAttr的用法:

$(function(){

   $(“img”).removeAttr(“title”);

})

3：hasClass(class)方法：

  检查第一个P元素是否含有intro类

$(function(){

  $(“button”).click(function(){

    alert($(“p:first”).hasClass(“intro”));

})

})

4：HTML()的用法:

$(”元素名称”).html(); 获得该元素内的内容（元素，文本等）

$(”元素名称”).html(”<b>new stuff</b>”); 给某元素设置内容

5：removeClass()的用法

  $(“元素名称”).removeClass(“class”)给某元素删除指定的样式

  $(“button”).click(function(){

    If($(this).hasClass(“select”)){

   $(this).removeClass(“select”);

}else{

  $(this).addClass(“select”);

}

Return false;

})

6：Text()的用法：

  $(“元素名称”).text().获取该元素的文本//尖括号外的就是文本。

   $(“元素名称”).text(value).设置该元素的文本值为value.

7：toggleClass的用法：

    $(“元素名称”).toggleClass(“class”),该元素存在时取消该样式，如果不存在，则添加该类。

    $(“button”).click(function(){

        $(“P”).toggleClass(“select”);

})

8：val()的用法（使用限制在input元素）

  $(“input元素名称”).val();获取input元素文本的值。

  $(function(){

 $(“button”).click(function(){

$(“P”).val();

})

})

  $(“input元素名称”).val(value);设置input元素的文本值为value。

9：after()的方法：

   $(“元素名称”).after(content).在匹配的元素后面添加内容。

   $(“button”).click(function(){

   $(“P”).after(“<p>Hello World</p>”);

})

比如：this is   my  paragraph.

       Hello  World

10：append()的用法：

   $(“元素名称”).append(content).将content作为元素内容插入到该元素的后面。

   $("p").append("<b>Hello</b>");

   <p>I would like to say: </p> -> <p>I would like to say: <b>Hello</b></p>

11：appendTo(content)的用法

   $(“元素名称”).appendTo(content) :把所有匹配的元素追加到另一个、指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中.

<p>I would like to say: </p><div id="foo"></div>

$("p").appendTo("#foo")； 

结果：<div id="foo"><p>I would like to say: </p></div>

12：before(content)的方法。

$(“元素名称”).before(content).在匹配的元素前面添加元素。

13:clone()的用法

    $(“元素名称”).clone(布尔表达式),当布尔表达式为真时，克隆元素当做true处理。

       $("body").append($("p").clone())

       This is a paragraph.      

       结果：This is a paragraph.

                This is a paragraph.

14：empty()的用法

   $(“元素名称”).empty();将该元素的内容设置为空。

15：insertAfter()的用法

   $(“元素名称”).insertAfter(content);将该元素插入到content后面。

$("<span>你好！</span>").insertAfter("p");

比如：这是一个段落。

这是另一个段落。

结果：这是一个段落。【连着执行了三次的结果】

你好！你好！你好！

这是另一个段落。

你好！你好！你好！

16：insertBefore()的用法

   $(“元素名称”).insertBefore(content);将该元素插入到content的前面。

$("<span>你好！</span>").insertBefore("p");

比如：这是一个段落。

这是另一个段落。

   结果：你好！你好！你好！你好！你好！你好！ 【这是执行了6次的结果】

这是一个段落。

你好！你好！你好！你好！你好！你好！

这是另一个段落。

17: prepend()的用法

  $(“元素”).prepend(content);将content作为该元素的一部分，放到该元素的最前面。

  HTML代码：<p>I Would like to say</p>

  $(“P”).prepend(“<b>hello</b>”);

  结果：<p><b>hello</b>I Would like to say</p>

18：prependTo()的用法

  $(“元素”).prependTo(content);将该元素作为content的一部分，放到content的最前面。

HTML代码：<p>I Would like to say</p><div id=”foo”></div>

  $(“p”).prependTo(“#foo”)

结果：<div id=”foo”><p>I Would like to say</p></div>

 

19：remove()的用法

  $(“元素”).remove();删除所有的指定元素。

   $(“button”).click(function(){

   $(“P”).remove();

})

  $(“元素”).remove(“exp”);删除所有含有exp的元素。

 

20：wrap()的用法

   $(“元素”).wrap(“html”);用html来包围该元素。

   $(“元素”).Wrap(element);用element来包围该元素。

HTML代码：

<p>aaaa</p><div id=”content”></div>

$(“p”).wrap(document.getElementById(“content”));

结果：<div id=”content”><p>aaaa</p></div><div id=”content”>

</div>

21: :odd()的用法

匹配所有索引值为奇数的元素，从 0 开始计数

$(“tr:odd”).addClass(“odd”);//找到基数的行来增加一个类

22：:even()的用法

匹配所有索引值为偶数的元素，从 0 开始计数

    $(“tr:even”).addClass(“even”);//找到偶数的行来增加一个类

23: :eq(index)的用法

获取第n个元素，index【0，n】

<p>aaaaaa</p><p>bbbbbbb</p>

$(“p:eq(1)”).addClass(class)；

24: :contains()的用法

用法: $(“div:contains(‘John’)”) ;
说明: 匹配包含给定文本的元素.这个选择器比较有用(话说都很有用),当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.

$("p:contains(is)").css("background-color","#B2E0FF");将元素p中包含is字符的p段落全部改成，这个颜色蓝色。

25: parent()的用法

26：.siblings的用法

27: .find()的用法和Filter的用法//find（）是在下级找，filter（）在平找。//找的是class的值

Jquery中find与filter函数的用法区别：
区别：
find()会在div元素内 寻找 class为classname的元素。
filter()则是筛选div的class为classname的元素。
基本上是find子元素找，filter是平级找
·find 函数是在当前对象集合的子元素中进行查询;
·filter 函数是对当前对象集合进行过滤, 利用过滤条件缩小范围;
·find 函数的参数是 jQuery 选择器表达式;
·filter 的参数也是选择器表达式, 但可以有多个条件, 用逗号分隔(逻辑或关系);
·filter 的参数也可以是个函数, 调用函数时会自动传入 index 参数, 函数需返回 true或false 以选中或排除元素.

例如：

HTML代码：

<p><span>Hello</span>,how are you</p>

$(“P”).find(“span”);

结果：<span>Hello</span>

<p>Hello</p><p>Hello word</p><p class=”select”></p>

$(“p”).filter(“.select”);

结果：<p class=”select”></p>

28: click()的用法

   $("#msg").click(function(){alert("good")})  //为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为三个不同的p元素单击事件分别设定不同的处理

29：bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。
例如：
$("p").bind("click", function(){alert($(this).text());});  //为每个p元素添加单击事件
$("p").unbind();  //删除所有p元素上的所有事件
$("p").unbind("click")  //删除所有p元素上的单击事件

31：.toggle()的用法

toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
  //每次点击时轮换添加和删除名为selected的class。
  $("p").toggle(function(){
    $(this).addClass("selected");  
  },function(){
     $(this).removeClass("selected");
  });

32：.hover()的用法

（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$("tr").hover(function(){
$(this).addClass("over");
},
  function(){
   $(this).addClass("out");
});

33：mouseover的用法

mouseover事件会在鼠标移入对象时触发

$(function(){

      $(“#pp”).mouseover(function(){

                 $(this).css({“background”,”#ccc”;});

})

})

 

 

34：mouseout的用法

mouseout事件会在鼠标移出对象时触发

35: show()的用法

36：hide()的用法

37：。trigger()的用法

trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如： $("p").trigger("click");    //触发所有p元素的click事件

38：.stopPropagation()的用法

event.stopPropagation()
   在函数最后用来停止事件冒泡

$('span').bind("click"，function(event){
var  txt = $('msg').html() + "<p>内层span元素被单击</p>";
$('#msg').html(txt);
event.stopPropagation();
}

)

39：.preventDefault()的用法

event.preventDefault()阻止元素默认行为

例：验证表单（input为空阻止提交并提示）

$(function(){
$("#submit").bind("click",function(event){
var username=$("#username").val();
if(username==""){
$("#msg").html("<p> 文本框的值不能为空</p>");
event.preventDefault();
}
});