前端知识之jQuery

最新推荐文章于 2024-01-09 07:30:00 发布

意大利面拌42号混凝土

最新推荐文章于 2024-01-09 07:30:00 发布

阅读量1.5k

点赞数

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

本文链接：https://blog.csdn.net/prigilm/article/details/121127429

版权

本文详细介绍了jQuery，包括其优势、内容、版本、导入方式及核心语法。重点讲解了jQuery的选择器，如基本选择器、组合选择器、筛选器等，以及如何操作DOM，如CSS样式、事件绑定、动画效果。此外，还探讨了jQuery对象与原生DOM对象的转换和解决JavaScript中$与jQuery的$冲突问题。

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

jQuery

文章目录

- jQuery

一、什么是jQuery

jQuery内部封装了原生jS, jQuery类似于python里面的模块, 在前端jQuery是一个提供了额外功能的框架又或者说类库. 
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

二、jQuery的优势

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

三、jQuery的内容

选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax(重点)

下载链接：jQuery官网

中文文档：jQuery AP中文文档

四、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，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

补充: 维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

五、jQuery的两种导入方式

jQuery在使用的时候也需要导入, 但是它的文件非常的小(几十KB) 基本不影响网络速度. 压缩过的大概80KB左右, 未压缩的大概240KB左右

# 1. 将文件下载到本地直接导入(压缩: jquery-3.5.1.min . 未压缩: jquery-3.5.1)
    好处: 没有网也可以正常使用
    坏处: 需要重复书写，文件路径还要固定
        pycharm自定义代码模块功能 自动添加固定的代码: settings->editor->file and code template
        
# 2. CDN服务
    CDN的概念: 内容分发网络
    参考网站: bootcdn. 前端相关的应用程序都有免费的cdn服务(提示: CDN有免费的也有收费的)

    好处: 无需下载对应的文件，直接走网络请求使用
    坏处: 必须要有网络
    
    引入: <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

bootcdn网址: 你最好看

六、jQuery语法

提示: jQuery在使用之前一定要确保已经导入了

jQuery(selector).action()
    秉持着jQuery的宗旨 jQuery简写成 $ 
    简写: $(selector).action()

# jQuery与js代码对比
// 例子: 将p标签内部的文本颜色改为红色
// 原生js代码操作标签
    let pEle = document.getElementById('d1')
    pEle.style.color = 'red'

// jQuery操作标签
$('p').css('color','blue')

七. jQuery对象与标签对象之间的转换

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

相当于： document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法

$('div')[0] jq对象转标签对象
$(divEle)   标签对象转jq对象

总结

# jq功能: jQuery内部封装了原生的js代码(还额外添加了很多的功能), 能够让你通过书写更少的代码 完成js操作. 类jQuery似于python里面的模块  在前端模块不叫模块  叫 “类库”

# jq宗旨: write less do more
    
# jq版本: 1xx, 2xx, 3xx 其中2xx,3xx不兼容IE678, 这里我们使用jQuery的时候就不需要考虑浏览器兼容问题. 因为IE678基本上被淘汰了.
    
# jq2种导入模式:
    1. 将jq文件下载本地
    2. 直接引用提供jq的CDN服务. 例如: 免费的bootcdn
    补充: 借助pycharm提供的js文件模板实现每次创建文件默认帮我们导入jq.

# jq基本语法:
    jQuery(选择器).action()
    简写: $(选择器).action()

# jq对象与标签对象之间的转换:
    $('div')[0] jq对象转标签对象
    $(divEle)   标签对象转jq对象

九、查找标签

1、基本选择器

<!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>
</head>
<body>
<div id="d1">div
    <span>div>span</span>
    <p>div>p
        <span>div>p>span</span>
    </p>
</div>
<p class="c1">p</p>
<span>span</span>

<script>
    /*一. 基本选择器: id选择器, 类选择器, 元素(标签)选择器, 通配符选择器*/
    console.log($('#d1'));   // id选择器
    console.log($('.c1'));    // 类选择器
    console.log($('span'));   // 元素(标签)选择器
    console.log($('*'));   // 通配符选择器

    /*二. jQuery对象与标签对象之见的转化*/
    // 注意!!: 虽然它们类型都是对象类型, 但是DOM操作出来的对象由DOM类生成, 由jQuery操作出来的对象由jQuery类生成. 两者之间是由不同的类创建, 所以不同的对象调用的方法只能是实例化自己类里面的.
    let divELe = document.getElementById('d1');
    console.log(typeof divELe);    // object
    console.log(typeof $('#d1'));  // object

    console.log($('#d1')[0]);  // jQuery对象变成标签对象
    console.log($(divELe));     // 标签对象转jQuery对象


    // 总结
    /*
    jQuery基本选择器:
        id选择器: $('#d1');
        类选择器: $('.d1');
        元素(标签)选择器: $('span');

    jQuery对象与标签对象之间的转换:
        jQuery对象变成标签对象: 索引取值
            $('#d1')[0];
        标签对象转jQuery对象: 使用jQuery类包含
            $(divEle);
    */
</script>
</body>
</html>

2、组合选择器/分组嵌套

<!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>
</head>
<body>
<span>span</span>
<span>span</span>
<div id="d1">div
    <span>div>span</span>
    <p id="d2">div>p
        <span>div>p>span</span>
    </p>
    <span>div>span</span>
</div>
<div class="c1">div</div>
<span>span</span>
<span>span</span>

<script>
    /*一. 组合选择器: 后代选择器, 子代选择器, 毗邻选择器, 弟弟选择器*/
    console.log($('div span'));  // 后代选择器
    /*
    S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]
    0: span
    1: span
    2: span
    length: 3
    prevObject: S.fn.init [document]
    __proto__: Object(0)
    */

    console.log($('div>span'));  // 子代选择器
    /*
    S.fn.init(2) [span, span, prevObject: S.fn.init(1)]
    0: span
    1: span
    length: 2
    prevObject: S.fn.init [document]
    __proto__: Object(0)
    */

    console.log($('div+span'));  // 毗邻选择器
    /*
    S.fn.init [span, prevObject: S.fn.init(1)]
    0: span
    length: 1
    prevObject: S.fn.init [document]
    __proto__: Object(0)
    */

    console.log($('div~span'));  // 弟弟选择器
    /*
    S.fn.init(2) [span, span, prevObject: S.fn.init(1)]
    0: span
    1: span
    length: 2
    prevObject: S.fn.init [document]
    __proto__: Object(0)
    */

    /*二. 分组与嵌套*/
    console.log($('div,p'));  // 分组
    /*
    S.fn.init(3) [div#d1, p#d2, div.c1, prevObject: S.fn.init(1)]
    0: div#d1
    1: p#d2
    2: div.c1
    length: 3
    prevObject: S.fn.init [document]
    __proto__: Object(0)
    */

    console.log($('#d1,p'));  // 嵌套
    /*
    S.fn.init(2) [div#d1, p#d2, prevObject: S.fn.init(1)]
    0: div#d1
    1: p#d2
    length: 2
    prevObject: S.fn.init [document]
    __proto__: Object(0)
    */


    // 总结
    /*
    组合选择器:
        后代选择器: $('div span');
        子代选择器: $('div>span');
        毗邻选择器: $('div+span');
        弟弟选择器: $('div~span');

    分组与嵌套:
        分组: $('div,span');
        嵌套: $('#d1,span');
    */
</script>
</body>
</html>

3、基本筛选器

<!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>
</head>
<body>
<ul>
    <li>101</li>
    <li>102</li>
    <li>103</li>
    <li>104</li>
    <li>105</li>
    <li>106</li>
    <li class="c1">107</li>
    <li>108</li>
    <li id="d1">109</li>
    <li>110</li>
</ul>

<div>div
    <p>div>p</p>
    <span>div>span</span>
</div>
<div>div
    <a href="">div>a</a>
</div>

<script>
    console.log($('ul li'));

    console.log($('ul li:first'));  // 大儿子
    console.log($('ul li:last'));   // 小儿子

    console.log($('ul li:even'));  // 偶数索引 0包含在内
    console.log($('ul li:odd'));   // 奇数索引

    console.log($('ul li:eq(1)'));  // 等于索引(放索引)
    console.log($('ul li:gt(2)'));  // 大于索引
    console.log($('ul li:lt(2)'));  // 小于索引

    console.log($('ul li:not("#d1")'));  // 排除满足条件的标签,要剩下来的所有
    console.log($('div:has("p")'));    // 选取出包含一个或多个标签在内的标签


    // 总结
    /*
    注意: 都是冒号:起手
    :first :last
    :even  :odd
    :eq(index) :gt(index) :lt(index)
    :not("") :has("")
    */
</script>
</div>
</body>
</html>

4、属性选择器

<!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>
</head>
<body>
<input type="text" username="jason">
<input type="text" username="egon">
<p username="egon"></p>

<script>
    console.log($('[username]'));
    console.log($('[username="egon"]'));
    console.log($('p[username="egon"]'));
</script>
</body>
</html>

5、表单筛选器

<!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>
</head>
<body>
<form action="">
    <p>username:<input type="text"></p>
    <p>password:<input type="password"></p>
    <input type="checkbox" value="111">111
    <input type="checkbox" value="111" checked>222
    <input type="checkbox" value="111">333

    <select name="" id="">
        <option value="">111</option>
        <option value="">222</option>
        <option value="" selected>333</option>
    </select>

    <input type="button" value="按钮">

    <input type="text" readonly>
</form>

<script>
    console.log($('[type="text"]'));
    console.log($(':text'));  // 与上面等价

    console.log($(':password'));

    /*特殊情况*/
    // :checked: 它会将checked和selected都拿到
    // :selected: 它不会 只拿selected
    console.log($(':checked'));
    console.log($(':selected'));

    console.log($('input:checked'));

最低0.47元/天解锁文章

意大利面拌42号混凝土

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端知识之jQuery

jQuery文章目录jQuery一、什么是jQuery二、jQuery的优势三、jQuery的内容四、jQuery的版本五、jQuery的两种导入方式六、jQuery语法七. jQuery对象与标签对象之间的转换九、查找标签1、基本选择器2、组合选择器/分组嵌套3、基本筛选器4、属性选择器5、表单筛选器6、筛选器方法7、总结十、操作标签1、CSS 类操作2、CSS样式操作3、位置操作4、尺寸5、文本操作6、值操作7、属性操作8、文档操作9、总结十一、事件1、jQuery绑定事件的两种方式2、克隆事件3、自
复制链接

扫一扫