jquery基本操作
1.jQuery的基本操作;
1) innerhtml和innertext
修改:innerhtml可以放html片段，并且可以解析;
innertext可以放html片段,但是不會解析;
訪問:innerhtml是訪問一串html代碼;
?innertext是訪問標簽中的內(nèi)容;
<script> var city = document.getElementById("city");console.log(city.innerHTML);console.log(city.innerText);city.innerText = "<li>你好</li>"; </script>
2)?val()? ? ?
封裝原生的value屬性? ? ? 主要是用於表單元素
3) attr()
?可以設(shè)置一個屬性，也可以設(shè)置多個屬性
$("#city").attr("class","d1") //設(shè)置一個 $("#city").attr({ //設(shè)置多個"name" : "zhangsan","age" : "30"})console.log($("#city").attr("class"))? ?//不傳遞參數(shù)就是訪問
$("#city").removeAttr("class")? ? //刪除指定的屬性
?
2.樣式操作
1)?attr()方法
// ? <button id="btn1">attr()方法</button>$("#btn1").click(function(){$("#div1").attr({class : "one"})})
2)?追加樣式:?addClass(" ")
?
//<button id="btn2">追加樣式</button>$("#btn2").click(function(){$("#div1").addClass("two")})
3) 刪除樣式:removeClass()
//<button id="btn3">刪除樣式</button>$("#btn3").click(function(){$("#div1").removeClass() //如果不傳遞參數(shù)就是刪除所有， $("#div1").removeClass("two") //傳遞參數(shù)就是刪除某個})
4)?切換樣式:?toggleClass(" ")?
?
//<button id="btn4">切換樣式</button>$("#btn4").click(function(){//如果有這個樣式就刪除,如果沒有就增加$("#div1").toggleClass("two") })?
5)?判斷樣式: hasClass(" ")
// <button id="btn5">判斷樣式</button>$("#btn5").click(function(){console.log($("#div1").hasClass("two")) //判斷這個樣式是否存在在這個dom上面})
6) css( ) 方法
取得第一個段落的color樣式屬性的值。
$("p").css("color");將所有段落的字體顏色設(shè)為紅色并且背景為藍色。
$("p").css({ "color": "#ff0011", "background": "blue" });將所有段落字體設(shè)為紅色
$("p").css("color","red");逐漸增加div的大小
$("div").click(function() {$(this).css({width: function(index, value) {return parseFloat(value) * 1.2;}, height: function(index, value) {return parseFloat(value) * 1.2;}});});?
3.創(chuàng)建節(jié)點
<ul><li>北京</li><li>天津</li><li>南京</li> </ul><script> // 原生的dom // 創(chuàng)建一個武漢節(jié)點,加入到ul中var $li = $("<li></li>"); $li.text("武漢");$li.attr("id","wuhan"); // 2.添加到ul中 $("ul").append($li) //內(nèi)部插入 </script>?
4.遍歷節(jié)點
<ul id="city" name="城市列表"><li>北京<ul><li>海淀區(qū)</li><li>朝陽區(qū)</li></ul></li><li>天津</li><li>上海</li><li>重慶</li><li>南京</li> </ul>?
1) 所有子元素:children()
獲取第一個ul元素中所有子元素的個數(shù)
console.log($("ul:first").children().length)
2)?獲取第N個元素:get([index])
獲取ul元素中的第三個子元素的文本
console.log($("ul:first").children(":eq(2)").text()) console.log($("ul:first").children().get(2).innerText) console.log($("ul:first").children()[2].innerText) console.log($($("ul:first").children().get(2)).text())
3) 父元素:parent()
獲取上海這個元素的父元素的name屬性
console.log($($("ul:first").children().get(2)).parent().attr("name"))
4) 兄弟元素:prev(),next()
獲取上海這個元素的上一個兄弟元素和下一個兄弟元素
console.log($("ul:first").children(":eq(2)").prev().text()) console.log($("ul:first").children(":eq(2)").next().text())
5)同輩元素:siblings()
獲取上海這個元素的兄弟元素的所有個數(shù)
console.log($("ul:first").children(":eq(2)").siblings().length)找到每個div的所有同輩元素中帶有類名為selected的元素。
<div><span>Hello</span></div><p class="selected">Hello Again</p>
<p>And Again</p>
$("div").siblings(".selected") // <p class="selected">Hello Again</p>
?
6)所有與指定表達式匹配的元素:find()
? 獲取ul中所有的li的個數(shù)
console.log($("ul li").length) console.log($("ul").find("li").length)?
5.內(nèi)部插入
1) append(content|fn)?
把后面的東西插入到了前面的子節(jié)點中（追加）
$("#tj").append($("#xj"))
2)appendTo(content)
把前面的東西插入到了后面的子節(jié)點中（追加）
$("#tj").appendTo($("#xj"))
3) prepend(content|fn)?
把后面的東西插入到了前面的子節(jié)點中（前面插入）
$("#tj").prepend($("#xj"))
4)prependTo(content)
把前面的東西插入到了后面的子節(jié)點中（前面插入）
$("#tj").prependTo($("#xj"))?
6.外部插入
1) after(content|fn)?
把后面的插入到了前面的下一個兄弟的位置
$("#tj").after($("#xj"))
2) before(content|fn)?
把后面的插入到了前面的上一個兄弟的位置
$("#tj").before($("#xj"))?
3) insertAfter(content)?
把前面的插入到了后面的下一個兄弟
$("#tj").insertAfter($("#xj"))
4) insertBefore(content)?
把前面的插入到了后面的上一個兄弟的位置
$("#tj").insertBefore($("#xj"))?
7.刪除節(jié)點
empty() 謀殺式的
remove([expr])? ?自殺式
<body><ul id="city"><li id="bj">北京</li><li id="tj">天津</li><li id="sh">上海</li></ul><script> // var sh = document.getElementById("sh"); // console.log(sh.remove()) //這個是沒有返回值的 自殺式 // var city = document.getElementById("city"); // console.log(city.removeChild(sh)) //這個是相當(dāng)于剪貼操作 謀殺式 empty() //謀殺式的 $("#sh").empty()remove([expr]) //自殺式 $("#sh").remove();</script></body>?
8.替換節(jié)點
replaceWith(content|fn): 將所有匹配的元素替換成指定的HTML或DOM元素
replaceAll(selector):用匹配的元素替換掉所有 selector匹配到的元素
?
9.復(fù)制節(jié)點
clone([Even[,deepEven]])
克隆匹配的DOM元素并且選中這些克隆的副本
<body><button>按鈕</button><p>這是一個段落.</p><script>$("button").click(function(){console.log("hello world")})$("button").clone(true).appendTo($("p")) //注意true的作用，表示事件是否會被克隆</script> </body>?
總結(jié)
以上是生活随笔為你收集整理的jquery基本操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BOM—浏览器对象模型（Browser
- 下一篇： Ajax发送请求