一、jQuery 如何获取元素
jQuery的基本设计思想和主要用法：就是“选择某个网页元素，然后对其进行某种操作”。 所以，使用jQuery的第一步就是获取元素：
- 获取的可以是CSS选择器：
$(document) //选择整个文档对象 $('#myId') //选择id名称为myId的元素 $('div.myClass') //选择class为myClass的div元素 $('input[name=first]') //选择name属性是first的input元素 - 可以是jQuery特有的表达式：
$('a:first') //选择网页中的第一个a元素 $('tr:odd') //选择表格的奇数行 $('div:visible') //选择可见的div元素 $('div:gt(2)') //选择所有的div元素，除了前三个 $('div:animated') //选择当前处于动画状态的div元素
二、jQuery的链式操作
- jQuery的链式操作：就是最终选中网页元素之后，可以对它进行一系列的操作，并且所有操作是可以连接在一起的，像链条一样，一环接一环。比如：
$('div').find('h3').eq(2).html('hello');
- 上面代码分解开来是这样的：
$('div') //找到div元素
.find('h3') //找到h3标签的元素
.eq(2) //选择h3里面的第三个元素(2是索引号)
.html('hello') //将该元素的内容修改为hello
- 原理： 每一步的jQuery操作都会返回一个jQuery对象，这个对象在不同的方法里面返回的对象可能是不同的，所以不同的操作可以连在一起。同时，jQuery还提供了.end()方法，使得结果集可以后退一步:
$('div')
.find('h3')
.eq(2)
.html('hello')
.end() //退回到选中所有h3元素那一步(退回上一步)
.eq(0) //选中第一个h3元素
.html('hi');//将它的内容改为hi
三、jQuery 创建元素和移动元素
- 创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了。
$('<p>Hi</p>');
$('<li class = "new">new list item</li>');
$('ul').append('<li>list item</li>');
- 移动元素
- 第一种方法是使用.insertAfter()，把div元素移动到p元素后面:
$('div').insertAfter($('p'));- 第二种方法是使用.after()，把p元素加到div元素前面:
$('p').after($('div'));
jQuery 修改属性的方法
- attr方法 获取匹配的元素集合中的第一个元素的属性的值 或 设置匹配元素指定的属性 使用说明： 1）只传一个参数的情况： 1>字符串（属性名称） 只传一个字符串属性名称 表示获取匹配的元素集合中的第一个元素的属性的值 2>属性 - 值 集合对象 一次性设置多个属性 2）传两个参数的情况: 1>第一个参数： 字符串属性名称 2>第二个参数： ①属性的值 ②函数(index, attr) 这个函数返回用来设置的值，this指向当前的元素 接收表示元素在匹配集合中的索引位置的参数和表示元素上原来的 该属性 值的参数 return的数据就是这个属性的值
- removeAttr方法 为匹配的元素集合中的每个元素中移除指定的属性 参数类型说明： 要移除的属性名,它可以是一个空格分隔的多个属性
- prop方法 prop也是用来获取和设置属性的值，但和attr也有一些使用场合的区别
- 添加属性名称该属性就会生效应该使用prop
- prop()方法适用于Boolean值的属性
- 其他则使用attr 简单点说：我们建议以下属性使用prop方法 checked、readonly、selected、disabled、autofocus等
- removeProp方法 删除自定义属性 对于原生的属性checked、selected、disabled等建议设置为false而不是直接删除 使用较少，因为我们一般直接prop方法设置为false就可以了！
<script type="text/javascript">
$(function(){
alert($("p").attr("id"));//获取选择器的第一个元素的id值
$("p").attr("class","classP");//更新选择器的所有元素的class值
alert($("p").attr("class"));
var obj1={
'class':"xx",
'href':"http://www.baidu.com"
}
$("a").attr(obj1);
$("a").attr("href",function(index,attr){
if(this.id=='a1'){return "http://www.qq.com"};
});
alert($("a").attr('href'));
$("#a1").removeAttr('accesskey onfocus');
});
</script>
<p id="oo" class="pg">段落</p>
<p>段落</p>
<a id='a1' accesskey="" onfocus="">链接</a>
<a>链接</a>
