jquery之操做元素

前面学习了jQuery选择器以及jQuery动态效果的方法，今天来学习jQuery操做元素的一些知识，主要包括三个内容：属性操做、内容文本值操做以及元素的增删改查和遍历的操做。

一样是学习一些方法的使用。

 

• 属性操做

固有属性 prop() 方法 —— 获取属性值 prop(“属性名”)； 更改属性值 prop(“ 属性名 ”," 值")

自定义属性 attr() 方法 —— 获取属性值 attr(“属性名”)； 更改属性值 attr(“ 属性名 ”," 值")

// 1.获取元素的固有属性 prop("属性名")
// a中的href属性 input的type属性
console.log($("div").attr("index"));
console.log($("a").prop("href"));
console.log($(".text").prop("type"));

// 表单元素发生改变 change事件
// 当表单发生变化时，就输出表单是否被选中状态
$(".btn").change(function () {
console.log($(this).prop("checked"));
})

• 内容文本值操做

 主要是注意普通元素和表单元素获取文本值是不一样的。

表单 val() 方法

普通元素 text()  html()。 html() 区别标签与原生js的innerHTML()类似，text()不区别标签与原生jsinnerText()类似

// 2. 内容文本操做 text()  html()  表单：val()
console.log($(".btn").val());
console.log($(".text").val());
// console.log($(".text").val("修改后的input")); // 返回的是一个jQuery对象
// 返回修改后的元素
var divCh = $("div").text("修改后的div")
console.log(divCh.text());

 

• 元素操做

元素的建立、添加、删除，以及遍历对象的操做。

建立元素：$(" 标签 ")

添加元素：添加子元素 —— ele.append() 、ele.prepend()；添加兄弟元素 —— ele.after() 、ele.before()

删除元素：ele.remove() 、ele.empty()、ele.html(" ")

// 3.建立元素
var divAfter = $("<div>后来建立的div</div>");
// 4. 添加元素
// 4.1 外部添加
$("div").after("divAfter"); //添加到原来后面
$("div").before("divAfter"); //添加到原来前面
// 4.2内部添加
var li = $("<li>后来建立的li</li>");
$("ul").append(li); // 添加ul子元素最后面
$("ul").prepend(li); // 添加ul子元素最前面
// 5.删除元素
$("p").remove(); //删除p元素自身
$("p").empty(); // 删除元素下全部的子节点 子元素 后代元素
$("p").html(""); // 效果相似，清空元素内容

// 6.遍历对象 each(function(eleIndex,domEle){})
// eleIndex：是元素对应的索引号 能够本身命名
// domEle：是dom元素对象，须要转为jQuery对象 能够本身命名
// 对元素进行不一样的操做 须要使用遍历对象 不能使用迭代了
var arr = ["red", "yellow", "blue", "skyblue"]
$("ul li").each(function (i, ele) {
// console.log(i);
$(ele).css("color", arr[i]);
})

 

总结完毕，下一篇就写淘宝购物车里面的js交互效果拉。哈哈哈哈哈