版权声明:转载声明原作者及链接 https://blog.csdn.net/ICY___/article/details/87871497
用原生js来操作dom元素其实是一件比较繁琐的事,当JQuery遇到dom操作时会怎样呢?
直接上代码,已注释好:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jqurey dom</title>
<script src="./js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" id="btn" value="按钮">
<input type="text" id="text">
<div id="block">6
<span></span>
</div>
<ul>
<li class="lilist">1</li>
<li class="lidata">2</li>
<span>6</span>
<li class="lilist">3</li>
<span>5</span>
<li class="lilist">4</li>
</ul>
<script>
// 1.操作元素的属性 attr prop 获取或设置值
$('#btn');
console.log($('#btn'));
$('#btn').attr('value', 'btn');
$('#btn').prop('value', 'btn1');
console.log($('#btn').attr('value'));
console.log($('#btn').prop('value'));
// 一次性设置多值(无法获取多值,下同)prop和attr都有一些bug 需要按需求挑选呢
$('#btn').prop({
width: '100px', //prop无法加这个属性
value: '你好'
});
$('#btn').attr({
width: '100px',
value: '你好',
backgroundColor: 'red'
})
// 自定义属性,删除自定义属性
var btn = $('#btn');
console.log(btn);
btn.attr("data-src", "./image/1.jpg");
console.log(btn.attr("data-src"));
btn.removeAttr('data-src');//类似removeProp
console.log(btn.attr("data-src"));
//2.元素内容的操作
// js 用innerHTML innerText 其中Text表示文本,HTML表示内容,赋值时二者相同,取值时不同
// jQuery html() Text() 用法相同
var block=$('#block');
console.log(block.text());
console.log(block.html());
block.text('666');//此时span标签已经消失
block.html('666');
// 3.操作表单元素的值 val()
var text=$('#text');
text.val('123245');
// 操作dom元素的css css() 获取或设置元素的样式
text.css('borderColor', '#090a0a');
var Color=text.css('borderColor');
console.log(Color);
// jQuery的颜色为rgb值,需要转化
// 传入rgb值,转化为16进制
var color=(function(c){
var a=c.split(',')
var r=parseInt(a[0].split('(')[1]);
var g=parseInt(a[1]);
var b=parseInt(a[2].split(")")[0]);
return "#"+((r<<16)+(g<<8)+b).toString(16);
})(Color);
console.log(color);
text.css({
width:'',
height:''
});
// 5.类名称的添加 addClass() 追加名称
$('#btn').addClass('btninfo');
// 添加多个类
$('#btn').addClass('btninfo btnlist');
// 移除类名称
$('#btn').removeClass('btninfo');
// 移除全部
$('#btn').removeClass();
// 6.jquery操作子父节点的问题
// children() 找父元素里的子节点
console.log($('ul').children()[0]);
console.log($('ul>li').first());
console.log($('ul>li').last());
// eq() 根据索引找元素
console.log($('ul>li').eq(2));
// 找同胞元素
console.log($('ul>li').first().siblings('.lilist'));
// 找当前元素的前一个元素
console.log($('ul>li').eq(1).prev());//一个
console.log($('ul>li').eq(2).prevAll('li'));//前面的所有
// 找当前元素的后一个元素
console.log($('ul>li').eq(1).next());//一个
console.log($('ul>li').eq(1).nextAll());//全部
// filter() 过滤元素
console.log($('ul>li').filter('.lidata'));
// is() 判断当前对象是谁
console.log($('ul>li').eq(0).is('.lilist'));
//7.jquery尺寸问题
console.log($("body").width());//可视区域
console.log($("body").innerWidth());//包括内边距的距离
console.log($("body").outerWidth());//可视区域
</script>
</body>