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

最新推荐文章于 2022-10-15 18:38:41 发布

at小白在线中

最新推荐文章于 2022-10-15 18:38:41 发布

阅读量198

点赞数

分类专栏：前端培训文章标签： jquery javascript 前端

原文链接：http://www.atguigu.com

版权

前端培训专栏收录该内容

120 篇文章 3 订阅

订阅专栏

本文深入探讨了jQuery对象的创建与使用，包括选择器、层级选择器、筛选器和基本操作。详细介绍了如何通过jQuery进行元素查找、属性操作、事件绑定、样式和尺寸调整等，并提供了丰富的代码示例，帮助开发者掌握jQuery在实际开发中的应用。

摘要由CSDN通过智能技术生成

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                               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                           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 用户输入时触发

移除事件：把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

at小白在线中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发JS框架之jQuery的基础知识分享

jQuery对象jQuery对象是通过jQuery包装DOM对象后产生的对象注意：jQuery对象只能使用jQuery里的前端培训方法，DOM对象只能使用DOM对象的方法jQuery基础知识点查找标签基本选择器id选择器：$('#id') 标签选择器：$('tagName') class选择器：$(".className“）配合使用：$("div.c1") //找到有c1的div标签所有元素选择器：$("*") 组合选择器：$("#id, .className, tag
复制链接

扫一扫

专栏目录