一、访问元素
l 元素属性操作
1．获取元素属性
语法格式：attr(name) 参数name表示元素属性的名称
示例代码
<script type="text/javascript">
$(function () {
var stralt = $("img").attr("src");
stralt += "<br>"+$("img").attr("title");
$("#divshow").html(stralt);
});
</script>
2．设置元素属性
语法格式：attr(key,value) 参数key表示元素属性的名称，value表示元素属性的值。
示例代码：
<script type="text/javascript">
$(function () {
$("img").attr("src", "../image/1.jpg");//设置src属性
$("img").attr("title", "大家好我叫美美，有事QQ我");///
$("#divspan").html("美女加载完毕");
});
</script>
attr还可以绑定一个function()函数,格式：attr(key,function(index))
<script type="text/javascript">
$(function () {
$("img").attr("src", function () {
return "../image/" + Math.floor(Math.random() * 2 + 1) + ".jpg"; //设置随机的src属性
});
$("img").attr("title", "大家好我叫美美，有事QQ我");
$("img").addClass("clsImg");
});
</script>
如果想设置多个元素属性也使用attr 格式：attr(key0:value0,key1:value1)
3．删除元素属性
语法格式：removeAttr(name),其中name为元素属性名称 如删除img元素的src属性：$(“ing”).removeAttr(“src”)
l 元素内容操作
在jQuery中操作元素内容的方法包含html()和text()，前者与JavaScript的innerHTML属性类似，即获取和设置元素的HTML内容。后者与JavaScript的innerText属性类似，即获取和设置元素的文本内容。
|
语法 |
参数说明 |
功能描述 |
|
Html() |
无参数 |
获取元素的html内容 |
|
Html(val) |
有参数 |
设置元素的html内容 |
|
Text() |
无参数 |
获取元素的文本内容 |
|
Text(val) |
有参数 |
设置元素的文本内容 |
l 元素值的操作
语法格式： val(val),如果val()没有带参数则是获取元素的值，带参数则是设置元素值。
通过val()还可以获取select标记中多个选项值。格式：val().join(“,”)
示例代码：选中select中元素将同步显示到一个空白div中，设置文本框中的值也将同步到另一个空白div中，并且焦距时文本框中的值为空。
<script type="text/javascript">
$(function () {
$("#slt").change(function () { //设置列表框的change事件
var strSel = $("#slt").val(); //获得列表框中被选中项的值
$("#divselect").html(strSel); //将列表框选中的值显示到第一个div中
});
$("#text").change(function () { //设置文本框change事件
var strText = $("#text").val(); //获得文本框中的值
$("#divtext").html(strText); //将文本框中的值显示到第二个div中
});
$("#text").focus(function () {//设置文本框的focus事件
$("#text").val("");//将文本框中的值清空。
});
});
</script>
</head>
<body>
<select id="slt">
<option value="元素1">元素1</option>
<option value="元素2">元素2</option>
<option value="元素3">元素3</option>
<option value="元素4">元素4</option>
</select>
<div id="divselect"></div>
<input type="text" id="text"/>
<div id="divtext"></div>
</body>
l 元素样式操作
1. 直接设置元素样式
语法：css(name,value) 其中name为样式名称，value为样式值。
$(“#div”).css(“background”,”red”).css(“font-size”,”20px”)
2. 添加元素样式
语法:addClass(class) 其中class为类别的名称 如果想添加多个样式可以使用addClass(class0 class1)
$(“#div”).addClass(“class0 class1 class2”)
3. 样式切换
语法: toggleClass()
4. 删除样式
语法:removeClass([class])
$(“#div”).removeClass(class0)
二、创建节点元素
函数$()用于动态创建页面元素，语法: $(html) 其中，参数html表示动态创建DOM元素的HTML标记字符串，即如果要在页面body中动态创建一个div标记，并使用其内容和属性，可以加入如下代码
Var $div=$(“<div title=’动态创建元素’>JQuery动态创建元素</div>”)
$(“body”).append($div);
三、插入节点
1. 内部插入节点
函数$(html)只是完成了DOM元素创建，加入页面中还需要通过元素节点的插入或者追加操作。同时，在创建DOM元素时，要注意字符标记是否完全闭合，如果没有闭合则达不到预期的效果。
|
语法格式 |
参数说明 |
功能描述 |
|
append(content) |
Content表示追加到目标中的内容 |
向所选元素内部插入内容 |
|
append(function(index,html)) |
通过function函数返回追加到目标中的内容 |
向所选元素内部插入function函数所返回的内容 |
|
appendTo(content) |
Content表示被追加的内容 |
把所选择的元素追加到这个指定的元素集合中 |
|
prepend(content) |
Content表示插入目标元素前面的内容 |
向每个所选择的元素内部前置内容 |
|
prepend(function(index,html)) |
通过function()返回值插入目标元素前面的内容 |
向所选择的元素内部前置function函数所返回的内容 |
|
prependTo(content) |
Content表示用于选择元素的jQuery表达式 |
将所选择的元素前置到另一个指定的元素集合中 |
append（content）与appendTo(content)区别：
两者顺序不同：append中追加的元素在后被追加的元素在前，appendTo中追加的元素在前被追加的元素在后。
如：将p插入到div中。
$(“div”).append($(“p”)) 和 $($(“p”)).appendTo(“div”) 效果是相同的。
四、复制节点
语法：clone() 其功能是复制匹配的DOM元素并且选中复制成功的元素。但是该方法只是复制元素本身，被复制的元素并不具备任何元素的行为。
所以如果需要在复制元素时将该元素的全部行为也进行复制那么可以通过如下格式： clone(true)
如：$(this).clone(true).appendTo(“span”) //将复制的元素插入span元素中。
五、替换节点
使用replaceWith和replaceAll
replaceWith(content):
该方法是将所选择的元素替换成指定的HTML或DOM元素，其中content表示选择元素替换的内容。
如: $(“#span”).replaceWith(“<span title=’replaceWith’>张山</span>”)
replaceAll(selector):
该方法是将所选择的元素替换成指定的selector元素，其中参数selector为需要被替换的元素。
六、遍历元素
语法：each(callback) 其中callback是一个function函数，该函数还可以接受一个形参index，此形参为遍历数组的序号(从0 开始)，如果需要访问元素中的属性，还可以借助形参index，配合this来实现元素的设置和读取。
七、删除元素
remove() 与 empty()的区别：
remove()是将元素全部信息删除，源代码中不存在。
empty()只是将元素清空，并非删除节点和元素，在源代码中还可以找到元素节点。