4.JQuery
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了4.JQuery,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含13264字,纯文字阅读大概需要19分钟。
内容图文
![4.JQuery](/upload/InfoBanner/zyjiaocheng/1020/696f7904548548638e3a11c0ab57c22d.jpg)
第一章
1.了解jq
1.jQuery建议使用1.x版本,因为它兼容低版本的浏览器,使用1.x版本的min更好
2.jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
3.jQuery:The Write Less, Do More.
2.jq入口函数
1.jQuery的特点:写得少,做的多,效果好,支持链式编程.
2.JavaScript的入口函数
<script type="text/javascript">
// 完整写法
$(document).ready(function(){
......
});
// 简化写法 工作中常用的写法 $(匿名函数)
$(function(){
alert(2)
})
</script>
我们在之前的代码?直在使? $(function () {}); 这 段代码进??尾包裹,那么为什么必须 要包裹这段代码呢?
为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作,如果在文档没有完全加载之前就运行函数,操作可能失败
区别 | window.onload | $(document).ready() |
---|---|---|
执行时间 | 必须等待网页全部加载完毕(包括图片等),然后再执行包裹代码 | 只需要等待??中的 DOM结构加载完毕,就 能执?包裹的代码 |
执行次数 | 只能执??次,如果第?次,那么第?次的执?会被覆盖 | 可以执?多次,第N次 都不会覆盖上?次 |
简写方案 | 无 | $(function(){}) |
3.对比js和jq
1.原生js实现隐藏显示
window.onload = function(){
var oBtn = document.getElementById('btn')
var oBox = document.getElementById('box')
oBtn.onclick = function(){
oBox.style.display = 'none'
}
}
2.jQuery实现隐藏显示
#jQuery 中所有选择器都以美元符号开头:$()
$(function(){
// 查找到按钮绑定单击,查找div隐藏
// $(目标)==jq选择器:和css一样的选择器,jq自己新增的选择器
$('#btn').click(function(){
// $('div').hide(500)
// $('div').show(500)
$('div').toggle(500)
})
})
4.多个库间的冲突
jQuery 使用$符号作为 jQuery 的简写,如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办?
使用noConflict() 方法会释放对 $ 标识符的控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<script>
console.log($) //jQuery对象
jQuery.noConflict();
$.noConflict();
console.log($); //undefined
(function ($) {
console.log($) //jQuery对象
})(jQuery)
jQuery(document).ready(function ($) {
console.log($)//jQuery对象
})
JQuery(document)
</script>
</body>
</html>
5.jquery选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class='box'>
<p id='p1'>alex</p>
<ul>
<li class='item1'>张三</li>
<li class='item2'>李四</li>
<li class='item3'>王五</li>
</ul>
</div>
</body>
</html>
1.基础选择器
选择器 | 描述 | 返回 | 举例 |
---|---|---|---|
#id | 根据给定的 ID 匹配? 个元素 | 单个元素 | $(#p1) |
.class | 根据给定的类名匹配? 个元素 | 集合元素 | $(.box) |
element | 根据给定的元素名匹配 ?个元素(相当于 tagName ) | 集合元素 | $(ul) |
* | 匹配所有元素 | 集合元素 |
注意:我们可以采?jQuery核??带的?个属性length来查看返回的元素个数
2.层次选择器
选择器 | 描述 | 返 回 | 举例 |
---|---|---|---|
ancestor descendant(空格) | 选取相应的后代元素 | 集合元素 | $(div li) |
parent > child | 选取?元素 | 集合元素 | $(.box>ul>li) |
prev + next | 选取紧接在 prev 元素后?的下一个 元素 | 集合元素 | $(.item1+li) |
prev ~ siblings | 选取 prev 元素之后的所有siblings 元素 | 集合元素 | $(.item~li) |
3.过滤选择器
3.1基础选择器
选择器 | 描述 | 返回 | 举例 |
---|---|---|---|
:first | 选取第?个元素 | 单个元素 | $(“p:first”) |
:last | 选取最后?个元素 | 单个元素 | $(“p:last”) |
:not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $(“p:not(.intro)”) |
:even | 索引为偶数(索引从0开始) | 集合元素 | $(“tr:even”) |
:odd | 索引为奇数(索引从0开始) | 集合元素 | $(“tr:odd”) |
:eq(index) | 索引等于index 的元素 (index 从0开始) | 单个元素 | $(“ul li:eq(3)”) |
:gt(index) | 索引?于index | 集合元素 | $(“ul li:gt(3)”) |
:lt(index) | 索引?于index | 集合元素 | $(“ul li:lt(3)”) |
3.2内容选择器
选择器 | 描述 | 返回 | 举例 |
---|---|---|---|
:contains(text) | 查找?本中含有 “text” 的元 素 | 集合 元素 | $(‘ul li:contains(张三)’) |
:empty | 匹配所有不包含?元素或者?本的空元素 | 集合元素 | $(‘ul li:empty’) 注意:空格也是字符 |
:has(selector) | 含有选择器所匹配的元素 | 集合元素 | $(“div:has§”) |
:hidden | 选取所有不可?的元素 | 集合元素 | $(“p:hidden”) |
:visible | 选取所有可?的元素 | 集合元素 | $(“table:visible”) |
3.4属性选择器
选择器 | 描述 | 返回 | 示例 |
---|---|---|---|
[attribute] | 拥有此属性的元素 | 集合元素 | $("[href]") |
[attribute=value] | 属性的值为value的元素 | 集合元素 | $("[href=‘default.htm’]") |
[attribute!=value] | 属性的值 不为 value 的 元素 | 集合元素 | $("[href!=‘default.htm’]") |
[attribute^=value] | 属性的值 以 value 开始的元 素 | 集合元素 | $("[title^=‘Tom’]") |
3.5 子元素选择器
选择器 | 描述 | 返 回 | 举例 |
---|---|---|---|
:nth-child(index) | 选取每个?元素下的第 index 个?元素或者奇偶元素(index 从1开始) | 集合元素 | $(“p:nth-child(2)”) |
:first-child | 选取每个?元素第?个?元素 | 集合元素 | $(“p:first-child”) |
:last-child | 选取每个?元素最后?个?元素 | 集合元素 | $(“p:last-child”) |
:only-child | 如果某个元素是它?元素中唯? 的?元素,则会被匹配 | 集合元素 | $(“p:only-child”) |
3.6表单选择器
选择器 | 描述 | 返回 | 举例 |
---|---|---|---|
:enabled | 选取所有可?元素 | 集合元素 | $(":enabled") |
:disable | 选取所有不可?元素 | 集合元素 | $(":disabled") |
:checked | 选取所有被选中元素(复选框,单选框) | 集合元素 | $(":checked") |
:selected | 选取所有被选中元素(下拉列表) | 集合元素 | $(":selected") |
选择器 | 描述 | 返回 | 举例 |
---|---|---|---|
:input | 选取所有的 | 集合元素 | $(":input") |
:text | 选择所有单??本框 | 集合元素 | $(":text") |
:password | 选择所有的密码框 | 集合元素 | $(":password") |
:radio | 选择所有的单选框 | 集合元素 | $(":radio") |
:checkout | 选择所有的多选框 | 集合元素 | $(":checkbox") |
:submit | 选择所有的提交按钮 | 集合元素 | $(":submit") |
:image | 选择所有的图像按钮 | 集合元素 | $(":image") |
:reset | 选择所有的重置按钮 | 集合元素 | $(":reset") |
:button | 选择所有的按钮 | 集合元素 | $(":button") |
3.7 jQuery选择器完善的处理机制
1.如果元素不存在时,jQuery是不会报错的,但是原生的js是会报错的
2.$(#ID) 或者其他选择器获取的永远是对象,即使??上没有此元素.使? jQuery 检查某个元素是否存在要不能使?
if($('#box')){
//dosomething
}
?是根据元素是否有?度判断:
if($('#box').length>0 ){ //dosomething }
或者转化为DOM元素来判断
if($('#box')[0]){ //dosomething }
6.jQuery的DOM操作
1.HTMLDOM操作
1.1插入节点
方法 | 描述 | 示例 |
---|---|---|
append() | 向每个匹配的元素内部追加内容 | $(A).append(B)将B追加到A中 |
appendTo() | 将所有匹配内部的元素追加到指定元素 | $(B).appendTo(A)将B追加到A中 |
prepend() | 在被选元素内部的开头插入指定内容 | $(A).prepend(B) 将B插?到A前? |
prependTo() | 在被选元素内部的开头插入HTML元素 | $(B).prependTo(A)将B插?到A前? |
after() | 在每个匹配的元素外部之后插?内容 | $(A).after(B) 将B插?到A后? |
insertAfter() | 将所有匹配的元素插?到指定元素外部的后? | $(B).insertAfter(A) 将B插?到A后 |
before() | 在每个匹配的元素外部之前插内容 | $(A).before(B) 将B插?在A的前? |
insertBefore() | 将所有匹配的元素插?到指定元素外部的前? | $(B).insertBefore(A) 将 B插?在A的前? |
1.2删除节点
方法 | 描述 | 示例 |
---|---|---|
remove | 移除元素,但不保留数据和事件 | $(“p”).remove(".italic"); |
detach | 如需移除元素,但保留数据和事件 | $(“p”).detach() |
empty | 删除被选元素的子元素。 | $("#div1").empty(); |
1.3 设置和查询
方法 | 描述 | 示例 |
---|---|---|
html() | 获取设置html内容 | $("#test2").html(“Hello world!”) |
text() | 获取设置文本内容 | $("#test1").text(“Hello world!”) |
val() | 读取或设置表单元素的内容 | $("#test3").val(“RUNOOB”) |
attr() | 获取设置属性(对于 HTML 元素本身就带有的固有属性) | |
prop | 获取设置属性(对于 HTML 元素我们自己自定义的 DOM 属性) |
1.4 遍历
祖先
方法名 | 描述 | 举例 |
---|---|---|
parent() | 获得集合中每个元素的?级元素 | $(“span”).parent(); |
parents() | 获得集合中每个元素的祖先元素 | ( " s p a n " ) . p a r e n t s ( " u l " ) ; < b r > ("span").parents("ul");<br> ("span").parents("ul");<br>(“span”).parentsUntil(“div”); |
后代
方法名 | 描述 | 举例 |
---|---|---|
children() | 获得匹配元素的?元素的集合(?元素?后代元素) | ( " d i v " ) . c h i l d r e n ( ) ; < b r > ("div").children();<br> ("div").children();<br>(“div”).children(“p.1”); |
find() | find() 方法返回被选元素的后代元素,一路向下直到最后一个后代 | $(“div”).find(“span”); |
同胞
方法名 | 描述 | 举例 |
---|---|---|
siblings() | 获得匹配元素前后?紧邻的同辈元元素 | $(“h2”).siblings(“p”) |
next() | 返回被选元素的下一个同胞元素 | $(“h2”).next() |
nextAll() | 返回被选元素的所有跟随的同胞元素 | $(“h2”).nextAll() |
nextUntil() | 返回介于两个给定参数之间的所有跟随的同胞元素 | $(“h2”).nextUntil(“h6”) |
prev() | ||
prevAll() | ||
prevUntil() |
过滤
方法名 | 描述 | 举例 |
---|---|---|
first() | 返回被选元素的首个元素 | $(“div p”).first() |
last() | 返回被选元素的最后一个元素 | $(“div p”).last() |
eq() | 返回被选元素中带有指定索引号的元素 | $(“p”).eq(1); |
filter() | 不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回 | $(“p”).filter(".url"); |
not() | 返回不匹配标准的所有元素 not() 方法与 filter() 相反 | $(“p”).not(".url"); |
其他
方法名 | 描述 | 举例 |
---|---|---|
replaceWith(*content,*function(index)) | 将所有匹配的元素替换成指定 的HTML或DOM元素 | $(“p:first”).replaceWith(“Hello world!”) |
replaceAll(selector) | ?匹配的元素替换掉所有 selector匹配到的元素 | $("<span> <b>Hello world! </b></span>").replaceAll("p:last"); |
wrap() | 把所有匹配的元素?其他元素 的结构化标记包裹起来 | $(“p”).wrap(" ") |
unwrap() | 这个?法将移出元素的?元素 | $(“p”).wrap(" ") |
removeAttr() | 删除?档中某个元素的特定属 性 | $(“p”).removeAttr(“style”); |
1.5 复制节点
复制节点可以使? clone() ?法
$("ul li").click(function(){
$(this).clone().appendTo("ul");
})
但是这样复制的节点,被复制的新元素并不具有任何? 为,如果需要新元素也具有相同的?为,那么就需要在 clone() ?法中传?参数 true
$("ul li").click(function(){
$(this).clone(true).appendTo("ul");
})
2.CSSDOM操作
1.基本操作
方法名 | 描述 | 举例 |
---|---|---|
css() | 设置或返回样式属性 | |
addClass() | 添加 class 属性 | $(“body div:first”).addClass(“important blue”); |
removeClass() | 删除指定的 class 属性 | $(“h1,h2,p”).removeClass(“blue”); |
toggleClass() | 对被选元素进行添加/删除类的切换操作 | $(“h1,h2,p”).toggleClass(“blue”) |
hasClass() | 是否含有某个类,返回布尔值 |
2.尺寸
方法名 | 描述 | 举例 |
---|---|---|
width | 设置或返回元素的宽度 | $("#div1").width() |
height() | 设置或返回元素的高度 | $("#div1").height() |
innerWidth() | 返回元素的宽度(包括内边距) | $("#div1").innerWidth() |
innerWidth() | 返回元素的宽度(包括内边距) | $("#div1").innerWidth() |
outerWidth() | 返回元素的宽度(包括内边距和边框) | $("#div1").outerWidth() |
outerHeight() | 返回元素的高度(包括内边距和边框) | $("#div1").outerHeight() |
7.JQuery中的事件
1.常用事件
1.鼠标事件
方法名 | 描述 | 举例 |
---|---|---|
click | 当单击元素时,发生 click 事件 | $(“p”).click(function(){ alert(“段落被点击了。”); }); |
dblclick | 当双击元素时,触发 dblclick 事件。 | |
mouseenter | 当鼠标指针穿过(进入)被选元素时,会发生 mouseenter 事件 | $(“p”).mouseenter(function(){ $(“p”).css(“background-color”,“yellow”); }); |
mouseleave | 当鼠标指针离开被选元素时,会发生 mouseleave 事件 | $(“p”).mouseleave(function(){ $(“p”).css(“background-color”,“gray”); }); |
hover() | 规定当鼠标指针悬停在被选元素上时要运行的两个函数 | $(“p”).hover(function(){ $(“p”).css(“background-color”,“yellow”); },function(){ $(“p”).css(“background-color”,“pink”); }) |
2.键盘事件
方法名 | 描述 | 举例 |
---|---|---|
keypress | 键被按下(eypress 事件不会触发所有的键 (比如 ALT、CTRL、SHIFT、ESC)) keydown() 方法来检查这些键 | $(“input”).keypress(function(){ $(“span”).text(i+=1); }); |
keydown | 键按下的过程 | $(“input”).keydown(function(){ $(“input”).css(“background-color”,“yellow”); }) |
keyup | 键被松开 | $(“input”).keyup(function(){ $(“input”).css(“background-color”,“pink”); }) |
表单事件
方法名 | 描述 | 举例 |
---|---|---|
submit() | 当提交表单时,会发生 submit 事件 | $(“form”).submit(function(){ alert(“提交”); }); |
change() | 会在元素失去焦点时发生 | $(“input”).change(function(){ alert(“文本已被修改”); }) |
focus() | 当元素获得焦点时发生 focus 事件 | $(“input”).focus(function(){ $(“span”).css(“display”,“inline”).fadeOut(2000); }); |
blur() | 当元素失去焦点时发生 blur 事件 | $(“input”).blur(function(){ alert(“输入框失去了焦点”); }); |
文档事件
方法名 | 描述 | 举例 |
---|---|---|
load() | 当图像全部加载时警报文本 | $(“img”).load(function(){ alert(“图片已载入”); }); |
resize() | 当调整浏览器窗口大小时 | $(window).resize(function(){ $(‘span’).text(x+=1); }); |
scroll() | 当用户滚动指定的元素时 | $(“div”).scroll(function(){ $(“span”).text(x+=1); }); |
unload() | 当离开页面时,显示提示消息 | $(window).unload(function(){ alert(“Goodbye!”); }); |
2.事件冒泡
问题:
假设??上有两个元素,其中?个嵌套在另?个元素??,并且都被绑定了 click 事件.同时 元素上也 绑定了 click 事件,这样的话,点击最内层的元素,会触发三次 click 事件.这是因为 JavaScript 的事件冒泡机制。
解决方案:
方法名 | 描述 | 举例 |
---|---|---|
event.stopPropagation() | 阻止事件冒泡到父元素,阻止任何父事件处理程序被执行 | event.stopPropagation() |
event.isPropagationStopped() | 检查 event.stopPropagation() 是否被调用 | event.isPropagationStopped() |
3.阻止默认事件
问题:
??中有??的默认?为,例如单击超链接会跳转,单击“提交”按钮后表单会提交,有时需要阻?默认?为
方法名 | 描述 | 举例 |
---|---|---|
event.preventDefault() | 阻止元素发生默认的行为 | event.stopPropagation() |
vent.isDefaultPrevented() | 检查 preventDefault() 是否被调用 | event.isPropagationStopped() |
4.其他事件
方法名 | 描述 | 举例 |
---|---|---|
event.type | 获取到事件的类型 | event.type |
event…target() | 获取到触发事件的元素 | event.target.nodeName |
event.relatedTarget() | mousover 和 mouseout 所发?的元素 | |
event.pageX event.pageY | 获取到光标相对于??的 x 坐标和 y 坐标 | event.pageX |
event.which() | ?标单击事件中获取到的 左,中,右键,在键盘事件 中获取键盘的按键 | |
event.metaKey() | 为键盘事件获取 meta 键(win健)是否按下 | |
one() | 对于只要触发?次,随后要?即解除绑定的情况,jQuery 提供了one()?法. 当处理函数触发?次后,?即被删除 | $(“p”).one(“click”,function(){}) |
on() | 在被选元素及子元素上添加一个或多个事件处理程序(使用 on() 方法添加的事件处理程序适用于当前及未来的元素) | $(“p”).on(“click”,function(){ alert(“段落被点击了。”) |
off | 移除通过 on() 方法添加的事件处理程序 | $(“p”).off(“click”); |
8.动画
1.隐藏和显示
方法名 | 说明 | 举例 |
---|---|---|
hide() | 隐藏 HTML元素 | $(“p”).hide(1000); |
show() | 显示 HTML元素 | $(“p”).show(); |
toggle() | toggle() 方法来切换 hide() 和 show() 方法 | $(“p”).toggle(); |
2. 淡入淡出
方法名 | 说明 | 举例 |
---|---|---|
fadeIn() | 淡入 | $("#div1").fadeIn(); |
fadeOut() | 淡出 | $("#div1").fadeOut(); |
fadeToggle() | 在 fadeIn() 与 fadeOut() 方法之间进行切换 | $("#div1").fadeToggle() |
fadeTo() | 允许渐变为给定的不透明度 | $("#div1").fadeTo(“slow”,0.15); |
3.滑动
方法名 | 说明 | 举例 |
---|---|---|
slideUp() | slideUp() 方法用于向上滑动元素 | $("#panel").slideDown(); |
slideDown() | slideDown() 方法用于向下滑动元素 | $("#panel").slideUp(); |
slideToggle() | slideDown() 与 slideUp() 方法之间进行切换 | $("#panel").slideToggle(); |
4.动画
方法名 | 说明 | 举例 |
---|---|---|
animate() | 创建自定义动画(**注意:**操作所有 CSS 属性必须使用 Camel 标记法书写所有的属性名) | $(“div”).animate({left:‘250px’}); |
stop() | 停止动画或效果 | $("#panel").stop(); |
5.回调函数
参照菜鸟教程
6.链
参照菜鸟教程
内容总结
以上是互联网集市为您收集整理的4.JQuery全部内容,希望文章能够帮你解决4.JQuery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。