jQuery
jQuery是一个是免费、开源的javascript库, 也是目前使用最广泛的javascript函数库。
jQuery极大的方便你完成web前段的相关操作,例如节点操作,元素操作,事件绑定,ajax操作, 且解决了大多数的兼容性问题
jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
jquery选择器
选择某个网页元素，然后对它进行某种操作，jquery选择器可以快速地选择元素，选择规则和css样式相同
基础选择器
// css('属性名', '值');
//通过id来获取元素 document.getElementById();
$('#logo').css('border','solid 2px red');
//通过标签名来获取元素
$('li').css('background','#369');
//通过class类名获取元素
$('.w').css('background','#369');
//逗号 并列获取
$('#logo,#menu').css('background','#369');
//空格 层级获取
$('#images li').css('background','#369');
过滤获取
//获取第一个和最后一个元素
$('ul li:first').css('background','#369');
$('ul li:last').css('background','#369');
//获取指定索引的元素 索引从0开始
$('li:eq(7)').css('background','#369');
$('li').eq(7).css('background','#369');
//获取包含指定文本的元素
$('li:contains(国)').css('background','#369');
//通过包含指定属性来获取元素 通过属性来获取
$('li[name=y]').css('background','#369');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#item1{
width:300px;
height:300px;
background:red;
}
</style>
<!--引入jQuery库文件-->
<script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="item1" class="item">jQuery选择器的使用</div>
<ul>
<li class="box1">1</li>
<li class="box2">2</li>
<li class="box3">3</li>
</ul>
<script>
// 检测jQuery库文件是否引入成功
//console.log($);
// 通过id来获取元素对象 document.getElementById('item1')
console.log($('#item1'));
// 通过标签来获取元素对象
console.log($('div'));
// 通过类来获取元素对象
console.log($('.item'));
// 查找页面的那个中的第一个li元素
console.log($('li:first'))
// 获取页面当中最后一个li元素
console.log($('li:last'));
// 获取页面当中指定li元素 eq(索引值) 索引值从0开始
console.log($('li:eq(0)'));
console.log($('li').eq(0));
// 通过元素内的字符来查找元素
console.log($('li:contains(2)'));
// 通过指定元素的指定属性来查找元素
console.log($('li[class=box3]'));
</script>
</body>
</html>
父子关系获取
//获取所有的子元素
$('#images').children().css('background','#369');
//获取第一个子元素
$('ul li:first-child').css('background','#369');
//获取最后一个子元素
$('ul li:last-child').css('background','#369');
//获取指定个数的子元素 个数从1开始
$('ul li:nth-child(3)').css('background','#369');
//获取元素上一个同级元素
$('#f').prev().css('background','#369');
//获取元素下一个同级元素
$('#f').next().css('background','#369');
//获取同辈元素 (同辈元素不包含自己)
$('#f').siblings().css('background','#369');
//获取父级元素
$('#f').parent().css('background','#369');
//获取先辈级元素
$('#f').parents('#all').css('border','solid 1px red');
//在父级元素中查找指定的子元素
$('#images').find('.w').css('background','#369');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子级关系选择器</title>
<script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="wrap">
<div class="in">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</div>
</div>
<script>
//检测jquery文件是否导入成功
//alert($)
// 通过父元素获取子元素
// $('父元素').children() 获取指定元素里的所有子元素 返回的是数组
console.log($('.wrap').children());
// 获取指定的第一个子元素
console.log($('.wrap div:first-child'));
// 获取指定的最后一个元素
console.log($('.wrap div:last-child'));
// 通过元素的个数获取指定父级元素下的指定子元素 $('.wrap div:ntc-child(个数)') 个数是从一开始
console.log($('.wrap div:nth-child(2)'))
// 获取同级元素
//通过同级元素来获取 同级的上一个元素
console.log($('.item2').prev());
// 通过同级元素来获取 同级的下一个同级元素
console.log($('.item2').next());
// 获取所有的同级元素 不包含自己
console.log($('.item2').siblings());
//通过子元素来获取父元素
// 通过指定的子元素来获取父元素
console.log($('.item1').parent());
// 通过指定元素获取 先辈级元素 如果不指定找那个先辈就返回所有的先辈元素
console.log($('.item1').parents('.wrap'));
// 查找当前元素下的指定子元素 如果不指定子元素 获取不到元素 必须指定子元素
console.log($('.wrap').find('.item1'));
</script>
</body>
</html>
jQuery元素操作
通过jQuery可以操作控制元素的样式,文本,属性等
jquery样式操作
css操作行内样式
// 获取div的样式
$("div").css("width");
$("div").css("color");
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$(“div”).css(“width”)，获取的是第一个div的width。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jquery操作元素的样式</title>
<script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="item1" id="item1"></div>
<script>
// 检测库文件是否导入成功
//alert($);
// 操作元素样式
//1.现获取元素对象 css方法
var el=document.getElementById('item1');
//el.style.width='100px';
//el.style.height='100px';
//el.style.background='red';
// 设置元素的样式
//$('.item1').css('width','100px');
//$('.item1').css('height','100px');
//$('.item1').css('background','blue');
// 一次行设置多个样式 css方法穿的参数类型时一个对象类型
$('.item1').css({width:'100px',height:'100px',border:'1px solid red'});
// 获取元素的样式 获取到的是带单位的字符串
//console.log(el.style.width);
console.log($('.item1').css('width'));
</script>
</body>
</html>
类名class操作
操作样式类名
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类名的操作</title>
<script src="./jquery-1.8.3.min.js"></script>
<style>
.item1{
width:200px;
height:200px;
border:1px solid red;
}
.item2{
background:green;
}
</style>
</head>
<body>
<div></div>
<script>
// 通过jquery来给元素添加class属性
$('div').addClass('item1 ');
// 通过jquery删除class属性 注意:如果不指定要删除的类名 name就删除所有的类名
// $('div').removeClass();
// 切换 如类名不存在就添加 如果存在就删除
$('div').toggleClass('item2');
</script>
</body>
</html>
文本操作
1、html() 取出或设置html内容
// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('<span>添加文字</span>');
2、text() 取出或设置text内容
// 取出文本内容
var $htm = $('#div1').text();
// 设置文本内容
$('#div1').text('<span>添加文字</span>');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本操作</title>
<style>
#item1{
width:200px;
height:200px;
background:#990099;
}
</style>
<script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="item1">123</div>
<script>
// 文本操作 会覆盖原来的内容
// html 可以解析标签
// text 不解析标签
// html一般用于添加内容
// text一般用于获取内容
// var oDiv=document.getElementById('item1');
// console.log(oDiv);
// oDiv.innerHTML="456";
$('div').html('<h1>这是新添加的内容</h1>')
console.log($('div').html());
// $('div').text('<h1>0987</h1>');
console.log($('div').text());
</script>
</body>
</html>
属性操作
1、attr() 取出或设置某个属性的值
// 取出图片的地址
var Src = $('#img1').attr('src');
// 设置图片的地址和alt属性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });
//也可以用户设置class属性
$('#abc').attr('class','all')
//也可以自定义 属性
$('#abc').attr('love','iloveyou')
2、removeattr()删除属性
$('#abc').removeattr('class')
$('#abc').removeattr('love')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性操作</title>
<script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
<img src="" alt="大图">
<script>
// 属性操作 attr
// $('img').attr('src','./images/56fcd25dbb4a8.jpg');
// 一次添加多个属性
$('img').attr({src:'./images/56fcd25dbb4a8.jpg',title:'这是一张美女图'})
// 获取属性
console.log($('img').attr('title'));
// 删除属性 不指定要删除的属性是不会做任何操作
$('img').removeAttr('title');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用attr操作class</title>
<script src="./jquery-1.8.3.min.js"></script>
<style>
.item1{
width: 200px;
height: 200px;
border:1px solid red;
}
.item2{
background:green;
}
</style>
</head>
<body>
<div class="item1"></div>
<script>
// 使用addclass添加类名 addClass 是对class属性值的操作 可以追加类名
//$('div').addClass('item2');
// 使用 attr 添加类 attr是对class属性的操作 不能追加类名 会把原来的class属性覆盖掉
$('div').attr('class','item2');
</script>
</body>
</html>
5373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
