3 jQuery 操作
1 html DOM操作
1-1 插入节点
- 父子间的操作
<h3>刘大帅</h3>
<div class="box"></div>
<script>
$(function () {
//创建节点
var $h1Tag = $('<span></span>');
$h1Tag.html('wxx');
//append() appendTo() 后置追加
//方法一:参数可以是js对象
$('.box').append(h1Tag);
//方法二:参数可以是字符串
$('.box').append('<h3>hello world</h3>')
//方法三:参数可以是jQuery对象
$('.box').append($('h3'));
//创建h4标签,在添加到.box标签中,颜色为绿色,添加点击事件,打印文本.
$('<h4>老村长</h4>').appendTo('.box').css('color','green').click(function () {
console.log(this); //<h4 style="color: green;">老村长</h4>
console.log($(this).text()); //老村长
});
//prepend() prependTo() 前置追加
$('box').prepend('<a href="#">百度</a>');
$('<a href="#">淘宝</a>').prependTo('.box');
})
</script>
- 兄弟间的操作
<h3>刘大帅</h3>
<script>
//在h3后面添加兄弟h4标签
$('h3').after('<h4>alex</h4>');
//在h4后面添加兄弟h2标签
$('<h2>老男孩</h2>').insertAfter('h4');
</script>
<h3>刘大帅</h3>
<script>
//在h3前面添加兄弟h4标签
$('h3').before('<h4>alex</h4>');
//在h4前面添加兄弟h2标签
$('<h2>老男孩</h2>').insertBefore('h4');
</script>
1-2 删除节点
- remove & detach
从 DOM 中删除所有匹配的元素,传入的参数用于根据jQuery 表达式来删选元素
<div class="box">
<p>刘大帅</p>
<p>wxx</p>
</div>
<div class="wrap">
<button>按钮</button>
</div>
<script>
$(function () {
$('.wrap button').click(function () {
//即删除节点,又删除节点上的绑定事件
var btnJq = $(this).remove(); //删除后返回当前节点对象
//只删除节点,不删除节点上的绑定事件
var btnJq = $(this.detach()); //删除后返回当前节点对象
$('.box').prepend(btnJq);// 把刚才删除的元素添加到 <div> 元素中复制代码
})
})
</script>
- empty
<div class="box">
<p>刘大帅</p>
<p>wxx</p>
</div>
<div class="wrap">
<button>按钮</button>
</div>
<script>
$(function () {
//清空 div.box
$('.box').empty();
//获取所有.box下的文本
console.log($('.box').text());
//获取所有.box下的标签和文本
console.log($('.box').html());
//清空元素
$('.box').html('');
})
})
</script>
1-3 复制节点
复制节点可以使用 clone() 方法
<div class="clone">
<ul>
<li>刘大帅</li>
</ul>
</div>
<script>
$(function () {
//克隆元素
$('.clone ul li').click(function () {
//.clone() 只克隆本身
$(this).clone().appendTo('.clone ul');
//.clone(true) 克隆本身和事件
$(this).clone(true).appendTo('.clone ul');
})
})
</script>
<div class="outer">
<div class="item">
<input type="button" value="+" class="add_btn">
<input type="text">
</div>
</div>
<script>
$('.add_btn').click(function () {
var $clone = $(this).parent().clone();
$clone.children('.add_btn').val('-').attr('class','remove_btn');
$('.outer').append($clone);
})
$('.outer').on('click','.remove_btn',function () {
$(this).parent().remove();
})
</script>
1-4 替换节点和包裹节点
-
replaceWith(‘</b’)
将所有匹配的元素替换成指定的HTML或DOM元素。
-
replaceAll(selector)
用匹配的元素替换掉所有selector匹配到的元素。
<div class="replace">
<p>hello</p>
<p>world</p>
</div>
<script>
$(function () {
//替换节点
// 将所有p标签替换成i斜体标签
$('.replace p').replaceWith('<i>hello</i>');
//将网页上所有的p标签都替换成i斜体标签
$('<i>hello</i>').replaceAll('p');
})
</script>
-
wrap()
把所有匹配的元素用其他元素的结构化标记包裹起来。
-
unwrap()
这个方法将移出元素的父元素
<div class="replace">
<p>hello</p>
<p>world</p>
</div>
<script>
$(function () {
//wrap() 给p标签的外层,包裹一层span父集标签
$('.replace p').wrap('<span class="box2"></span>');
//unwrap() 删除包裹p的父集span标签
$('.replace p').unwrap();
})
</script>
-
wrapInner()
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
<div class="replace">
<p>hello</p>
<p>world</p>
</div>
<script>
$(function () {
//wrapInner()
//取到p标签的字内容,用strong标签包裹起来
$('.replace p').wrapInner('<string></string>');
})
</script>
1-5 属性操作
- attr()
获取和设置元素属性,传递一个参数为获取元素属性,传递两个参数为设置元素属性
- removeAttr()
删除文档中某个元素的特定属性
<style>
#box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<div class="replace">
<p>hello</p>
<p>world</p>
</div>
<script>
$(function () {
//设置单个属性值
$('div').attr('id','box');
//设置多个属性值
$('div').attr({id:"box",title:"盒子"});
//获取属性值
console.log($('div').attr('name')); //b
//删除属性值
$('div').removeAttr('name');
setTimeout(function () {
$('img').attr({
src:'https://img1.baidu.com/it/u=3694053003,1912698683&fm=26&fmt=auto&gp=0.jpg',
alt:'妹妹'
})
},2000);
})
</script>
- prop()
<input type="checkbox">
<script>
$(function () {
//使用attr方法时,表单中不存在属性,返回undefined
console.log($(':checkbox').attr('checked'));
//使用prop方法时,表单中不存在属性,返回false,有值返回true
//prop一般使用在表单中
console.log($(':checkbox').prop('checked'));
})
</script>
prop案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery/jQuery-3.6.0.js"></script>
</head>
<body>
<button class="select_all">全选</button>
<button class="cancel">取消</button>
<button class="reverse">反选</button>
<table border="1">
<tr>
<td>选择</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>李四</td>
<td>23</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>张山</td>
<td>23</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>23</td>
</tr>
</table>
<script>
$('.select_all').click(function () {
$('table input:checkbox').prop('checked',true);
})
$('.cancel').click(function () {
$('table input:checkbox').prop('checked',false);
})
$('.reverse').click(function () {
/*var $ele = $('table input:checkbox');
for (var i=0; i<$ele.length; i++){
var start = $($ele[i]).prop('checked');
if (start){
$($ele[i]).prop('checked',false);
}else {
$($ele[i]).prop('checked',true);
}
}*/
/*$('table input:checkbox').each(function () {
var state = $(this).prop('checked');
if (state){
$(this).prop('checked',false);
}else {
$(this).prop('checked',true);
}
})*/
$('table input:checkbox').each(function () {
$(this).prop('checked',!$(this).prop('checked'))
})
})
</script>
</body>
</html>
1-6 类操作
- addClass()
追加样式
- removeClass()
删除样式
- toggleClass()
切换样式 如果类名存在则删除,如果类名不不存在则添加
- hasClass()
是否含有某个类,返回布尔值
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
.active{
background-color: greenyellow;
}
</style>
<div class="box"></div>
<script>
$(function () {
var isRed = true;
$('.box').click(function () {
if (isRed){
//此方法不推荐
//为box添加一个class类
$(this).addClass('active');
isRed = false;
}else {
$(this).removeClass('active');
isRed = true;
}
//此方法不推荐
//判断box中有没有active类,有返回true么有返回false
if (!$(this).hasClass('active')){
$(this).addClass('active');
}else {
$(this).removeClass('active');
}
//可以添加多个类
$(this).addClass('active a b');
//可以移除多个类
$(this).removeClass('active a b');
//此方法推荐
//根据当前的box类,判断有么有active的类,有则移除无则添加
$(this).toggleClass('active')
})
})
</script>
1-7 值操作
- html()
读取或者设置某个元素中的HTML 内容 没有参数为获取HTML 中的内容,传递一个参数为设置 HTML 的内容
- text()
读取或者设置某个元素中的文本内容 没有参数为获取文本内容,传递一个参数为设置文本内容
- val()
读取或设置元素的值 在用于表单元素时,可以设置相应的元素被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery/jQuery-3.6.0.js"></script>
</head>
<body>
<div id="content">
<ul>
<li></li>
</ul>
<input type="text" value="妹妹">
<select name="" id="single">
<option>苹果</option>
<option>香蕉</option>
</select>
<select name="" id="multiple" multiple>
<option selected>苹果</option>
<option>香蕉</option>
<option selected>橘子</option>
</select>
<input type="checkbox" value="A">A
<input type="checkbox" value="B">B
<input type="radio" value="1">男
<input type="radio" value="0">女
</div>
<script>
$(function () {
//设置html中的标签名和文本值
$('#content ul li').html(`<img src="../day4/JS特效/images/girl-1.jpeg">
<p>刘大帅</p>`);
//获取html中的所有值包括标签和文本
console.log($('#content ul li').html());
//获取HTML中的文本值
console.log($('#content ul li').text());
//设置html中的文本值
$('#content ul li').text('hahahahahhahhaha');
//获取文本输入框的值
// console.log($('input[type=text]').val());
//设置文本输入框的值
// $('input[type=text]').val('姐姐');
//select单选框默认值设置
$('#single').val('香蕉'); //单选默认选中
//select多选框默认值设置
$('#multiple').val(['香蕉','橘子']); //多选默认选中
//给input设置默认值,使用value属性的值 不能使用文本的值
$('input').val(['B','0']);
})
</script>
</body>
</html>
1-8 筛选的方法
- children()
获得匹配元素的子元素的集合 (子元素非后代元素)
- next()
获得匹配元素后面紧邻的同辈元素
- siblings()
获得匹配元素前后⾯面紧邻的同辈元元素
- parent()
获得集合中每个元素的父级元素
- parents()
获得集合中每个元素的祖先元素
- prev()
获得匹配元素前面紧邻的同辈元素
- eq()
获得匹配元素的第几个元素
<div class="box">
<p>alex</p>
<h3>刘大帅</h3>
<ul>
<li>wxx</li>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div class="box2"></div>
<div class="box3"></div>
<script>
$(function () {
//只获取匹配元素的子元素的集合
console.log($('.box').children());
//获取匹配元素的下一个兄弟标签
console.log($('.box').next());
//获取匹配元素的上一个兄弟标签
console.log($('.box2').prev());
//获取匹配元素的父集标签
console.log($('.box').parent());
//获取匹配元素的所有父集标签
console.log($('.box ul li').parents()); //[ul, div.box, body, html]
//获取ul li下的第二个元素,并设置颜色
$('ul li').eq(2).css('color','red');
})
</script>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
$(function () {
$('button').click(function () {
//当点击这个元素设置背景色为红色,并且除它之外的其它兄弟元素,给它们设置的背景色为白色
$(this).css('backgroundColor','red').siblings('button').css('backgroundColor','#fff');
})
})
</script>
<ul>
<li><button>按钮1</button></li>
<li><button>按钮2</button></li>
<li><button>按钮3</button></li>
<li><button>按钮4</button></li>
<li><button>按钮5</button></li>
</ul>
<script>
$(function () {
$('button').click(function () {
//当点击这个元素设置背景色为红色,并且除它之外的其它ul li下的元素,给它们设置的背景色为白色
$(this).css('backgroundColor','red').parent().siblings('li').children().css('backgroundColor','#fff');
})
})
</script>
2 CSS的DOM操作
- css()
读取和设置 style 对象的各种属性(如果值是数字,将会⾃自动转化为像素值,样式名不不带 “”样式使⽤用驼峰写法)
<div class="box">刘大帅</div>
<script>
$(function () {
//获取值
console.log($('.box').css('color'));
//设置值
$('.box').css('color','red');
$('.box').css('fontSize',20);
//设置多个值
$('.box').css({
color:'red',
fontSize:20
})
})
</script>
- offset()
获取元素在当前视窗的相对偏移,返回的对象包含两个属性 top 、 left
- position()
获取元素相对于最近一个position样式属性设置为relative或者absolute的父节点相对偏移
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 500px;
margin: 100px auto;
background-color: lightgreen;
position: relative;
}
.c1{
width: 200px;
height: 200px;
background-color: #e4393c;
}
</style>
<div class="box">
<div class="c1">刘大帅</div>
</div>
<script>
$(function () {
//获取当前窗口的相对偏移 获取出来是一个对象 里保存着top和left属性
var $offset = $('.c1').offset();
console.log('offset Top:',$offset.top); //100
console.log('offset Left:',$offset.left); //274.5
//获取当前已定位的父集标签偏移量 获取出来是一个对象 里保存着top和left属性
var $position = $('.c1').position();
console.log('position Top:',$position.top); //0
console.log('position Left:',$position.left); //0
//设置偏移量
$('.c1').click(function () {
$(this).offset({top:100,left:100});
})
})
</script>
- scrollTop()
获取元素滚动条距离顶端的距离
- scrollLeft()
获取元素滚动条距离左侧的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery/jQuery-3.6.0.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
p{
position: absolute;
top: 200px;
}
body{
padding: 60px;
}
.fixHeader{
width: 100%;
height: 60px;
background-color: red;
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.return_top{
width:120px;
height:50px;
background-color:red;
color:white;
text-align:center;
line-height:50px;
position:fixed;
bottom:20px;
right:20px;
}
.hide{
display: none;
}
</style>
</head>
<body style="height: 2000px">
<div class="fixHeader"></div>
<div class="box"><p>刘大帅</p></div>
<div class='return_top hide'>返回顶部</div>
<script>
$(function () {
//scroll监测窗口滚动事件
$(window).scroll(function () {
var offset = $('p').offset(); //获取p标签的上方和右方距离px
var scrollTop = $(this).scrollTop();
if (scrollTop>offset.top){
// $('.fixHeader').stop().show(); //关闭上一个动画在导航条出现(可设置时间ms)
// $('.fixHeader').stop().fadeIn(); //关闭上一个动画在导航条淡出现(可设置时间ms)
$('.fixHeader').stop().slideDown(1000); //关闭上一个动画在导航条拉出来(可设置时间ms)
$('.return_top').removeClass('hide'); //显示返回顶部
}else {
// $('.fixHeader').stop().hide(); //关闭上一个动画在导航条隐藏(可设置时间ms)
// $('.fixHeader').stop().fadeOut(); //关闭上一个动画在导航条淡隐藏(可设置时间ms)
$('.fixHeader').stop().slideUp(1000); //关闭上一个动画在导航条拉隐藏(可设置时间ms)
$('.return_top').addClass('hide'); //隐藏返回顶部
}
})
// 返回顶部
$(".return_top").click(function(){
$(window).scrollTop(0);
})
})
</script>
</body>
</html>
- width()/height()
获取和设置宽度和高度
- innerWidth()/innerHeight()
获取匹配元素内部区域宽度(包括补白,不不包括边框)
- outerWidth()/outerHeight()
获取匹配元素外部宽度(默认包括补白和边框)
<style>
.box{
width: 200px;
height: 200px;
background: red;
border: 2px solid #000;
padding: 50px;
margin: 50px
}
</style>
<div class="box"></div>
<script>
$(function () {
//获取宽度和高度
console.log($('.box').width()); //200
console.log($('.box').height()); //200
//设置宽度和高度
$('.box').width(300);
$('.box').height(300);
//获取宽度和高度(包括padding值)
console.log($('.box').innerWidth()); //400
console.log($('.box').innerHeight()); //400
//获取宽度和高度(包括padding值和border值)
console.log($('.box').outerWidth()); //404
console.log($('.box').outerHeight()); //404
//获取宽度和高度(包括padding值和border值和margin值)
console.log($('.box').outerWidth(true)); //504
console.log($('.box').outerHeight(true)); //504
})
</script>
3 jquery文本操作
<div class="box"><span>刘大帅</span></div>
<script>
$(function () {
$('.box').click(function () {
//获取文本
// console.log(this.innerHTML);
// console.log(this.innerText);
console.log($(this).html());
console.log($(this).text());
//设置文本
$(this).html('<a href="#">hello world</a>');
//$(this).text('<a href="#">hello world</a>');
})
})
</script>
4 jquery value操作
<input type="text" id="i1">
<select id="i3">
<option value="hebei">河北</option>
<option value="hubei">湖北</option>
<option value="guangdong">广东</option>
</select>
<p><textarea name="" id="i2" cols="30" rows="10">123</textarea></p>
<script>
$(function () {
$('#i1').blur(function() {
//获取jquery对象value属性值
console.log($(this).val());
//设置value属性值
$(this).val('hello world');
})
$('#i3').change(function () {
//获取值
console.log($(this).val());
//设置值
$(this).val('guangdong');
})
//获取值
console.log($('#i2').val());
//设置值
console.log($('#i2').val('hello pig'));
})
</script>
5 jquery的each循环
<ul>
<li>23</li>
<li>45</li>
<li>78</li>
<li>32</li>
</ul>
<script>
var arr = [111,222,333]
$.each(arr,function (i,j) {
//i:为索引值,j:为值
console.log(i,j);
});
var obj = {name:'lxx',age:12};
$.each(obj,function (k,y) {
//k:key值,y:值
console.log(k,y);
})
$('ul li').each(function () {
//循环函数中this,代指的事每一次循环的dom对象
console.log(this);
var v = $(this).html();
if (parseInt(v)>40){
$(this).css('color','red');
}
})
</script>
6 jquery链式操作
class A(object):
def foo(self):
print('foo...')
return self
def bar(self):
print('bar...')
return self
a = A()
a.foo().bar() # 链式操作
<div class="c1">hello Js</div>
<script>
$('.c1').click(function () {
$(this).addClass('.c2').removeClass('.c3');
})
</script>