jQuery

两大特点：

  • 链式编程：比如.show()和.html()可以连写成.show().html()。
  • 隐式迭代：隐式对应的是显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

jQuery的简介

jQuery 是 js 的一个库，封装了开发过程中常用的一些功能，方便开发人员调用，提高开发效率。

jQuery 的导入

从官网复制相应的版本到本地js文件中，使用script标签将本地的jQuery包导入即可，导包的代码一定要放在js代码的最上面。如下：

<script src="jQuery的路径"></script>

jQuery 的入口函数和 # 符号

入口函数

原生js的入口函数

# 原生js的入口函数

windows.onload = function(){}

jQuery入口函数

方式一：文档加载完毕，无图片加载时，可执行此函数

$(document).ready(function () {

           alert(1);

       })

方式二：方式一的简写版

$(function () {

           alert(1);

       });

方式三：文档和图片都加载完毕时，可执行此函数

$(window).ready(function () {

           alert(1);

       })

jQuery入口函数与js入口函数的区别：

区别一：书写个数不同：

  • Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
  • jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

  • Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
  • jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

jQuery的$ 符号

jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

<script src="jQuery_Library_v3.4.1.js"></script>

<script>

        console.log($);

        console.log(jQuery);

        console.log($===jQuery);

</script>

从打印结果来看，$就是jQuery。

jQuery的选择器

jQuery的选择器包括：基本选择器、层级选择器、属性选择器

基本选择器

选择器 描述 选择器 描述
$("#id") id选择器 $(".className") class选择器
$("tagName") 标签选择器 $("div.c1") 交集选择器
$("*") 通用选择器 $("#id,.className,tagName") 并集选择器 
<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>div{float: left;}</style>

</head>

<body>

    <div></div>

    <div id="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div></div>

</body>

<script type="text/javascript" src="jQuery_Library_v3.4.1.js"></script>

<script type="text/javascript" >

    $(function () {

        // 三种获取jQuery对象的方式

        var jqBox1 = $("#box");

        var jqBox2 = $(".box");

        var jqBox3 = $("div");

        // 操作标签选职器

        jqBox3.css('width','100');

        jqBox3.css('height',100);

        jqBox3.css('background-color','gray');

        jqBox3.css('margin-top',10);

        //操作类选择器（隐式迭代，不需要一个一个设置）

        jqBox2.css('background-color','tomato');

        jqBox2.text('ha~la~');

        // 操作id选择器

        jqBox1.css('background-color','pink')

    })

</script>

层级选择器

选择器 描述
$("x y") x所有的后代y（子代）
$("x>y") x所有的孩子
$("x+y") 紧挨在x后面的y
$("x~y") x之后的所有兄弟y 
<body>

<ul>

    <li>11</li>

    <li>22</li>

    <li>33</li>

    <ol>

        <li>Aa</li>

        <li>Bb</li>

        <li>Cc</li>

    </ol>

</ul>

</body>

<script src="jQuery_Library_v3.4.1.js"></script>

<script>

    $(function () {

        // 后代设置

        var jqLi = $('ul li');

        jqLi.css('margin',5);

        jqLi.css('background','pink');

        // 孩子

        var jqOtherLi = $('ul>li');

        jqOtherLi.css('background','tomato');

    })

</script>

属性选择器

属性选择器的样式比较多样，主要围绕标签的属性展开

选择器 描述
$('[属性名]') 必须是含有某属性的标签
$('a[属性名]') 含有某属性的a标签
$('选择器[属性名]') 含有某属性的符合前面选择器的标签
$('选择器[属性名="aaaa"]') 属性名=aaa的符合选择器要求标签
$('选择器[属性名$="xxx"]') 属性值以xxx结尾的
$('选择器[属性名^="xxx"]') 属性值以xxx开头的
$('选择器[属性名*="xxx"]') 属性值包含xxx
$('选择器[属性名1][属性名2="xxx]') 拥有属性1,且属性二的值='xxx',符合前面选择器要求的 
    <body>

         <div id="box">

            <h2 class="title">属性选择器</h2>

            <!--<p class="p1">我是一个段落</p>-->

            <ul>

                <li id="li1">1122</li>

                <li class="what" id="li2">2233</li>

                <li class="what">3344/li>

                <li class="heihei">4455</li>

            </ul>

            <form action="" method="post">

                <input name="username" type='text' value="1" checked="checked" />

                <input name="username1111" type='text' value="1" />

                <input name="username2222" type='text' value="1" />

                <input name="username3333" type='text' value="1" />

                <button class="btn-default">按钮1</button>

                <button class="btn-info">按钮2</button>

                <button class="btn-success">按钮3</button>

                <button class="btn-danger">按钮4</button>

            </form>

        </div>

    </body>

    <script src="jQuery_Library_v3.4.1.js"></script>

    <script type="text/javascript">

        $(function(){

            //标签名[属性名] 查找所有含有id属性的该标签名的元素

            $('li[id]').css('color','red');

            //匹配给定的属性是what值得元素

            $('li[class=what]').css('font-size','30px');

            //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素

            $('li[class!=what]').css('font-size','50px');

            //匹配给定的属性是以某些值开始的元素

            $('input[name^=username]').css('background','gray');

            //匹配给定的属性是以某些值结尾的元素

            $('input[name$=222]').css('background','greenyellow');

            //匹配给定的属性是以包含某些值的元素

            $('button[class*=btn]').css('background','red')

        })

    </script>

jQuery的筛选器

基本筛选器

$('选择器:筛选器')

$('选择器:first')

作用于选择器选择出来的结果：

first      找第一个

last       最后一个

eq(index)  通过索引找

even       找偶数索引

odd        找奇数索引

gt(index)  大于某索引的

lt(index)  小于某索引的

not(选择器) 不含 符合选择器 要求的

has(选择器) 后代中含有该选择器要求的(找的不是后代,找的是本身)

表单筛选器

// type筛选器

$(':text')

$(':password')

$(':radio')

$(':checkbox')

$(':file')

$(':submit')

$(':reset')

$(':button')

注意 : date type的input是找不到的

// 状态筛选器

:enabled

:disabled

:checked

:selected

筛选器方法

找兄弟 :

$('ul p').siblings()

找哥哥

$('ul p').prev()             找上一个哥哥

$('ul p').prevAll()          找所有哥哥

$('ul p').prevUntil('选择器') 找哥哥到某一个地方就停了，不包含条件中的哥哥

找弟弟 : next()  nextAll()   nextUntil('选择器')

找祖辈 : parent()  parents()   parentsUntil('选择器')

找儿子 : children()

包含条件的查找到的对象不包含条件本身对象


筛选方法

first()

last()

eq(index)

not('选择器')   去掉满足选择器条件的

filter('选择器')交集选择器,在所有的结果中继续找满足选择器要求的

find('选择器')  后代选择器 找所有结果中符合选择器要求的后代

has('选择器')   通过后代关系找当代 后代中有符合选择器要求的就把当代的留下

jQuery I的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  3. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  7. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  8. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

  9. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  10. 浅谈 jQuery 核心架构设计

    jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...

随机推荐

  1. calc() 函数

      定义与用法 calc() 函数用于动态计算长度值. 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进行计 ...

  2. shell遍历多个文件夹并进行批量修改文件名

    问题:将图片名中的ing_变为0. 当前目录下:$ ls pic,change_name.sh pic/ |__kk1/ |__img_001.jpg |__img_002.jpg |__vv2/ | ...

  3. hive中的 lateral view

    lateral view用于和split, explode等UDTF一起使用,它能够将一列数据拆成多行数据,在此基础上可以对拆分后的数据进行聚合. 一个简单的例子,假设我们有一张表pageAds,它有 ...

  4. vue3.0以上关于打包后出现空白页和路由不起作用

    1.解决页面空白,找不到资源 在项目根目录中的vue.config.js中publicPath: '/'修改为publicPath: './',如果没有这个文件,新建一个,基础代码为: module. ...

  5. MongoDB——增删改查

    文档结构: { "_id": ObjectId("5d5e5de597eb2f0b70005d1a"), , "word_records": ...

  6. 【Winfrom-Panel】Panel隐藏与显示，自动隐藏菜单， Auto-Hide Menu

    设计界面:2个button,一个panel 当鼠标移动到btnHome时,显示menuPanel 当鼠标离开btnHome时,隐藏menuPanel 当btnPin箭头向左时,menuPanel为自动 ...

  7. Trying to get property 'art_id' of non-object

    “Trying to get property 'art_id' of non-object”     正在尝试获取非对象的“art-id”属性. 我之前也是这么写的没出问题<td>{{$ ...

  8. Golang ioutil.ReadDir 读取目录下的内容并排序

    之前写的https://www.cnblogs.com/pu369/p/10620731.html一文中,也有对slice的排序,但代码乱的自己也看不下去了. 参考https://blog.csdn. ...

  9. 通过PCI9030向外部RAM写数据失败现象

    我们的系统方案是:以9030作为PCI接口芯片,本地端映射了一片IDT70V06的双端口RAM.进行数据传输压力测试时,发现PC机向IDT70V06写数据偶尔会失败.这一问题是什么原因造成的呢? 最初 ...

  10. AcWing：172. 立体推箱子（bfs）

    立体推箱子是一个风靡世界的小游戏. 游戏地图是一个N行M列的矩阵,每个位置可能是硬地(用”.”表示).易碎地面(用”E”表示).禁地(用”#”表示).起点(用”X”表示)或终点(用”O”表示). 你的 ...