jquery获取div的html jquery获取div下的子div_jQuery


jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

一、获取元素

jQuery的核心设计思想就是获取元素，然后对其操作；因此在使用jQuery时，我们首先要学习jQuery是如何获取元素的，举几个比较常用的例子（$是jQuery的简写）

  • jQuery用CSS选择器来获取元素
$(doucument)//获取整篇文档
$('.test')//获取class为test的元素
$('#test')//获取id为test的元素


  • jQuery用它特有的表达式来获取元素
$('a:first') //获取网页中第一个a元素
$('div:visible') //获取可见的div元素
$('div:gt(2)') // 获取除前三个以外的所有元素


  • jQuery通过过滤器缩小范围获取元素
$('div').has('p'); // 选择包含p元素的div元素
$('div').siblings(); //选择div的同级元素
$('div').closest('form'); //选择离div最近的那个form父元素


二、链式操作

由于jQuery中的函数最终返回的都是它当前操作的对象，因此jQuery可以进行链式操作，这样的操作使代码变得更加简洁易读。


$('#test').find('.child').addClass('red')
---------------------------------------------------------------------------------------------------
$('#test')
.find('.child')
.addClass('red')//在id为test的元素中找到class为child的元素，添加red样式


三、创建元素

jQuery区别于其他库的一个特点就是，jQuery用一个函数就完成了对某元素的取值和赋值。


$('div.demo-container').html();//.html() 方法来获取class为demo-container的div中的内容
---------------------------------------------------------------------------------------------------
$('div.demo-container')
  .html('<p>All new content. <em>You bet!</em></p>');
//设置（替换） <div class="demo-container">里的所有内容


常见的取值和赋值函数有：

.val()：获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值。

.attr()：获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。

.prop()：获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。

.height()：获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。

.width()：为匹配的元素集合中获取第一个元素的当前计算宽度值。给每个匹配的元素设置CSS宽度。

四、移动元素

jQuery提供了两种方法来完成元素的移动操作：

假设我们现在要移动的元素是div，我们要div元素移动到p元素后面；

  • 使用.insertAfter()，直接把div元素移动p元素后面：
$('div').insertAfter($('p'));//返回div元素


  • 使用.after()，把p元素加到div元素前面：
$('p').after($('div'));//返回p元素


五、修改元素属性

jQuery中修改元素属性方法的有：.attr()方法和.prop()方法

  • .attr()：使用.attr()方法的好处在于它可以直接被jQuery对象访问并且链式调用其他jQuery方法；同时.attr()方法减少了浏览器兼容性问题。一般来说，如果HTML元素上的属性是我们自定义的DOM属性，在更改该属性时，使用.attr()方法。
  • .prop()：.prop()方法设置属性值非常方便，尤其是对于需要使用一个函数设置多个属性值或是一次性设置多个属性值的情况；它与.attr()方法区别在于.prop() 方法返回 property 的值,而.attr()方法返回 attributes 的值。当设置selectedIndex， tagName,nodeName,nodeType,ownerDocument,defaultChecked, 或defaultSelected必须使用这个方法。从jQuery1.6开始，这些属性可以不再使用.attr()方法来设置。他们没有相应的属性（attributes），只有属性(property)。