JQuery是javaScript的一个库,Jquery基于javascript开发出来。目的就是为了简化javascript的开发。
宗旨:“Write Less,Do More”,提倡写更少的代码。
核心特性:
官网:https://jquery.com/
三大版本:
目前jQuery有三个大版本。 1.X:兼容IE678,使用最为广泛,官网只做BUG维护,功能不再新增。因此一般项目来说,使用1.X版本就可以了,最终版本:1.12.4 (2016年5月20日)
2.X不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
3.X不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本:3.6.3.
————————————————-----------看大厂的源码------
jd:1.6.4
sina:1.7.3 jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面jquery</title>
<!-- 要导入jquery函数库 -->
<script src="jquery-3.6.0.min.js"></script>
<script>
// window.onload=function(){
// }
//再次强调加载事件:先执行HTML、CSS,最后JS代码。
//1.jquery 加载事件
//$(document):当前文档对象;
//.ready():方法;参数:匿名函数对象,传递进去了;
// $(document).ready(function(){
// alert('...');
// })
//2.再简便一点;建议大家使用这种方式,简单;
// $(function(){
// alert('...测试');
// });
//3.改进的代码
$(function(){
var div1=$("div")[0];
console.log(div1.innerHTML);
var div2=$("#two");
console.log(div2.html()); //html():代替了之前的innerHTML
var div3=$(".three")[0];
console.log(div3.innerHTML);
})
//单个元素的时候,直接是html(),代替了之前的innerHTML。
// window.onload=function(){
// var div=document.getElementsByTagName("div")[0];
// alert(div.innerHTML);
// //获得的是Element元素
// var div2=document.getElementById("two");
// alert(div2.innerHTML);
// //3.根据类样式的名,来获得元素集合
// var div3=document.getElementsByClassName("three")[0];
// alert(div3.innerHTML);
// }
</script>
</head>
<body>
<div>标签选择器div:扎克波哥</div>
<div id="two">第二个div:雷布斯</div>
<div class="three">类样式的周鸿祎</div>
</body>
</html>
如何不使用innerHTML呢?
.first()
.last()
.eq(0)
1.id选择器 $("#id名")
2.类选择器 $(".类选择器名")来访问相应的使用类样式的元素
3.标签选择器 $("标签名"),可以访问对应的标签元素
4.并集选择器:$("选择器1,选择器2,选择器3")以逗号隔开,和之前一样;
5.交集选择器$("p.hh")
7.后代选择器 $("a b")
8.子代(级)选择器 $("parent>child")
9.后继选择器 $("prev+next")
10.兄弟|同辈选择器 $("prev~sliblings")
之前在js代码有很多属性,比较长,jQuery为了简化这些长的属性,就封装成了一些函数|方法。
html()->innerHTML,会把下面的带有html标签的格式给原封不动的输出。
val()-->value
text()-->innerText只出来当前元素下的文本,不会出来html标签的格式.
css():设置当前元素的样式,语法:元素对象.css("属性名","值")
addClass():增加元素的样式,addClass("样式名")
removeClass():移除元素的样式,removeClass('样式名')
总结:
1.基本选择器,重点前3个;id 类样式 标签;其他了解即可。
2.层次选择器,重点子级选择器 后继选择器;
3.基本方法,html() size() css() addClass() removeClass()
4.1 计算器案例|购物车统计
4.2 表单验证案例
针对上次课有点复杂的选择器,或之前没有接触过的选择器。
为什么要反复的讲选择器,这个就是jQuery的要点,同CSS3,通过复杂的document.getElement(s)ById|ByTagName|ByClassName等等,这些方式,找页面的元素对象。同样,在jQuery里面,我们要操作页面对象还是需要找对象,找页面对象,就是通过各类的选择器来找,简化我们的业务代码量。
$("各类选择器")-->对象
$("各类选择器").操作
$("div").css('属性',"值)
$("#result").val(result)
$("#jia").click(function(){
//在这里我们可以若干操作的代码
})
基本过滤选择器 | ||
---|---|---|
符号 | 说明 | 用法 |
:eq(index) | index是从0开始的下一个数字,选择序号为index的元素.(选择第一个匹配的元素) | $("li:eq(1)").css("background","red") |
:gt(index) | index是从0开始的一个数字,选择序号大于index的元素 | $("li:gt(2)").css("background","red") |
:lt(index) | index是从0开始的一个数字,选择序号小于index的元素 | $("li:lt(2)").css("background","red") |
:odd | 选择所有序号为奇数行的元素 | $("li:odd").css("background","red") |
:even | 选择所有序号为偶数行的元素 | $("li:even").css("background","red") |
:first | 选择匹配第一个元素 | $("li:first").css("background","red") |
:Iast | 选择匹配的最后一个元素 | $("li:last").css("background","red") |
针对页面元素来说,元素的属性是什么???
<img src='/photo/mm0009098.jpg' title='第一美女'/>,这个里面src,title,是属性。
<a rel="nofollow" href='jd.com/ac?httml' class='hotsale'>热卖宝</a>
href class就是a标签的属性。
在jquery里面,使用[]来指定属性选择器,基本选择器[属性选择器]
属性选择器 | ||
---|---|---|
符号 | 说明 | 用法 |
$("a[href]") | 选择所有包含href属性的元素 | $("a[href]").css("background","red") |
$("a[href='luffy']") | 选择href属性值为luffy的所有a标签 | $("a[href='bilibili']").css("background","red") |
$("a[href!='baidu']") | 选择href属性不等于baidu的所有元素(包括没有href的元素) | $("a[href!='baidu']").css("background","red") |
$("a[href^='web']") | 选择所有以web开头的元素 | $("a[href^='web']").css("background","red") |
$("a[href$='cn']") | 选择所有以cn结尾的元素 | $("a[href$='cn']").css("background","red") |
$("a[href*='i']") | 选择所有包含i这个字符的元素,可以是中英文 | $("a[href*='i']").css("background","red") |
$(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^=user]').css('background','gray');
//匹配给定的属性是以包含某些值的元素
$('button[class*=btn]').css('background','red')
})
筛选选择器(通过方法调用) | ||
---|---|---|
符号 | 说明 | 用法 |
find(selector) | 查找指定元素的所有后代元素(包括子子孙孙) | $("#i_wrap").find("li").css("color","red"); 选择id为i_wrap的所有后代元素li |
children() | 查找指定元素的直接子元素(亲儿子元素) | $("#i_wrap").children("ul").css("color","red"); 选择id为i_wrap的所有子代元素ul |
siblings() | 查找所有兄弟元素(不包括自己) | $("#i_liItem").siblings().css("color","red"); 选择id为i_liItem的所有兄弟元素 |
parent() | 查找父元素(亲的) | $("#i_liItem").parent("ul").css("color","red"); 选择id为i_liItem的父元素 |
eq(index) | 查找指定元素的第index个元素,index是索引号,从0开始 | $("li").eq(2).css("color","red"); 选择所有li元素中的第二个 |
first() | ||
last() |
<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>
求同存异,利用之前的知识,迁移过来。判断的是表单的类型,注意,判断的是表单元素的类型,类型,类型。
名称 | 说明 | 解释 |
---|---|---|
$(:input) | 匹配所有 input, textarea, select 和 button 元素 | 查找所有的input元素: $(":input") |
$(:text) | 匹配所有的文本框 | 查找所有文本框: $(":text") |
$(:password) | 匹配所有密码框 | 查找所有密码框: $(":password") |
$(:radio) | 匹配所有单选按钮 | 查找所有单选按钮 |
$(:checkbox) | 匹配所有复选框 | 查找所有复选框: $(":checkbox") |
$(:submit) | 匹配所有提交按钮 | 查找所有提交按钮: $(":submit") |
$(:image) | 匹配所有图像域 | 匹配所有图像域: $(":image") |
$(:reset) | 匹配所有重置按钮 | 查找所有重置按钮: $(":reset") |
$(:button) | 匹配所有按钮 | 查找所有按钮: $(":button") |
$(:file) | 匹配所有文件域 | 查找所有文件域: $(":file") |
表单属性过滤器
语法 | 描述 | 示例 |
---|---|---|
:enabled | 匹配所有可用元素 | $(" #userform :enabled" )匹配form内部除编号输入框外的所有元素 |
:disabled | 匹配所有不可用元素 | $(" #userform :disabled" )匹配编号输入框 |
:checked | 匹配所有被选中元素(复选框、单项按钮、select 中的option) | $(" #userform :checked" )匹配“性别”中的“男”选项和“爱好”中的“编程”选项 |
:selected | 匹配所有选中的option 元素,单一的下拉框 | $(" #userform :selected" ) 匹配“家乡”中的“北京”选项;#userform是表单名,不是下拉框 |
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作
html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr()
DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。比如prop()、removeProp()
类样式操作:是指对DOM属性className进行添加,移除操作。比如addClass()、removeClass()、toggleClass()
值操作:是对DOM属性value进行读取和设置操作。比如html()、text()、val()
正则:
/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/ 账号最少4位
/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/; 密码
/^(13|15|18)\d{9}$/; 手机号
/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/; 邮箱
总结:
1.选择器重点讲了好几个,今天是表单选择器;
2.掌握如何针对某个选择器进行操作,规律:三个字总结:找 事 匿
3.jQuery链式操作
使用jQuery+正则表达式,对表单注册进行简单的验证。需要大家去复习正则表达式的使用 。
复习代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
//blur:焦点离开事件
$("#user").blur(function(){
//alert('aaaa');
//定义正则表达式reg =new RegExp("正则")
let reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;
let user=$("#user").val();
//正则.test(变量名)
//console.log(reg.test(user));
if(reg.test(user)){
$(this).next().html("√").css("color","green");
}else{//如果是false,不符合规则;
$(this).next().html("账户不符合规则,最少4位,以a-z|A-z,数字").css("color","red");
}
});
})
</script>
</head>
<body>
<form>
账户:<input type="text" name="user" id="user" /><span></span><br/>
密码:<input type="password" name="pwd" id="pwd" /><br/>
<button type="button">注册</button>
</form>
</body>
</html>
jQuery事件是对JavaScript事件的封装,分为基础事件和复合事件。
C#就是基于事件机制编程的语言。
事件的使用方法,三步骤:
务必记住:找事匿
1.找对象
2.定事件
3.匿名函数
当元素失去焦点时触发 blur 事件。
方法 | 描述 | 执行时机 |
---|---|---|
click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
mouseover( ) | 触发或将函数绑定到指定元素的mouseover事件 | 鼠标指针移过时 |
mouseout( ) | 触发或将函数绑定到指定元素的mouseout事件 | 鼠标指针移出时 |
当我们在键盘尚进行按键操作的时候,做出的响应事件。
方法 | 描述 | 执行时机 |
---|---|---|
keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
keypress( ) | 触发或将函数绑定到指定元素的keypress事件 | 按下并松开 |
fadeIn 淡入 用600毫秒缓慢的将段落淡入
速度参数:("slow","normal", or "fast")
fadeOut淡出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//选择器,on();之前写的是都是方法名(function(){})
//on("事件名",function(){})
//相当于把click,单击事件绑定到匿名函数了;
//选择器对象.on(事件名,function(){代码段})
$("#on").on("click",function(){
$("img").css("border","1px solid #f00");
})
//我现在在off按钮上写了一个click事件;
$("#off").click(function(){
//去除#on的绑定;
//选择器对象.off("事件名")
$("#on").off("click");
})
})
</script>
</head>
<body>
<img src="img/shijian.jpg"/>
<button id="on">绑定on事件</button>
<button id="off">去除绑定on事件</button>
</body>
</html>
复合事件,直觉应该是多个事件在一起的。
hover:一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//针对td元素做个hover事件的操作;
//hover(匿名函数):里面放了2个匿名函数,则先把两个匿名函数写出来;
$("td").hover(
//addClass/removeClass,也可以用.css(属性,值);
function(){$(this).addClass("hover")},
function(){$(this).removeClass("hover")}
);
})
</script>
<style>
table{border:1px solid #000;}
.hover{background-color: bisque;}
td{border: 1px solid #000;}
</style>
</head>
<body>
<table>
<tr>
<td>测试</td>
<td>测试2</td>
</tr>
</table>
</body>
</html>
用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
/*针对刚才的index.html做的js代码操作*/
//页面加载事件
$(function(){
//找元素,找导航下面的dt标签元素即可.
//针对这个元素做toggle操作
$(".nav dt").toggle(
//siblings():这个是dt后面的兄弟元素dd等;
//slideDown/slideUp
function(){$(this).siblings().slideDown("slow")},
function(){$(this).siblings().slideUp("slow")}
)
})
总结一下:
1.其中基础事件的鼠标和键盘事件比较简单,了解一下;
2.绑定事件,我们用的是最新的on事件,需要大家理解一下;
3.复合事件,第一个就是悬停事件实现了2个鼠标事件的操作,也就说不通过hover事件,也可以做出来hover效果。
toggle(),理解,使用jd案例,来测试一下即可。
概念:DOM 文档对象模型(必考),jQuery Dom应该是之前的DOM加了个jQuery的封装。
分类:DOM操作分为三类: DOM Core:任何一种支持DOM的编程语言都可以使用它,如getElementById(),js。 HTML-DOM:用于处理HTML文档,如document.forms CSS-DOM:用于操作CSS,如element.style.color="green"
jQuery对JavaScript中的DOM操作进行了封装。
jQuery中的DOM操作
之前的样式设置: 选择器对象.css('属性','值') 比如:
$("p").css("color",'red')
增加样式:
$("p").addClass('bgStyle')
toggle:模拟连续点击;
toggleClass:如果存在就删除一个类,如果不存在,则添加这个样式。
语法 | 功能 |
---|---|
append(content) | $(A).append(B)表示将子元素B追加到A中 |
prepend(content) | $(A). prepend (B)表示将子元素B前置插入到A中 |
before(content) | $(A). before (B)表示将B插入至A之前 |
after(content) | $(A).after (B)表示将B插入到A之后 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>追加节点</title>
<style>
@import url("css/games.css")
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//在按钮上单击的时候,进行操作;
$("#app").click(function(){
//操作的选择器对象是ul无序列表;
//后置:$(".gameList").append("<li>王者范.</li>")
//加到了ul的子元素li列表的后面;
//$(".gameList").prepend("<li>雨鑫战神</li>")
//before after
//before:在当前节点之前,增加一个元素,不属于当前节点。
//$(".gameList").before("<ul><li>海文泽拉斯</li></ul>")
$(".gameList").after("<ul><li>海文泽拉斯</li></ul>")
})
})
</script>
</head>
<body>
<div class="cont">
<ul class="gameList">
<li>三星老船长</li>
<li>艾泽拉斯</li>
<li>起拉希姆</li>
</ul>
</div>
<button id="app">追加</button><!--用一个按钮来做测试,更简单-->
</body>
</html>
选取的是比较重要的节点操作函数。
语法 | 功能 |
---|---|
remove() | 删除节点 |
empty() | 清空节点内容 |
replaceWith() | 替换节点 |
clone() | 复制节点 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作节点</title>
<style>
@import url("css/games.css")
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//在按钮上单击的时候,进行操作;
$("#app").click(function(){
//1.删除节点的操作;删除某个节点:现在要删除艾泽拉斯;
//$(".gameList li:eq(1)").remove();
//2.清空节点内容:是删除吗???相当于设置了html('')
// $(".gameList li:eq(1)").empty();
//3.replaceWith:需要注意一下;如果不成可以加$("<li>四星小船长</li>")
// $(".gameList li:eq(1)").replaceWith("<li>四星小船长</li>")
//4.克隆:clone(),我们使用的时候就不加参数了.
//首先$(".gameList li:eq(1)").clone():克隆;
//第二步:追加到$(".gameList")最后;
$(".gameList").prepend($(".gameList li:eq(1)").clone());
})
})
</script>
</head>
<body>
<div class="cont">
<ul class="gameList">
<li>三星老船长</li><!--li序号:0-->
<li><a rel="nofollow" href='#'>艾泽拉斯</a></li><!--li序号:1-->
<li>起拉希姆</li><!--li序号:2-->
</ul>
</div>
<button id="app">克隆</button><!--用一个按钮来做测试,更简单-->
</body>
</html>
首先要了解什么是属性节点。
<img src='图片路径' title='超级炫图片'/
src,title就是img的属性,在DOM里面就是属性节点。
语法 | 功能 |
---|---|
attr() | 获取属性节点 |
attr({name1:value1,..n,nameN:valueN}) | 设置属性节点的多个属性的值 |
removeAttr(属性名) | 删除指定的属性节点 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作节点</title>
<style>
@import url("css/games.css")
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//在按钮上单击的时候,进行操作;
$("#app").click(function(){
//来获取一下src,这个图片的路径信息;好处:可以得到路径信息,
//将来可以修改.
alert($("img").attr('src'));
//设置图片的路径信息;attr('属性','值')
//$("img").attr('src','img/2aa.jpg');
//升级:男变女了,加样式:
$("img").attr('src','img/2aa.jpg').addClass('mm');
//删除样式:这个需要在查看器来看一下。
$("img").removeAttr('title');
})
})
</script>
</head>
<body>
<div class="cont">
<img src="img/men.jpg" title="纯爷们"/>
<ul class="gameList">
<li>三星老船长</li><!--li序号:0-->
<li><a rel="nofollow" href='#'>艾泽拉斯</a></li><!--li序号:1-->
<li>起拉希姆</li><!--li序号:2-->
</ul>
</div>
<button id="app">属性节点的操作</button><!--用一个按钮来做测试,更简单-->
</body>
</html>
实际它属性节点的查找:
复习:first() last() sibings()都是查找;
语法 | 功能 |
---|---|
each() | 遍历节点 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>追加节点</title>
<style>
@import url("css/games.css")
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//在按钮上单击的时候,进行操作;
/* $("#app").click(function(){
//当我们在这个按钮上进行单击的时候,逐个获取li的信息内容
//然后打印输出;
//each的前面是需要逐个遍历的选择器对象;当前是li,所以:$("li")
$("li").each(function(){
let str=$(this).text();//text()注意;
//alert(str);
//变了:追加到span
$("span").append(str);
})
}) */
//each前面的选择器一定是有好几个的元素对象;
$("#app").click(function(){
//下面要遍历+-* /四个按钮,得到其内容;
$(".calc").each(function(){
alert($(this).text());//就可以根据得到+-*/来完善之前的计算器了;
// let op=$(this).text();
// switch(op){
// case '+':加操作;break;
}
})
})
})
</script>
</head>
<body>
<div class="cont">
<ul class="gameList">
<li>三星老船长</li>
<li>艾泽拉斯</li>
<li>起拉希姆</li>
</ul>
</div>
<span></span>
<button id="app">遍历按钮</button><!--用一个按钮来做测试,更简单-->
<button class="calc">+</button class="calc"><button>-</button>
<button class="calc">*</button><button class="calc">/</button>
</body>
</html>
总结:
1.toggleClass():有样式,则删除,没有则增加样式;
2.追加节点有4个,2个子元素街边;2个兄弟元素级别;
3.节点操作就是删除、清空、复制、替换(删改)
4.属性节点:attr() attr('name','name)
5.节点的遍历,注意使用:$("选择器").each()
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有