jQuery中的元素操作
element.append(‘内容’); 把内容放入匹配元素内部最后面，类似原生appendChild（父元素调用）
参数：子元素
参数类型：jQuery对象、原生对象、html标签字符串
element.appendTo(‘内容’); 子元素调用，参数是父元素
element.prepend(‘内容’); 把内容放入匹配元素内部最前面
element.prependTo(‘内容’); 子元素调用，参数是父元素
element.after(‘内容’); 把内容放入目标元素后面
element.before(‘内容’); 把内容放入目标元素前面
<body>
<ul>
<li>原先的li</li>
</ul>
<script>
$(function () {
// 创建元素
var li = $('<li>添加的li</li>');
// 内部添加
// 内部添加元素，生成之后，它们是父子关系
$('ul').append(li);
$('ul').prepend(li);
// 外部添加 // 外部添加元素，生成之后，它们是兄弟关系
$('ul').after(li);
$('ul').before(li);
})
</script>
</body>
创建元素
$(’<li></li>’); 动态的创建一个<li>
删除元素
element.remove(); 删除匹配的元素(本身)
element.empty(); 删除匹配的元素集合中所有的子节点
element.html(''); 清空匹配的元素内容
empty()和html('')作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容
操作css样式
<script>
//操作样式之css方法
$( function() {
console.1og($("div").css( "width"));
});
</script>
1.参数只写属性名,则是返回属性值 $(this),css(“color”);
2.参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号 $(this).css(“color”, “red”);
3.参数可以是对象形式,方便设置多组样式。属性名和属性值用置号隔开，属性可以不用加引号, $(this,css( {“color”: “white”, “font size”: " 20px"});
注意：如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
<script>
//操作样式之css方法
$( function() {
console.1og($("div").css( "width"));
//$("div").css("width", "300px");
//当属性值为数值时可以不带单位且可以省略引号; 但是属性名一定得加引号
//$("div").css("width", 300);
//可以是对象形式
$("div").css({
width: 400,
height: 400,
background: "red"
})
});
</script>
设置类名样式方法
注意：操作类里面的参数不要加点。
1、添加类
$(“div”).addClass(“active”);
2、移除类
$(“div”).removeClass(“active”);
<body>
<div class="demo active"></div>
<div class="demo"></div>
<div class="demo"></div>
<script src="../resource/js/jquery.min.js"></script>
<script>
$('.demo').click(function(){
$('.demo').removeClass('active');
$(this).addClass('active');
})
</script>
</body>
3、切换类
$(“div”).toggleClass(“active”);
<script>
$(function(){
//1、添加类
//$("div").addClass("active");
//2、移除类
// $("div").removeClass("active");
//3、切换类
$("div").click(function(){
$(this).toggleClass("active");
});
})
</script>
类操作与className区别
原生JS中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作,不影响原先的类名。
<script>
var one = document.querySelector(".one");
// one.className = "two" ;
// $(".one").addClass("tow");//这个addClass相当于追加类名 不影响以前的类名
$(".one").removeClass("two")
</script>
操作属性
设置或获取元素固有属性值prop()
所谓元素固有属性就是元素本身自带的属性,比如<a>元素里面的href , 比如<input>元素里面的type
prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
1.获取属性语法
$(“选择器”).prop(“属性名”)；
2.设置属性语法
$(“选择器”).prop(“属性名”, “属性值”)；
$(“选择器”).prop({“属性名”: “属性值”, “属性名”: “属性值”})；
$(“选择器”).prop(“属性名”,function(index,currentvalue){})；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素操作</title>
</head>
<body>
<input type="checkbox" id="ck" />全选
<br /><br />
<input type="checkbox" class="ck" />
<input type="checkbox" class="ck" />
<input type="checkbox" class="ck" />
<input type="checkbox" class="ck" />
<input type="checkbox" class="ck" />
<script type="text/javascript" src="jquery.min.js" ></script>
<script>
//添加事件的方法：
$("#ck").click(function(){
//找到自身的选种状态
//$(this)筛选本身，自身
$(".ck").prop("checked",$(this).prop("checked"));
//找到所有的$(".ck"),设置属性：.prop("checked",属性既是上面的自身状态)！
})
$(".ck").click(function(){
//所有按钮被选中你的时候，全选按钮才被选中
if($(".ck").length === $(".ck:checked").length){
$("#ck").prop("checked",true);
}else {
$("#ck").prop("checked",false);
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../resource/css/bootstrap.min.css">
<style>
.wrap {
width: 500px;
height: 300px;
margin: 50px auto;
}
th {
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<table class="table table-striped table-bordered table-hover text-center">
<thead>
<tr class="success">
<th><input type="checkbox" id="all_check"></th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody id="t_body">
<tr>
<td><input type="checkbox" class="inp"></td>
<td>55</td>
<td>66</td>
<td>61</td>
</tr>
<tr>
<td><input type="checkbox" class="inp"></td>
<td>68</td>
<td>23</td>
<td>58</td>
</tr>
<tr>
<td><input type="checkbox" class="inp"></td>
<td>35</td>
<td>35</td>
<td>88</td>
</tr>
<tr>
<td><input type="checkbox" class="inp"></td>
<td>36</td>
<td>58</td>
<td>21</td>
</tr>
</tbody>
</table>
</div>
<script src="../resource/js/jquery.min.js"></script>
<script>
$(function(){
// 需求1：当点击全选按钮的时候，下面的四个按钮也被选中
$("#all_check").click(function(){
$(".inp").prop("checked",$(this).prop("checked"));
});
//需求2：当下面按钮有一个没被选中，上面的全选按钮也取消选中状态
$(".inp").click(function(){
if($(".inp").length === $(".inp:checked").length){
$("#all_check").prop("checked",true);
}else {
$("#all_check").prop("checked",false);
}
});
});
</script>
</body>
</html>
设置或获取元素自定义属性值attr()
1.获取属性语法
$(“选择器”).attr(“属性名”)；// 类似原生getAttribute()
2.设置属性语法
$(“选择器”).attr(“属性名”, “属性值”)；// 类似原生setAttribute()
$(“选择器”).attr({“属性名”: “属性值”, “属性名”: “属性值”})；
$(“选择器”).attr(“属性名”,function(index,currentvalue){})；
注：该方法也可以获取H5自定义属性
<input id="chke1" type="checkbox" />记住密码
<input id="chke2" type="checkbox" checked="checked" />记住密码
$("#chke1").prop("checked");// false
$("#chke2").prop("checked");// true
$("#chke1").attr("checked"); //undefined
$("#chke2").attr("checked"); //"checked"
<body>
<img src="../resource/images/10.jpg" alt="Pulpit Rock" width="284" height="213">
<button class="btn1">图像宽度减少50 px</button>
<script src="../resource/js/jquery.min.js"></script>
<script>
// 初始化.
$(function(){
// button按钮事件.
$(".btn1").click(function(){
/*
使用attr函数设置指定属性的值.
其中:
n表示选择器选中DOM的下标位.
v表示指定属性当前的值.
*/
$("img").attr("width",function(n,v){
return v-50;
});
});
});
</script>
</body>
注意：
property 是 DOM 中的属性，是 JavaScript 里的对象；
attribute 是 HTML 标签上的特性（属性），它的值只能够是字符串；
数据缓存data()
data()：方法可以在指定的元素上存取数据,并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。
1.附加数据语法
data(“name”, “value”) ; //向被选元素附加数据
2.获取数据语法
date(“name”); //向被选元素获取数据
jQuery内容文本值
html()：普通元素内容 (相当于原生inner HTML)
html() //获取元素的内容
html(“内容”) // 设置元素的内容
text()：普通元素文本内容 (相当与原生 innerText)
text() //获取元素的文本内容
text(“文本内容”) // 设置元素的文本内容
<script>
//jQuery获取文本内容
console.log($("div").html()); //<sapn>我是内容</span>
console.log($("div").text()); //我是内容
//设置内容
$("div").html("<span>我是内容</span>"); //我是内容
$("div").text("<span>我是内容</span>"); //<span>我是内容</span>
//JS获取文本内容
var dv = document.getElementById("box");
//获取文本内容
var dv = document.getElementById("box").innerHTML; //我是内容
var dv = document.getElementById("box").innerText; //<sapn>我是内容</span>
console.log(dv);
//设置内容
var dv = document.getElementById("box").innerHTML = "<span>我是内容</span>"; //我是内容
var dv = document.getElementById("box").innerText = "<span>我是内容</span>"; //<span>我是内容</span>
</script>
主要针对元素的内容还有表单的值操作。
val()：表单的值 (相当于原生value)
//获取表单内容
console.log($("input").val());
//修改表单内容
$("input").val("aaa");
JQuery的节点关系
操作节点常用方法
children()：父找子
find() ：父找后代
parent()：子找父
parents()：子找父辈
siblings()：找兄弟
next()、prev()、nextAll()和prevAll()方法
操作DOM的时候不是在操作字符串，而是在操作一个有体系、有关系、有树状结构的东西。
children()
作用：本属性选中某一个元素的所有直接儿子元素。
语法：$ (‘selector’).children()；
$ ("#box").children().css(
“background-color”,“red”
);
参数：可选-参数是选择器,表示既是这个元素的子元素，又满足参数选择器的元素;
$("#box").children(".teshu").css(
“background-color”,“red”
);
find()
作用：由于children()只能查找子元素，如果是孙子元素是找不到的，所以jQuery提供了find()“寻找"的方法。
语法：$ (‘selector’).find()；
$ (”#box").find().css(
“background-color”,“red”
);
参数：同样的find()里面也可以加选择器。
parent()
作用：表示查找当前节点的直属父节点
语法：$ (‘selector’).parent()；
$ ("#box").parent().css(
“background-color”,“red”
);
解释：把 id=box 的标签的父级元素背景改成红色；
parents()
作用：表示查找当前节点的所有祖先节点，直到html节点为止。
语法：$ (‘selector’).parents()；
$ ("#box").parents().css(
“background-color”,“red”
);
解释：把 id=box 的标签的所有祖先节点背景改成红色；
siblings()
作用：访问当前节点的所有兄弟节点（除本身之外);
例子： $(this).addClass(‘selected’).siblings().removeClass(“selected”);
解释：可以通过addClass()和removeClass()来进行排他操作，排他操作的意思就是当前节点的class可能其他地方也用到，就可以通过增加减少class来选中当前节点的兄弟元素（除本身之）；
next()、prev()、nextAll()和prevAll()方法
语法：
next() 后一个亲兄弟
prev() 前一个亲兄弟
nextAll() 后所有亲兄弟
prevAll() 前所有亲兄弟
例子：$(‘selector’).next().css(“background-color”,“red”);
2569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
