1 jQuery中的样式操作
1.1 使用css()设置和获取样式值
css(name,value) ;//设置单个属性
或
css({name:value, name:value,name:value…}) ;同时设置多个属性
$("选择器").css(name)//根据属性名获取属性值
追加/移除样式：
$(selector).addClass(class);
或 $(selector).addClass(class1 class2 … classN);//追加类的样式
$(selector).removeClass("class") ;
或 $(selector).removeClass("class1 class2 … classN ") ;//移除样式
toggleClass() 切换一个样式：
$(selector).toggleClass(className) ;
//className：要切换的 CSS 类名。如果元素上已有这个类，则移除它；如果没有这个类，则添加它。
$("h2").click(function() {
$("p").toggleClass("content border");//可以写多个类名
hasClass( )方法来判断是否包含指定的样式
$(selector). hasClass(className);//判断是否存在类1.2获取与设置元素属性
$(selector).attr([name]) ;//获取属性
或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;//设置多个属性
$(".contain img").attr({width:"200",height:"80"});
2 jQuery操作内容
jQuery操作内容
1. text() 获取或修改文本内容 类似于 dom.innerText
2. html() 获取或修改html内容 类似 dom.innerHTML
注意:
1. text() 是获取设置所有
2. html() 是获取第一个,设置所有
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>13-jquery操作内容</title>
<!--引入Jquery库文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
</head>
<body>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<div>div1<br/></div>
<div>div2<br/></div>
<div>div3<br/></div>
<script>
//获取所有span
var $span = $("span");
//获取所有div
var $div = $("div");
// 1.获取纯文本内容
console.log($span.text());//获取所有span中的文本:span1span2span3
console.log($div.text());//获取所有div中的文本:div1div2div3
// 2.获取html内容
console.log($span.html());//只能获取第一个标签体:span1
console.log($div.html());//只能获取第一个标签体:div1<br/>
// 3.设置纯文本内容
$span.text("<h1>h1标题标签</h1>");//设置为文本内容
$div.text("<h1>h1标题标签</h1>");//设置为文本内容
// 4.设置html内容
$span.html("<h1>h1标题标签</h1>");//设置标签体为标签显示
$div.html("<h1>h1标题标签</h1>");//设置标签体为标签显示
</script>
</body>
</html> 2.1 html( ) 和text( )方法的区别
3 jQuery操作属性
3.1 常用方法
- val() 获取或修改表单控件的value值 等于dom.value
- prop() 获取或修改原生属性值(checked，selected)
- attr() 获取或修改自定义属性值 等于 dom.setAttribute() dom.getAttribute()
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取属性</title>
</head>
<body>
<input id="myinput" type="text" name="username" value="张三" /><br />
<ul>
<li id="bj" name="beijing" xxx="yyy">北京</li>
<li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby" checked="checked"/>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
//获取张三
/*
* 使用jQuery对象中的val()函数,获取value的值,给value设置
* 获取: jQuery对象.val();
* 设置: jQuery对象.val(新值);
*/
//1.获取id是myinput的标签对象
var value = $("#myinput").val();
//alert(value);
//2.改变input输入框的value的值
$("#myinput").val("李四");
/*
* jQuery中的函数attr()获取属性值,设置属性值
* 获取:jQuery对象.attr("属性名");
* 设置:jQuery对象.attr("属性名","属性值 ");
*/
//获取北京节点的name属性值
//alert($("#bj").attr("name"));//beijing
//设置北京节点的name属性的值为dabeijing
//$("#bj").attr("name","dabeijing");
//alert($("#bj").attr("name"));//dabeijing
//新增北京节点的discription属性 属性值是didu
//alert($("#bj").attr("discription"));//undefined
//$("#bj").attr("discription","didu");
//alert($("#bj").attr("discription"));//didu
//删除北京节点的name属性并检验name属性是否存在
/*
* 使用jQuery对象中的函数removeAttr(name)删除指定的属性
*/
//$("#bj").removeAttr("name");
//alert($("#bj").attr("name"));//undefined
//获得hobby的的选中状态
alert($("#hobby").attr("checked"));//选中:checked 未选中:undefined
/*
* jQuery对象中的函数:
* prop(属性名); 获取的选中的状态 选中:true,未选中false
*/
alert($("#hobby").prop("checked")); //选中:true,未选中false
</script>
</html>4 jQuery创建和插入及对象
4.1 api方法
| API方法 | 解释 |
| append(element) | 添加成最后一个子元素，两者之间是父子关系 |
| prepend(element) | 添加成第一个子元素，两者之间是父子关系 |
|
| 创建A元素对象,同时可以给对象添加属性和标签体 |
| before(element) | 添加到当前元素的前面，两者之间是兄弟关系 |
| after(element) | 添加到当前元素的后面，两者之间是兄弟关系 |
补充：
| appendTo(content) | $(A).appendTo(B)表示把A追加到B中如：$newNode1.appendTo("ul"); |
| prependTo(content) | $(A). prependTo (B)表示将A前置插入到B中如：$newNode1. prependTo ("ul"); |
| insertAfter(content) | $(A). insertAfter (B)表示将A插入到B之后如：$newNode1.insertAfter("ul"); |
| insertBefore(content) | $(A). insertBefore (B)表示将A插入到B之前如：$newNode1.insertBefore("ul"); |
4.2 创建节点元素
工厂函数$()用于获取或创建节点：
- $(selector)：通过选择器获取节点
- $(element)：把DOM节点转化成jQuery节点
- $(html)：使用HTML字符串创建jQuery节点
var $newNode=$("<li></li>");
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2=$("<li title='last'><p>北京申办冬奥会是再合适不过了！</p></li>");
4.3 代码演示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>内部插入脚本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星际</li>
</ul>
<div id="foo1">Hello1</div>
</body>
<script type="text/javascript">
/**将反恐放置到city的后面*/
$("#city").append($("#fk"));
/**将反恐放置到city的最前面*/
$("#city").prepend($("#fk"));
//将反恐插入到天津后面
$("#tj").after($("#fk"));
//将反恐插入到天津前面
$("#tj").before($("#fk"));
//将反恐插入到天津后面
$("#fk").insertAfter($("#tj"));
//将反恐插入到天津前面
$("#fk").insertBefore($("#tj"));
</script>
</html>5 jQuery删除和替换对象
5.1 常用方法
| API方法 | 解释 |
| remove() | 删除指定元素 |
| empty() | 清空指定元素的所有子元素 |
| detach() | 删除整个节点，保留元素的绑定事件、附加的数据 |
| replaceWith() | $(A).replaceWith(B) 表示用B替换A |
| replaceAll() | $(A).replaceAll(B)表示把A替换为B |
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);
$($newNode1).replaceAll(".gameList li:eq(2)");
5 JQuery节点的遍历
5.1 遍历子元素
children()方法可以用来获取元素的所有子元素
var $section =$("section").children();
alert($section.length);//获取<section>的子元素，但不包含子元素的子元素5.2遍历同辈元素
jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
| 语法 | 功能 |
| next([expr]) | 用于获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("orange"); |
| prev([expr]) | 用于获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange"); |
| slibings([expr]) | 用于获取位于匹配元素前面和后面的所有同辈元素 $("li:eq(1)").siblings().addClass("orange"); |
5.3遍历前辈元素
parent()：获取元素的父级元素
parents()：元素元素的祖先元素
$("li:eq(1)").parent().addClass("orange");
$("li:eq(1)").parents().addClass("orange");5.4 each( ) 方法遍历
jquery对象.each(function(index,element){});
其中，
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象
其中，
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象
$("img").click(function(){
$("li").each(function(){
var str=$(this).text()+"<br>";
$("section").append(str);
})
});$.each(jquery对象,function(index,element){});
其中，
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象
$(function(){
var $lis = $("#city li");
$.each($lis, function(index,element) {
console.log(index+"--"+$(element).html());
});
});5.5 jQuery3.0新特性for of语句遍历
语法：
for(变量 of jquery对象){
变量；
}
其中，
变量:定义变量依次接受jquery数组中的每一个元素
jquery对象：要被遍历的jquery对象
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 版本是3以上 -->
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var $lis = $("#city li");
for(li of $lis){
console.log($(li).html());
}
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
