JQuery
一 . jQuery 的介绍
1.1 jQuery是什么 ?
［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
［3］ 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
[ 6 ] jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。
js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。
关于jQuery的相关资料：
-
官网API文档：http://api.jquery.com/
-
汉化API文档：http://www.css88.com/jqapi-1.9/
1.2 为什么要使用jQuery
在用js写代码时，会遇到一些问题：
-
window.onload 事件有事件覆盖的问题，因此只能写一个事件。
-
代码容错性差。
-
浏览器兼容性问题。
-
书写很繁琐，代码量多。
-
代码很乱，各个页面到处都是。
-
动画效果很难实现。
但是jQuery的出现完美的解决了这些问题.
1.3 jQuery 的带一个代码
用原生 js 来实现下面代码效果 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: green; margin-top: 20px; display: none; } </style> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementsByTagName('button')[0]; var divArr = document.getElementsByTagName('div'); oBtn.onclick = function () { for (var i = 0; i < divArr.length; i++) { divArr[i].style.display = "block"; divArr[i].innerHTML = "赵云"; } } } </script> </head> <body> <button>操作</button> <div></div> <div></div> <div></div> </body> </html>
如果用 jQuery 来写 ,保持其他的代码不变 ,<script> 部分的代码修改为 : (需要提前引入)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: green; margin-top: 20px; display: none; } </style> </head> <body> <button>操作</button> <div></div> <div></div> <div></div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ // 获取dom元素 var oBtn = $('button'); //根据标签名获取元素 var oDiv = $('div'); //根据标签名获取元素 oBtn.click(function(){ oDiv.show(1000);//显示盒子 oDiv.html('赵云'); // 设置内容 });//事件是通过方法绑定的 }) </script> </body> </html>
1.4 jQuery 的两大特点
(1) . 链式编程 : 比如 .show() 和 .html() 可以连写成 .show().html()
(2) . 隐式迭代 : 隐式对应的就是 显式 . 隐式迭代的意识就是 : 在方法内部进行循环遍历,而不是用我们自己在进行循环,简化我们的操作,方便我们使用.
二 . jQuery 的使用
1 . 使用jQuery 的基本步骤
(1) . 引包
(2) . 入口函数
(3) . 功能实现代码(事件处理)
如图 :
注意 : 导包的代码一定要放在 js 代码的最上面
jQuery 的版本
jQuery 有两个大版本：
-
1.x版本：最新版为 v1.11.3。
-
2.x版本：最新版为 v2.1.4（不再支持IE6、7、8）。
-
3.x版本。
下载jQuery包之后里面会有两个文件，一个是jquery-3.3.1.js，一个是jquery-3.3.1.min.js
它们的区别是：
-
第一个是未压缩版，第二个是压缩版。
-
平时开发过程中，可以使用任意一个版本；但是，项目上线的时候，推荐使用压缩版。
2 . jQuery 的入口函数和 $ 符号
入口函数********
原生 js 的入口函数指的是 : window.onload = funcction(){}; 如下 :
//原生 js 的入口函数.页面上所有的内容加载完毕 , 才执行.
//不仅要等文本加载完毕,而且要等图片也要加载完毕 ,才执行函数
window.onload = function(){
alert(1);
}
但是 jQuery 的入口函数 ,有以下集中写法 :
写法一 :
// 1 . 文档加载完毕,图片不加载的时候就可以执行这个函数
$(document).ready(function () {
alert(1);
})
写法二 : (写法一的简洁版)
// 2 . 文档加载完毕,图片比较早的时候执行函数.
$(function () {
alert(1);
});
写法三 :
// 3 . 文档加载完毕,图片也加载完毕的时候,在执行这个函数 $(window).ready(function () { alert(1); })
jQuery 入口函数与 js 入口函数的区别 :
区别一 :书写个数不同 :
● JS 的入口函数只能出现一次,出现多次会存在事件覆盖的问题.
● jQuery 的入口函数 , 可以出现任意多次,并不存在事件覆盖问题
区别二 : 执行时机不同 :
● JS 的入口函数是在所有的文件资源加载完成后 , 才执行,这些文件资源包括 : 页面文档 , 外部的js文件,外部的 css 文件,图片等.
● jQuery 的入口函数 , 是在文档加载完成后,就执行.文档加载完成指的是 : DOM树加载完成后就可以操作DOM了 , 不用等到所有的外部资源价值完毕.
文档加载顺序 : 从上到下,边解析边执行.
jQuery 的$符号
jQuery 使用$符号的原因 : 书写简单,相对于其他字符与众不同 ,容易被记住.
jQuery 占用了我们两个变量 : $ 和 jQuery .当我们子代码中打印他们俩的时候 :
<script src = "jquery-3.3.1.js"></script>
<script>
console.log($);
console.log(jQuery);
console.log($===jQuery);
</script>
打印结果 :
从打印结果可以看出 $ 代表的就是 jQuery.
$ 实际表示的是一个函数名 :
$(); // 调用上面我们自定义的函数$ $(document）.ready(function(){}); // 调用入口函数 $(function(){}); // 调用入口函数 $(“#btnShow”) // 获取id属性为btnShow的元素 $(“div”) // 获取所有的div标签元素
如上方所示，jQuery 里面的 $ 函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象。
jQuery这个js库，除了$ 之外，还提供了另外一个函数：jQuery。jQuery函数跟 $ 函数的关系：jQuery === $。
3 . js中的DOM对象 和 jQuery对象 比较 ********
二者的区别
通过 jQuery 获取的元素是一个数组 , 数组中包含着原生 JS 中的DOM 对象 :
例如 :
<div></div> <div id="app"></div> <div class="box"></div> <div class="box"></div> <div></div
通过原生 JS 获取这些元素节点的方式是 :
var myBox = document.getElementById("app"); //通过 id 获取单个元素 var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是伪数组 var divArr = document.getElementsByTagName("div"); //通过标签获取的是伪数组
通过 jQuery 获取这些元素节点的方式是 : (获取的是数组)
//获取的是数组，里面包含着原生 JS 中的DOM对象。 console.log($('#app')); console.log($('.box')); console.log($('div'));
设置当前4个div的样式 :
$('div').css({
'width': '200px',
'height': '200px',
"background-color":'red',
'margin-top':'20px'
})
由于 jQuery 自带了 css() 方法 ,我们还可以直接给代码中的 div 设置 css 属性.
总结 : jQuery 就是把DOM 树对象重新包装了一下,让其具有了 jQuery 方法.
二者的相互转换
1 . DOM 对象 --->>> jQuery 对象
$(js对象);
2 . jQuery 对象 --->>> DOM 对象 :
jquery对象[index]; //方式1（推荐） jquery对象.get(index); //方式2
jQuery 对象转换成了 DOM 对象之后,可以直接调用DOM 提供的一些功能. 如 :
$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';
总结 : 如果想要那种方式设置属性或者方法 ,必须转换成该类型.
三 . jQuery 的选择器
1 . jQuery 的基本选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div></div> <div id="box"></div> <div class="box"></div> <div class="box"></div> <div></div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> //入口函数 $(function(){ //三种方式获取jquery对象 var jqBox1 = $("#box"); var jqBox2 = $(".box"); var jqBox3 = $('div'); //操作标签选择器 jqBox3.css('width', '100'); jqBox3.css('height', 100); jqBox3.css('background-color', 'red'); jqBox3.css('margin-top', 10); //操作类选择器(隐式迭代，不用一个一个设置) jqBox2.css("background", "green"); jqBox2.text('哈哈哈') //操作id选择器 jqBox1.css("background", "yellow"); }) </script> </body> </html>
2 . 层级选择器
示例 :
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.3.1.js"></script> <script> $(function () { //获取ul中的li设置为粉色 //后代：儿孙重孙曾孙玄孙.... var jqLi = $("ul li"); jqLi.css("margin", 5); jqLi.css("background", "pink"); //子代：亲儿子 var jqOtherLi = $("ul>li"); jqOtherLi.css("background", "red"); }); </script> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> <ol> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ol> </ul> </body> </html>
3 . 基本过滤选择器
解释 :
示例 :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基本过滤选择器</title> </head> <body> <ul> <li>哈哈哈哈，基本过滤选择器</li> <li>嘿嘿嘿</li> <li>天王盖地虎</li> <li>小鸡炖蘑菇</li> </ul> </body> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ //获取第一个 :first ,获取最后一个 :last //奇数 $('li:odd').css('color','red'); //偶数 $('li:even').css('color','green'); //选中索引值为1的元素 * $('li:eq(1)').css('font-size','30px'); //大于索引值1 $('li:gt(1)').css('font-size','50px'); //小于索引值1 $('li:lt(1)').css('font-size','12px'); }) </script> </html>
效果 :
4 . 属性选择器
示例 :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box"> <h2 class="title">属性元素器</h2> <!--<p class="p1">我是一个段落</p>--> <ul> <li id="li1">分手应该体面</li> <li class="what" id="li2">分手应该体面</li> <li class="what">分手应该体面</li> <li class="heihei">分手应该体面</li> </ul> <form action="" method="post"> <input name="username" type='text' value="1" checked="checked" /> <input name="username1111" type='text' value="1" /> <input name="username2222" type='text' value="1" /> <input name="username3333" type='text' value="1" /> <button class="btn-default">按钮1</button> <button class="btn-info">按钮1</button> <button class="btn-success">按钮1</button> <button class="btn-danger">按钮1</button> </form> </div> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ //标签名[属性名] 查找所有含有id属性的该标签名的元素 $('li[id]').css('color','red'); //匹配给定的属性是what值得元素 $('li[class=what]').css('font-size','30px'); //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素 $('li[class!=what]').css('font-size','50px'); //匹配给定的属性是以某些值开始的元素 $('input[name^=username]').css('background','gray'); //匹配给定的属性是以某些值结尾的元素 $('input[name$=222]').css('background','greenyellow'); //匹配给定的属性是以包含某些值的元素 $('button[class*=btn]').css('background','red') }) </script> </html>
效果 :
5 . 筛选选择器
示例 :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box"> <p class="p1"> <span>我是第一个span标签</span> <span>我是第二个span标签</span> <span>我是第三个span标签</span> </p> <button>按钮</button> </div> <ul> <li class="list">2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> //获取第n个元素 数值从0开始 $('span').eq(1).css('color','#FF0000'); //获取第一个元素 :first :last 点语法 ：get方法 和set方法 $('span').last().css('color','greenyellow'); $('span').first().css('color','greenyellow'); //查找span标签的父元素（亲的） $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'}); //选择所有的兄弟元素（不包括自己） $('.list').siblings('li').css('color','red'); //查找所有的后代元素 $('div').find('button').css('background','yellow'); //不写参数代表获取所有子元素。 $('ul').children().css("background", "green"); $('ul').children("li").css("margin-top", 10); </script> </html>
效果 ：
四 . jQuery 的动画效果
显示动画
方式一 :
$("div").show();
解释 : 无参数,表示让指定的元素直接显示出来.其实这个方法的底层就是通过 display:block; 实现的.
方式二 :
$("div").show(3000);
解释 : 通过控制元素的宽高 , 透明度 , display属性 , 逐渐显示 , 2秒后显示完毕.
方式三 :
$("div").show("show");
参数可以是 :
● slow 慢 : 600ms
● normal 正常 : 400ms
● fast 快 : 200ms
解释 : 和方式二类似 , 也是通过控制元素的宽高,透明度 ,display属性 ,逐渐显示.
方式四 :
//show(毫秒值，回调函数; $("div").show(5000,function () { alert("动画执行完毕！"); });
解释 : 动画执行后,立即调用回调函数.
总结 : 参数可以有两个,第一个是动画执行的时长,第二个是动画执行结束后执行回调函数.
隐藏动画
$(selector).hide(); $(selector).hide(1000); $(selector).hide("slow"); $(selector).hide(1000, function(){});
实现点击按钮显示盒子,再点击按钮隐藏盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: green;
border: 1px solid red;
display: none;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">隐藏</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//jquery 提供了一些方法 show() hide() 控制元素显示隐藏
var isShow = true;
$('#btn').click(function(){
if(isShow){
$('#box').show('slow',function(){
$(this).text('盒子出来了');
$('#btn').text('显示');
isShow = false;
})
}else{
$('#box').hide(2000,function(){
$(this).text('');
$('#btn').text('隐藏');
isShow = true;
})
}
})
</script>
</html>
开关式显示隐藏动画
$('#box').toggle(3000,function(){});
显示和隐藏的来回切换采用的是 toggle() 方法 : 就是先执行 show() , 在执行 hide() .
$('#btn').click(function(){
$('#box').toggle(3000,function(){
$(this).text('盒子出来了');
if ($('#btn').text()=='隐藏') {
$('#btn').text('显示');
}else{
$('#btn').text('隐藏');
}
});
})
滑入和滑出
1 . 滑入动画效果 : (类似于卷帘门)
$(selector).slideDown(speed, 回调函数);
解释 : 下拉动画,显示元素.
注意 ：省略参数或者传入不合法
2 . 滑出动画效果 :
$(selector).slideUp(speed, 回调函数);
解释 : 上拉动画,隐藏元素.
3 . 滑入滑出切换动画效果 :
$(selector).slideToggle(speed, 回调函数);
示例 :
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; display: none; background-color: green; } </style> <script src="jquery-3.3.1.js"></script> <script> $(function () { //点击按钮后产生动画 $("button:eq(0)").click(function () { //滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]); $("div").slideDown(2000, function () { alert("动画执行完毕！"); }); }) //滑出动画 $("button:eq(1)").click(function () { //滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]); $("div").slideUp(2000, function () { alert("动画执行完毕！"); }); }) $("button:eq(2)").click(function () { //滑入滑出切换（同样有四种用法） $("div").slideToggle(1000); }) }) </script> </head> <body> <button>滑入</button> <button>滑出</button> <button>切换</button> <div></div> </body> </html>
淡入淡出动画
1 . 淡入动画效果 :
$(selector).fadeIn(speed, callback);
作用 : 让元素以淡淡的进入视线的方式展示出来.
2 . 淡出动画效果 :
$(selector).fadeOut(1000); //一秒后
作用 : 让元素以渐渐消失的方式隐藏起来.
3 . 淡入淡出切换动画效果 :
$(selector).fadeToggle('fast', callback);
作用 : 通过改变透明度 ,切换匹配元素的显示或隐藏状态.
参数的含义同 show() 方法.
示例 :
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; display: none; /*透明度*/ opacity: 0.5; background-color: red; } </style> <script src="jquery-3.3.1.js"></script> <script> $(function () { //点击按钮后产生动画 $("button:eq(0)").click(function () { // //淡入动画用法1: fadeIn(); 不加参数 $("div").fadeIn(); // //淡入动画用法2: fadeIn(2000); 毫秒值 // $("div").fadeIn(2000); // //通过控制 透明度和display //淡入动画用法3: fadeIn(字符串); slow慢：600ms normal正常:400ms fast快：200ms // $("div").fadeIn("slow"); // $("div").fadeIn("fast"); // $("div").fadeIn("normal"); //淡入动画用法4: fadeIn(毫秒值，回调函数[显示完毕执行什么]); // $("div").fadeIn(5000,function () { // alert("动画执行完毕！"); // }); }) //滑出动画 $("button:eq(1)").click(function () { // //滑出动画用法1: fadeOut(); 不加参数 $("div").fadeOut(); // //滑出动画用法2: fadeOut(2000); 毫秒值 // $("div").fadeOut(2000); //通过这个方法实现的：display: none; // //通过控制 透明度和display //滑出动画用法3: fadeOut(字符串); slow慢：600ms normal正常:400ms fast快：200ms // $("div").fadeOut("slow"); // $("div").fadeOut("fast"); // $("div").fadeOut("normal"); //滑出动画用法1: fadeOut(毫秒值，回调函数[显示完毕执行什么]); // $("div").fadeOut(2000,function () { // alert("动画执行完毕！"); // }); }) $("button:eq(2)").click(function () { //滑入滑出切换 //同样有四种用法 $("div").fadeToggle(1000); }) $("button:eq(3)").click(function () { //改透明度 //同样有四种用法 $("div").fadeTo(1000, 0.5, function () { alert(1); }); }) }) </script> </head> <body> <button>淡入</button> <button>淡出</button> <button>切换</button> <button>改透明度为0.5</button> <div></div> </body> </html>
自定义动画 *********
语法 :
$(selector).animate({params}, speed, callback);
作用 : 执行一组CSS属性的自定义动画.
● 第一个参数表示 : 要执行动画的CSS属性(必写)
● 第二个参数表示 : 执行动画时长(可选)
● 第三个参数表示 : 动画执行完毕后,立即执行的回调函数(可选)
示例 :
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { position: absolute; left: 20px; top: 30px; width: 100px; height: 100px; background-color: green; } </style> <script src="jquery-3.3.1.js"></script> <script> jQuery(function () { $("button").click(function () { var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100}; var json2 = { "width": 100, "height": 100, "left": 100, "top": 100, "border-radius": 100, "background-color": "red" }; //自定义动画 $("div").animate(json, 1000, function () { $("div").animate(json2, 1000, function () { alert("动画执行完毕！"); }); }); }) }) </script> </head> <body> <button>自定义动画</button> <div></div> </body> </html>
停止动画
$(selector).stop(true, false);
里面的两个参数的含义 :
第一个参数 :
● true : 后续动画不执行.
● false : 后续动画会执行.
第二个参数 :
● true : 立即执行完成当前动画.
● false : 立即停止当前动画.
注意 ; 参数如果都不写,默认两个都是false. 可以直接用 stop() 停止动画.
示例 : 鼠标悬停时,弹出下拉菜单(下拉时代动画.)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: pink;
}
.wrap li {
background-color: green;
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
//入口函数
$(document).ready(function () {
//需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
var jqli = $(".wrap>ul>li");
//绑定事件
jqli.mouseenter(function () {
$(this).children("ul").stop().slideDown(1000);
});
//绑定事件(移开隐藏)
jqli.mouseleave(function () {
$(this).children("ul").stop().slideUp(1000);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
<li><a href="javascript:void(0);">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">二级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
<li><a href="javascript:void(0);">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">三级菜单1</a>
<ul>
<li><a href="javascript:void(0);">三级菜单2</a></li>
<li><a href="javascript:void(0);">三级菜单3</a></li>
<li><a href="javascript:void(0);">三级菜单4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
注意 :
javascript:void(0); //跟javascript:;效果一样
上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。
五 . jQuery 的属性操作
jQuery 的属性操作模块分为四个部分 : HTML操作 , dom操作 , 类样式操作 , 值操作
● html属性操作 : 是对 html 文档中的属性进行读取,设置和移除操作,比如 attr(),removeAttr().
● DOM属性操作 : 对DOM元素的属性进行读取,设置和移除操作,比如 prop() , removeProp().
● 类样式操作 : 是指对DOM属性 className 进行添加,移除操作,比如 : addClass(),removeClass(),toggleClass().
● 值操作 : 是对DOM属性 value 进行读取和设置操作. 比如 : html() , text(), , val().
attr()
设置属性值 或者 返回被选元素的属性值.
//获取值：attr()设置一个属性值的时候 只是获取值 var id = $('div').attr('id') console.log(id) var cla = $('div').attr('class') console.log(cla) //设置值 //1.设置一个值 设置div的class为box $('div').attr('class','box') //2.设置多个值，参数为对象，键值对存储 $('div').attr({name:'hahaha',class:'happy'})
removeAttr()
移除属性 :
// 删除单个属性 $("#box") .removeAttr("name"); $("#box") .removeAttr("class"); //删除多个属性 $("#box") .removeAttr("name class");
prop()
prop() 方法设置 或者 返回被选元素的属性和值.
当该方法用于返回属性值时,则返回第一个匹配元素的值.
当该方法用于设置属性值时,则为匹配元素集合设置一个或者多个属性/值对.
语法 :
返回属性的值 :
$(selector).prop(property)
返回属性和值:
$(selector).prop(property,value)
设置多个属性和值:
$(selector).prop({property:value, property:value,...})
关于 attr() 和 prop() 的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> 男<input type="radio" id='test' name="sex" checked/> 女<input type="radio" id='test2' name="sex" /> <button>提交</button> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ //获取第一个input var el = $('input').first(); //undefined 因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined console.log(el.attr('style')); // 输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象 console.log(el.prop('style')); console.log(document.getElementById('test').style); $('button').click(function(){ alert(el.prop("checked") ? "男":"女"); }) }) </script> </body> </html>
注意 : 当有 true , false 两个属性时使用--prop(),否则使用attr().
类样式操作
1 . addClass() : 添加多个类名
为每个匹配的元素添加指定的类名 :
$('div').addClass("box");//追加一个类名到原有的类名
为匹配的元素添加多个类名
$('div').addClass("box box2");//追加多个类名
2 . removeClass()
从所有匹配的元素中删除全部或者指定的类
移除指定的类(一个或多个)
$('div').removeClass('box')；
移除全部的类
$('div').removeClass();
可以通过添加删除类名,来实现元素的显示隐藏.
示例 :
var tag = false; $('span').click(function(){ if(tag){ $('span').removeClass('active') tag=false; }else{ $('span').addClass('active') tag=true; } })
案例 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .active{ color: red; } </style> </head> <body> <ul> <li class="item">张三</li> <li class="item">李四</li> <li class="item">王五</li> </ul> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $('ul li').click(function(){ // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象 $(this).addClass('active').siblings('li').removeClass('active'); }) }) </script> </body> </html>
3 .toggleClass()
如果存在(不存在) 就删除(添加) 一个类 .
语法 : toggleClass("box")
$('span').click(function(){
//动态的切换class类名为active
$(this).toggleClass('active')
})
值操作
1 . html
获取值 :
语法 :
html() 是获取选中标签元素中所有的内容
$('#box').html();
设置值 : 设置该元素的所有内容 会替换掉 标签中原来的内容.
$('#box').html('<a href="https://www.baidu.com">百度一下</a>');
2 . text
text() 获取匹配元素中包含的文本内容
语法 :
$('#box').text();
设置值 : 设置该所有的文本内容.
$('#box').text('<a href="https://www.baidu.com">百度一下</a>');
注意 : 值为标签的时候 不会被渲染为镖旗属性,只会被当成值渲染到浏览器中.
3 . val
获取值
val() 用于表单控件中获取值,比如 : input , textarea , select
设置值 :
$('input').val('设置了表单控件中的值')；
4. 使用jQuery 操作 input 的 value 值
点击 --- >>> ○○○○○○
浙公网安备 33010602011771号