• jQuery(一)


    一、简述:

      1、jQuery内部封装了原生JS的代码,通过jQuery的语法可以用更少的代码实现功能,另外jQuery还是有原生JS没有的额外功能。

      2、像jQuery这种前端框架也叫“类库”,类似于python中的模块,所以使用前也必须先导入,但是jQuery本身只有几十kb,所以导入jQuery所花的时间微乎其微,可以通过本地文件和网络url两种方式导入。

      3、jQuery可以兼容目前绝大度数浏览器。

      4、write less do more:是jQuery的宗旨,用更少的代码完成更多功能。

      5、jQuery的基本语法:jQuery(选择器).操作/属性(),为了简化书写,可以用“$”代替“jQuery”,即,jQuery() ===> $()。

    二、查找标签:通过jQuery语法查找到的标签是jQuery对象。

      1、基本选择器:

        ① $('#d1'):id选择器,id = d1的标签。

        ② $('.c1'):class选择器,继承了class = c1的标签。

        ③$('div'):标签选择器,所有div标签。

        ④$('*'):通用选择器,所有标签。

      2、jQuery对象与标签对象的转换:

        ①$('#d1')[0] ===> jQuery对象转标签对象。

        ②$(document.getElementById('d1')) ===> 标签对象转jQuery对象。

      3、组合/并列/关系选择器:

        ①$('div.c1'):继承了class = c1的div标签。

        ②$('span, #d1, div.c1'):并列选择器。

        ③$('#d1 p'):后代选择器,id = d1的标签的嵌套内的所有p标签。

        ④$('#d1>span'):儿子选择器,id = d1的标签的首级嵌套的所有span标签。

        ⑤$('#d1+p'):毗邻选择器,id = d1的标签的同级紧靠的下个p标签。

        ⑥$('#d1~span'):弟弟选择器,id = d1的标签的同级所有下方span标签。

      4、基本筛选器:$(':条件'),冒号左侧是待选标签,右边是筛选条件。

        ①$('#d1>span:first'):第一个。

        ②$('#d1>span:last'):最后一个。

        ③$('#d1>span:eq(2)'):2号索引。

        ④$('#d1>span:even'):偶数号索引,0开始。

        ⑤$('#d1>span:odd'):奇数号索引,1开始。、

        ⑥$('#d1>span:gt(2)'):大于2号索引,即3号索引开始到最后。

        ⑦$('#d1>span:lt(5)'):从开头开始,到小于5号索引,即4号索引为止。

        ⑧$('#d1>span:not("#d2")'):除了id = d2的标签。

        ⑨$('div:has("p")'):再从中选出嵌套内有p标签的div标签。

      5、属性选择器:

        ①$('[title]'):有“title”属性的所有标签。

        ②$('[title = "xxx"]'):有“title”属性,且属性值为"xxx"的所有标签。

        ③$('div[title = "xxx"]'):有“title”属性,且属性值为"xxx"的所有div标签

      6、表单筛选器:

        ①表单中的标签,用属性选择器匹配筛选条件时,可以不写属性名,如,$('input[type="text"]') ===> $(':text')。

        ②特别说明:用“checked”属性去匹配,会同时把满足“selected”的标签也拿到,而反之不兼容,若只想拿"checked"的标签,可以写完整---$('input:checked')。

      7、筛选器方法

        ①$('#d1').next():同级紧靠的下一个。

        ②$('#d1').nextAll():同级下方所有。

        ③$('#d1').nextUntil('#d2'):同级向下一直收入,直到d2之前。

        ④$('#d1').prev():同级紧靠的上一个。

        ⑤$('#d1').prevAll():同级上方所有。

        ⑥$('#d1').prevUntil('#d2'):同级向上一直收入,直到d2之前。

        ⑦$('#d1').parent():父标签。

        ⑧$('#d1').parent().parent():父标签的父标签。

        ⑨$('#d1').parents():一脉上的所有父标签。

        ⑩$('#d1').parentsUntil('#d2'):一脉上向上收入父标签,直到d2之前。

        ①①:$('#d1').children():所有儿子标签。

        ①②:$('#d1').siblings():所有同级标签,无论上下。

        ①③:$('#d1').find('p'):嵌套内的所有p标签,效果等于$('#d1 p'),类似的还有.first()和.last()和.not()等。

        

  • 相关阅读:
    基于I2C总线的MPU6050学习笔记
    基于I2C总线的0.96寸OLED显示屏驱动
    I2C总线协议的软件模拟实现方法
    I2C总线通讯协议
    Exynos4412从SD卡启动的简单网络文件系统制作
    多版本 PHP 环境下,使用指定版本运行composer
    腾讯云服务器 lnmp 开启 MySQL 远程访问权限
    MySQL添加新用户和新增权限
    Laravel 框架创建软链接
    Git 保存登录凭证
  • 原文地址:https://www.cnblogs.com/caoyu080202201/p/12920798.html
Copyright © 2020-2023  润新知