---恢复内容开始---
1.元素属性操作
1.1 获取元素的属性
attr(name)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="../Scripts/jquery-3.1.1.js"></script> <title></title> <meta charset="utf-8" /> <style type="text/css"> body { font-size:12px; } img { border:1px solid #ff6a00; width:300px;height:200px; padding:3px;float:left; } div { float:left;padding:10px; } </style> <script type="text/javascript"> $(function () { var urlStr = $("img").attr("src"); var altStr = $("img").attr("alt"); $("#div1").html("图片路径为：" + urlStr + "<br/>" + "图片名称为：" + altStr); }) </script> </head> <body> <img alt="你的名字" src="../0227/5670d8646a4b6.jpg"/> <div id="div1"></div> </body> </html>
1.2 设置元素的属性
设置单个属性
attr(key,valeu)
设置多个属性
arrt({key1:value1,key2:value2,...})
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../Scripts/jquery-3.1.1.js"></script> <meta charset="utf-8" /> <style type="text/css"> body { font-size:12px; } .clsSpn { float:left;padding-top:10px;padding-left:10px; } .clsImg { border:1px solid #ff0000;padding:3px;float:left; } </style> <script type="text/javascript"> $(function () { //一次设置一个属性 $("img").attr("src", "../Image/Desert.jpg"); $("img").attr("title", "这是桌面图片"); //一次设置多个属性 $("img").attr({ "src": "../Image/Desert.jpg", "title": "我变了吗？" }); $("img").addClass("clsImg"); $(".clsSpn").html("加载完毕"); }) </script> </head> <body> <img src="../Image/5670d8646a4b6.jpg" alt="你的名字" style="float:left;300px;height:200px"/> <span class="clsSpn">正在加载图片...</span> </body> </html>
1.3 删除元素属性
removeAttr(name)
2.获取和设置元素
2.1 获取和设置元素内容
在设置元素的内容有两个方法，即 html() 和 text() 。前者会被html所解析，后者则不会。
| 语法格式 | 参数说明 | 功能描述 |
| html() | 无参数 | 获取元素的HTML内容 |
| html(value) | value参数为元素的HTML内容 | 设置元素的HTML内容 |
| text() | 无参数 | 获取元素的文本内容 |
| text(value) | value参数为元素的文本内容 | 设置元素的文本内容 |
2.2 获取和设置元素值
在jQuery中，要获取元素的值通过val()方法，语法格式如下：
val(val);
其中如果不带参数val，是获取某元素的值；反之，则是将参数val的值赋给某元素。
另外，通过 val() 方法还可以获取 select 标记中的多个选项值，其语法格式如下所示：
val().join(",")
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="../Scripts/jquery-3.1.1.min.js"></script> <title>获取或设置元素的值</title> <meta charset="utf-8" /> <style type="text/css"> body { font-size:12px;text-align:center; } div { padding:3px;margin:3px;width:120px;float:left; } .txt { border:1px solid #ff0000;padding:3px; } </style> <script type="text/javascript"> $(function () { $("select").change(function () { //设置列表框change事件 //设置p1显示select被选中的value的值 $("#p1").text($("select").val().join(",")); }) $("input").change(function () {//设置输入框focus事件 //获取输入框的value值 var strTxt = $("input").val(); //设置p的文本内容为指定值 $("#p2").text(strTxt); }) $("input").focus(function () { $("input").val(''); }) }) </script> </head> <body> <div> <select multiple="multiple" style="85px;height:96px"> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> <option value="4">Item 4</option> <option value="5">Item 5</option> <option value="6">Item 6</option> <option value="7">Item 7</option> <option value="8">Item 8</option> <option value="9">Item 9</option> </select> <p id="p1"></p> </div> <div> <input type="text" class="txt"/> <p id="p2"></p> </div> </body> </html>
3.元素样式操作
3.1 直接设置元素样式值
css("name","value") name:样式名称 value:样式的值
3.2 增加元素CSS类别
增加一个样式
addClass("class") class:类别名称
增加多个样式
addClass("class1 class2 class3") 中间空格隔开
3.3 切换元素CSS类别
toggleClass("class")
3.4 删除元素CSS类别
removeClass([class])
删除一个class
removeClass("class0")
删除多个class
removeClass("class1" "class2" "class3" ...)
删除全部class
removeClass()
4.页面元素操作
4.1创建节点元素
函数 $() 用于动态创建页面元素，语法格式为：
$(html)
var $div=$("<div title='jQuery'>Something</div>");
$("body").append($div);
---恢复内容结束---
1.元素属性操作
1.1 获取元素的属性
attr(name)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="../Scripts/jquery-3.1.1.js"></script> <title></title> <meta charset="utf-8" /> <style type="text/css"> body { font-size:12px; } img { border:1px solid #ff6a00; width:300px;height:200px; padding:3px;float:left; } div { float:left;padding:10px; } </style> <script type="text/javascript"> $(function () { var urlStr = $("img").attr("src"); var altStr = $("img").attr("alt"); $("#div1").html("图片路径为：" + urlStr + "<br/>" + "图片名称为：" + altStr); }) </script> </head> <body> <img alt="你的名字" src="../0227/5670d8646a4b6.jpg"/> <div id="div1"></div> </body> </html>
1.2 设置元素的属性
设置单个属性
attr(key,valeu)
设置多个属性
arrt({key1:value1,key2:value2,...})
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../Scripts/jquery-3.1.1.js"></script> <meta charset="utf-8" /> <style type="text/css"> body { font-size:12px; } .clsSpn { float:left;padding-top:10px;padding-left:10px; } .clsImg { border:1px solid #ff0000;padding:3px;float:left; } </style> <script type="text/javascript"> $(function () { //一次设置一个属性 $("img").attr("src", "../Image/Desert.jpg"); $("img").attr("title", "这是桌面图片"); //一次设置多个属性 $("img").attr({ "src": "../Image/Desert.jpg", "title": "我变了吗？" }); $("img").addClass("clsImg"); $(".clsSpn").html("加载完毕"); }) </script> </head> <body> <img src="../Image/5670d8646a4b6.jpg" alt="你的名字" style="float:left;300px;height:200px"/> <span class="clsSpn">正在加载图片...</span> </body> </html>
1.3 删除元素属性
removeAttr(name)
2.获取和设置元素
2.1 获取和设置元素内容
在设置元素的内容有两个方法，即 html() 和 text() 。前者会被html所解析，后者则不会。
| 语法格式 | 参数说明 | 功能描述 |
| html() | 无参数 | 获取元素的HTML内容 |
| html(value) | value参数为元素的HTML内容 | 设置元素的HTML内容 |
| text() | 无参数 | 获取元素的文本内容 |
| text(value) | value参数为元素的文本内容 | 设置元素的文本内容 |
2.2 获取和设置元素值
在jQuery中，要获取元素的值通过val()方法，语法格式如下：
val(val);
其中如果不带参数val，是获取某元素的值；反之，则是将参数val的值赋给某元素。
另外，通过 val() 方法还可以获取 select 标记中的多个选项值，其语法格式如下所示：
val().join(",")
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="../Scripts/jquery-3.1.1.min.js"></script> <title>获取或设置元素的值</title> <meta charset="utf-8" /> <style type="text/css"> body { font-size:12px;text-align:center; } div { padding:3px;margin:3px;width:120px;float:left; } .txt { border:1px solid #ff0000;padding:3px; } </style> <script type="text/javascript"> $(function () { $("select").change(function () { //设置列表框change事件 //设置p1显示select被选中的value的值 $("#p1").text($("select").val().join(",")); }) $("input").change(function () {//设置输入框focus事件 //获取输入框的value值 var strTxt = $("input").val(); //设置p的文本内容为指定值 $("#p2").text(strTxt); }) $("input").focus(function () { $("input").val(''); }) }) </script> </head> <body> <div> <select multiple="multiple" style="85px;height:96px"> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> <option value="4">Item 4</option> <option value="5">Item 5</option> <option value="6">Item 6</option> <option value="7">Item 7</option> <option value="8">Item 8</option> <option value="9">Item 9</option> </select> <p id="p1"></p> </div> <div> <input type="text" class="txt"/> <p id="p2"></p> </div> </body> </html>
3.元素样式操作
3.1 直接设置元素样式值
css("name","value") name:样式名称 value:样式的值
3.2 增加元素CSS类别
增加一个样式
addClass("class") class:类别名称
增加多个样式
addClass("class1 class2 class3") 中间空格隔开
3.3 切换元素CSS类别
toggleClass("class")
3.4 删除元素CSS类别
removeClass([class])
删除一个class
removeClass("class0")
删除多个class
removeClass("class1" "class2" "class3" ...)
删除全部class
removeClass()
4.页面元素操作
4.1创建节点元素
函数 $() 用于动态创建页面元素，语法格式为：
$(html)
var $div=$("<div title='jQuery'>Something</div>");
$("body").append($div);
4.2 内部插入节点
append() 自己添加xxx
appendTo() 把自己添加到xxxx
4.3 外部插入节点
| 语法格式 | 参数说明 | 功能描述 |
| after(content) | content表示插入目标外部后面的内容 | 向所选择的元素外部后面插入内容 |
| after(function) | 通过function函数返回插入目标外部后面的内容 | 向所选择的元素外部后面插入function函数所返回的内容 |
| before(content) | content表示插入目标外部前面的内容 | 向所选择的元素外部前面插入内容 |
| before(function) | 通过function函数返回插入目标外部前面的内容 | 向所选择的元素外部前面插入function函数所返回的内容 |
| insertAfter(content) | contene表示插入目标元素外部后面的内容 | 将所选择的元素插入另一个指定的元素后面 |
| insertBefore(contene) | contene表示插入目标元素外部前面的内容 | 将所选择的元素插入另一个指定的元素前面 |
4.4 复制元素节点
clone() 该方法不具有任何元素的行为
clone(true) 该方法新元素具备被复制元素的所有行为
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="../Scripts/jquery-3.1.1.min.js"></script> <style type="text/css"> img { width:300px;height:200px;border:1px solid #808080;margin:5px } div { padding:10px; } </style> <script type="text/javascript"> $(function () { $("img").click(function () { $(this).clone(true).appendTo($("div")); }) }) </script> </head> <body> <div> <img alt="你继续点！" src="../Image/5670d8646a4b6.jpg"/> </div> </body> </html>
4.5 替换元素节点
replaceWith(content) 将所有选择的元素替换成指定的HTML或DOM元素，其中参数content为被所选择元素替换的内容
replaceAll(selector) 将所选择的元素替换成指定的selector的元素，其中参数selector为需要被替换的元素。
二者区别：
replaceWith()与replaceAll() 方法都可以实现元素节点的替换，前者是用括号内中的字符串替换元素本身。后者是字符串替换括号内被选中的元素。
替换成功后，新元素的事件都将失效。
4.6 包裹元素节点
| 语法格式 | 参数说明 | 功能描述 |
| wrap(html) | html参数为字符串代码，用于生成元素并包裹所选元素 | 把所有选择的元素用其他字符串代码包裹起来 |
| wrap(element) | elem参数用于包裹所选元素的的DOM元素 | 把所有选择的元素用其他DOM元素包裹起来 |
| wrap(function) | function参数为包裹结构的一个函数 | 把所有选择的元素用function函数返回的代码包裹起来 |
| unwrap() | 无参数 | 移除选择元素的父元素或包裹标记 |
| wrapAll(html) | html参数为字符串代码，用于生成元素并包裹所选元素 | 把所有的选择元素用单个元素包裹起来 |
| wrapAll(element) | elem参数用于包裹所选元素的的DOM元素 | 把所有选择的元素用单个DOM元素包裹起来 |
| wrapInner(html) | html参数为字符串代码，用于生成元素并包裹所选元素 | 把所有选择元素的子内容（包括文本节点）用代码串包裹起来 |
| wrapInner(element) | elem参数用于包裹所选元素的的DOM元素 | 把所有选择元素的子内容（包括文本节点）用DOM元素包裹起来 |
| wrapInner(function) | function参数为包裹结构的一个函数 | 把所有选择元素的子内容（包括文本节点）用function函数返回的代码包裹起来 |
4.7 遍历元素
each(callback)
this:代表的是每一个元素
index:从0开始的序号
$("div").each(function(index){
this.title="helloworld"+index;
})
4.8 删除页面中指定的元素
remove([expr])
expr:可选项，如果接受参数，则参数为帅选元素的jQuery表达式，通过该表述式指定的元素，并进行删除。
function(){ $("ul li").remove("li[title=pass]"); $("ul li:eq(1)").remove(); }