欢迎光临
我的个人博客网站

前端之jQuery


jQuery对象

jQuery对象是通过jQuery包装DOM对象后产生的对象

注意:jQuery对象只能使用jQuery里的方法,DOM对象只能使用DOM对象的方法

jQuery基础知识点

查找标签

基本选择器

  • id选择器: $(‘#id’)
  • 标签选择器:$(‘tagName’)
  • class选择器:$(“.className“)
  • 配合使用:$(“div.c1”)  //找到有c1的div标签
  • 所有元素选择器:$(“*”)
  • 组合选择器:$(“#id, .className, tagName”)

层级选择器:

  • $(“div span”);   //div标签下所有后代span标签(子标签 ,子子标签…)
  • $(“div > sapn”); //div标签下所有儿子span标签
  • $(“div + span”); //紧挨着div标签的第一span元素
  • $(“div~span”);   //div标签下所有兄弟元素span.

基本筛选器:

:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素,从 0 开始计数 :odd // 匹配所有索引值为奇数的元素,从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

//例子 $('ul li:first') S.fn.init [li, prevObject: S.fn.init(1)] $('ul li:gt(3)') S.fn.init(6) [li, li#l1, li, li.cl1, li, li, prevObject: S.fn.init(1)] $('ul li:has(#l1)') S.fn.init [prevObject: S.fn.init(1)]length: 0prevObject: S.fn.init [document]__proto__: Object(0) $('ul li:not(.cl1)') S.fn.init(9) [li, li, li, li, li, li#l1, li, li, li, prevObject: S.fn.init(1)] $('ul li:odd') S.fn.init(5) [li, li, li#l1, li.cl1, li, prevObject: S.fn.init(1)]

属性选择器:

  • [属性】
  • [属性名=value]     
  • [属性!=value]
//例子 $('[username]') S.fn.init(2) [input, input, prevObject: S.fn.init(1)] $('[username="hello"]') S.fn.init [input, prevObject: S.fn.init(1)]

表单筛选器:

:text :password :file :radio :checkbox  :submit :reset :button  //例子: $(":checkbox")  // 找到所有的checkbox  //表单对象属性: :enabled :disabled :checked :selected //例子 $("input:enabled")  // 找到可用的input标签 $(":selected")  // 找到所有被选中的option $(":checked")  // 会将checked和selected都拿到,一般使用的时候会加个 限制条件,如: $("input:selected")  //找到被选中的input标签

筛选器方法:

//下一个元素: $("#id").next()  $("#id").nextAll() $("#id").nextUntil("#d1")   //寻找下一个元素,直到#d1位置为止,不包括#d1标签  //上一个元素 $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2")    //寻找上一个元素,直到#d1位置为止,不包括#d1标签  //父元素 $("#id").parent() $("#id").parents()  // 查找当前元素的所有的父辈元素 $("#id").parentsUntil(".c1") // 查找当前元素的所有的父辈元素,直到遇到匹配的.c1元素为止。不包括.c1元素  //儿子和兄弟元素 $("#id").children();// 儿子 $("#id").siblings();// 兄弟

 

jQuery的一些方法:

  • $(“div”).find(“p”)   //查找div标签下的p标签   等价于$(“div p”)
  • $(“div”).filter(“.c1”)  //查找含有c1样式类的div标签。 等价于$(“div.c1)
  • $(“div”).first()
  • $(“div”).last()
  • $(“div”).not()
  • $(“div”).has()
  • $(“div”).eq()

 标签操作

样式操作

jQuery                             js addClass();                        classList.add() removeClass();                     classList.remove() hasClass();  //判断样式是否存在       classList.contains() toggleClass();//有则删去,无则添加    classList.toggle()

//例子 $("#d1").toggleClass('c1') S.fn.init [div#d1.c2] $("#d1").addClass('c1') S.fn.init [div#d1.c2.c1] $("#d1").toggleClass('c2') S.fn.init [div#d1.c1]

位置操作

  • offset()   获取匹配元素在当前窗口的相对偏移或这种元素位置
  • position()  获取匹配元素相对父元素的偏移
  • scrollTop()  获取匹配元素相对滚动条顶部的偏移
  • scrollLeft()  获取匹配元素相对滚动条左侧的偏移

尺寸:

  • height()         高度
  • widght()        宽度
  • innerHeight()     
  • innerWidth()  
  • outerHeght()      
  • outerWidth()

 

前端之jQuery

文本操作

//jQuery                           js text()                             innerText() html()                             innerHtml() //例子 $('div').text()     //获取标签文本 $('div').text('hello world')    //设置标签文本内容 $('div').html()    //获取标签html文本 $('div').html('<h1>hello world</h1>')  //设置html文本内容

取值操作

//jQuery                    js .val()                      .value() //例子: $('input').val()             //获取值 $('input').val('hello')      //设置值

//例子

S.fn.init [input#ip]
$(‘#ip’)[0]
<input type=​”file” id=​”ip”>​
$(‘#ip’)[0].files[0]   //$(‘#ip’)[0]先转化为原js对象,再用原js对象中files获取文件信息
File {name: “1.png”, lastModified: 1600868737120, lastModifiedDate: Wed Sep 23 2020 21:45:37 GMT+0800 (中国标准时间), webkitRelativePath: “”, size: 21844, …}
$(‘#ip’)[0].files
FileList {0: File, length: 1}0: File {name: “1.png”, lastModified: 1600868737120, lastModifiedDate: Wed Sep 23 2020 21:45:37 GMT+0800 (中国标准时间), webkitRelativePath: “”, size: 21844, …}length: 1__proto__: FileList

 属性操作

  //jQuery                           attr(属性)         //获取属性值                attr(属性,属性值)   //设置属性值 removeAttr(属性)  //删除属性 //对应的js操作方法 setAttribute() getAttribute() removeAttribute() //用于checkbox和radio prop()    //获取属性 removeProp()  //移除属性

//例子 let $pEle=$('#d1') undefined  $pEle.attr('username') "hello" $pEle.attr('username','hello world')  $pEle.attr('username') "hello world" $pEle.attr('value','11')  let $iEle=$('#d2')  $iEle.prop('checked') false $iEle.prop('checked') true
//attr所指的属性时HTML标签属性,而prop是指DOM对象属性

注意:对于标签上有的能够看到的属性和自定义属性用attr()方法

     对于返回布尔值比如checkbox,radion,option这三个标签是否被选中,用prop方法

文档操作

//js                    jQuery createElement('p')      $('<p>')   //创建新标签 appendChild()           append()  //追加新标签

//例子 let $pEle=$('<p>')  //创建p标签 undefined $pEle.text('你好 世界 ') S.fn.init [p] $pEle.attr('id','p2')  $('#d1').append($pEle)   //d1内部尾部追加p标签 S.fn.init [div#d1] $pEle.appendTo($('#d1')) S.fn.init [p#p2, prevObject: S.fn.init(1)]  $('#d3').prepend($pEle)  //内部头部追加 S.fn.init [div#d3] $pEle.prependTo($('#d3')) S.fn.init [p, prevObject: S.fn.init(1)]  $('#d3').after($pEle)   //放在id=d3的标签后面 S.fn.init [div#d3] $pEle.insertAfter($('#d3')) S.fn.init [p, prevObject: S.fn.init(1)]  $('#d3').before($pEle)  //放在id=d3的标签前面 S.fn.init [div#d3] $pEle.insertBefore($('#d3')) S.fn.init [p, prevObject: S.fn.init(1)]  $('#d1').remove()  //删除标签 S.fn.init [div#d1] $('#p1').empty()   //清空标签内容 S.fn.init {}

 事件

事件绑定方式:

//第一种 $('#d1').click(functino(){    alert('1');  }) //第二种

语法:.on( events [, selector(选择器) ],function(){})
$('#d1').on('click',function(){     alert('1') })
$('#d1').on('click',‘div',function(){     alert('1') })

注意:DOM定义的事件可以用 .on()方法来绑定事件,但是jQuery定义的事件就不可以

常用事件有:

  • click     点击
  • hover   鼠标悬浮在目标上面
  • blur      输入域失去焦点
  • focus    输入域获取焦点(点击input输入框)
  • change  改变,一般用在选择、勾选框
  • keyup     释放键盘上的按键时触发
  • keydown  按下按键时触发
  • input      用户输入时触发
前端之jQuery前端之jQuery

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>     <style>         .left{             width: 20%;             height: 800px;             display: block;             float: left;             background-color: grey;             position: fixed;         }         .menu{             font-size: 32px;             font-weight: bold;             text-align: center;             color: white;         }         .item{             color:whitesmoke;             font-size: 20px;             border: 3px solid red;         }         .hidden{             display: none;         }     </style> </head> <body>     <div class="left">         <div class="menu">菜单一             <div class="item ">学习</div>             <div class="item ">游戏</div>             <div class="item ">读书</div>         </div>         <div class="menu">菜单二             <div class="item ">学习</div>             <div class="item ">游戏</div>             <div class="item">读书</div>         </div>         <div class="menu">菜单三             <div class="item">学习</div>             <div class="item">游戏</div>             <div class="item">读书</div>         </div>     </div>     <script>         $('.menu').on('click',function () {             $('.item').addClass('hidden') //将所有的子菜单隐藏起来             $(this).children().removeClass('hidden')  //将选择的菜单下子菜单取消隐藏         })     </script> </body> </html>

左侧菜单

前端之jQuery前端之jQuery

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>     <style>         .cover{             position: fixed;             top:0px;             left: 0px;             right: 0px;             bottom: 0px;             background-color: black;             opacity: 0.4;             z-index: 99;         }         .modal{             top:50%;             left: 50%;             width: 600px;             height: 300px;             margin-top: -150px;             margin-left: -300px;             background-color: white;             position: fixed;             z-index: 100;         }         .hidden{             display: none;         }     </style> </head> <body>     <div>我是最底层</div>     <button id="d1">点击注册</button>     <div class="cover hidden" id="d2"></div>     <div class="modal hidden" id="d3">         <p>             usename:<input type="text">         </p>         <p>             password:<input type="text">         </p>         <input type="button" value="commit" >         <input type="button" value="quxiao" id="i1">     </div>     <script>         //注册         $('#d1').click(function () {             $('#d2').removeClass('hidden')             $('#d3').removeClass('hidden')         })         //取消注册         $('#i1').click(function () {             console.log(this)             $('#d2').addClass('hidden')             $('#d3').addClass('hidden')         })     </script> </body> </html>

模拟百度注册界面

前端之jQuery前端之jQuery

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>     <style>         span{             color:red;         }         p{             border: 3px solid blue;         }     </style> </head> <body>     <div>         user:<input id="i1" type="text">         <span></span>     </div>     <div>         password:<input id="i2" type="password">         <span></span>     </div>     <div>         <input id="b1" type="button" value="提交">         <input type="button" value="取消">     </div>     <p>hello world</p>     <script>         $('#b1').click(function () {             let user=$('#i1').val()             let password=$('#i2').val()             if(!user){                 $('span').first().text('用户名不能为空')             }             if(!password){                 $('span').last().text('密码不能为空')             }             $('input').focus(function () {                 $('span').first().text('')             })         })         //input事件         $('#i1').on('input',function () {             console.log(this.value)         })         //鼠标悬浮事件         $('p').hover(             function () {                 alert('我来了')         },function () {              })      </script> </body> </html>

模拟input、hover、click事件例子

前端之jQuery前端之jQuery

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>     <style>         #d1{             width: 100%;             height: 500px;             background-color: hotpink;         }         #d2{             width: 100%;             height: 500px;             background-color: greenyellow;         }         #d3{             width: 100%;             height: 500px;             background-color: deepskyblue;         }         #p1{             width: 100px;             height: 40px;             background-color: grey;             position: fixed;             right: 20px;             bottom: 20px;             text-align: center;             padding-top: 20px;             border-radius: 20%;             text-decoration: none; //去除a标签下的下划线         }         .hidden{             display: none;         }     </style> </head> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> <a id="p1" class="hidden" href="#d1">返回顶部</a> <script>     $(window).scroll(function () {         if($(window).scrollTop()>500){             $('#p1').removeClass('hidden')         }         else {             $('#p1').addClass('hidden')         }     }) </script>  </body> </html>

返回顶部

移除事件:把on改成off,就是移除 .on()绑定的事件

阻止后续事件执行:事件函数中添加   return false; (常用于阻止表单提交等)或者e.preventDefault()

阻止事件冒泡:添加e.stopPropagation()

页面载入

//当页面加载完触发: $(function(){ } /* 与js的window.onload的区别 1、window.onload()函数有覆盖现象,必须等待图片资源加载完才能调用 2、$(functino(){}不会出现覆盖,而且只要文档加载完毕就可以调用,不用等待图片资源加载 */

事件委托

利用父标签去捕获子标签的事件

前端之jQuery前端之jQuery

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>     <style>         td{             height: 20px;         }     </style> </head> <body>     <table border="solid">         <thead>             <th>增加</th>             <th>删除</th>         </thead>         <tbody>             <tr>                 <td class="add">11</td>                 <td class="delete">22</td>             </tr>         </tbody>     </table>      <div id="d1" value="hello">         hello         <p value="world">hello world</p>     </div>     <script>                  $("table").on("click", ".delete", function () {             console.log(this)             $(this).parent().remove()         })          $("table").on("click", ".add", function () {             $(this).parent().clone().insertAfter($('tbody'))         })         $('#d1').on('click','p',function () {             alert(this)             console.log(this)         })     </script> </body> </html>

事件委托、克隆例子表格操作

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 前端之jQuery
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏