写点什么

前端开发 JS 框架之 jQuery 的基础知识分享

  • 2021 年 12 月 07 日
  • 本文字数:4030 字

    阅读完需:约 13 分钟

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
复制代码


属性选择器:

  • [属性】

  • [属性名=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                               jsaddClass();                          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                           jstext()                             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].filesFileList {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
复制代码


属性操作

//jQueryattr(属性)         //获取属性值attr(属性,属性值)   //设置属性值removeAttr(属性)  //删除属性//对应的js操作方法setAttribute()getAttribute()removeAttribute()//用于checkbox和radioprop()    //获取属性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                    jQuerycreateElement('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 用户输入时触发

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

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

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

页面载入

 
复制代码


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


事件委托

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <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>
复制代码


原创作者:NQ31

用户头像

关注尚硅谷,轻松学IT 2021.11.23 加入

还未添加个人简介

评论

发布
暂无评论
前端开发JS框架之jQuery的基础知识分享