jquery学习总结(超级详细)(2)

$('h1').html(); //html()没有参数,表示取出h1的值
 $('h1').html('Hello'); //html()有参数Hello,表示对h1进行赋值 
常见的取值和赋值函数如下:

1. .html() 返回或设置被选元素的内容 (inner HTML)   
2. .text() 取出或设置text内容     
3. .attr() 取出或设置某个属性的值   
4. .width() 取出或设置某个元素的宽度   
5. .height() 取出或设置某个元素的高度 
6. .val() 取出或设置html内容 取出某个表单元素的值 

  需要注意的是,如果结果集包含多个元素,那么赋值的时候,将对其中所有的元素赋值;取值的时候,则是只取出第一个元素的值(.text()例外,它取出所有元素的text内容)。

五、元素的操作:移动
.insertAfter(),把div元素移动p元素后面:

$('div').insertAfter('p');
.after(),把p元素加到div元素前面:
 

$('p').after('div');
使用这种模式的操作方法,一共有四对

1. .insertAfter()和.after():在现存元素的外部,从后面插入元素 
2. .insertBefore()和.before():在现存元素的外部,从前面插入元素 
3. .appendTo()和.append():在现存元素的内部,从后面插入元素 
4. .prependTo()和.prepend()  :在现存元素的内部,从前面插入元素


1.after():
描述:
在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码: <b>Hello</b><p>I would like to say: </p> jQuery 代码: $("p").after( $("b") ); 结果: <p>I would like to say: </p><b>Hello</b>

2.insertAfter():
描述:
把所有段落插入到一个元素之后。与 $("#foo").after("p")相同

HTML 代码: <p>I would like to say: </p><div>Hello</div> jQuery 代码: $("p").insertAfter("#foo"); 结果: <div>Hello</div><p>I would like to say: </p>

3.before():
描述:
在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码: <p>I would like to say: </p><b>Hello</b> jQuery 代码: $("p").before( $("b") ); 结果: <b>Hello</b><p>I would like to say: </p>


4.append():
描述:向所有段落中追加一些HTML标记。

HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").append("<b>Hello</b>"); 结果: <p>I would like to say: <b>Hello</b></p>


5.appendTo()
描述:新建段落追加div中并加上一个class

HTML 代码: <div></div><div></div> jQuery 代码: $("<p/>") .appendTo("div") .addClass("test") .end() .addClass("test2"); 结果: <div><p></p></div> <div><p></p></div>


6.prepend()
描述:向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码: <p>I would like to say: </p><b>Hello</b> jQuery 代码: $("p").prepend( $("b") ); 结果: <p><b>Hello</b>I would like to say: </p>


7.prependTo()
描述:把所有段落追加到ID值为foo的元素中。

HTML 代码: <p>I would like to say: </p><div></div> jQuery 代码: $("p").prependTo("#foo"); 结果: <div><p>I would like to say: </p></div>
**六**、元素的操作:复制、删除和创建
  复制元素使用.clone()
  删除元素使用.remove()和.detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。
  清空元素内容(但是不删除该元素)使用.empty()。
  创建新元素的方法非常简单,只要把新元素直接传入jQuery的构造函数就行了:

* $('<p>Hello</p>'); * $('<li>new list item</li>'); * $('ul').append('<li>list item</li>');


七、工具方法
  除了对选中的元素进行操作以外,jQuery还提供一些工具方法(utility),不必选中元素,就可以直接使用。
常用的工具方法有以下几种:

 $.trim() 去除字符串两端的空格。
 $.each() 遍历一个数组或对象。 
 $.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中,则返回-1。 
 $.grep() 返回数组中符合某种标准的元素。  
 $.extend() 将多个对象,合并到第一个对象。  
 $.makeArray() 将对象转化为数组。 
 $.type() 判断对象的类别(函数对象、日期对象、数组对象、正则对象等等)。 
 $.isArray() 判断某个参数是否为数组。 
 $.isEmptyObject() 判断某个对象是否为空(不含有任何属性)。 
 $.isFunction() 判断某个参数是否为函数。 
 $.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。 
 $.support() 判断浏览器是否支持某个特性。 

八、事件操作
 jQuery可以对网页元素绑定事件。根据不同的事件,运行相应的函数。

$('p').click(function(){ alert('Hello'); });


目前,jQuery主要支持以下事件:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgsxdg.html