jQuery

最新推荐文章于 2022-11-16 10:54:32 发布

sunv_lx

最新推荐文章于 2022-11-16 10:54:32 发布

阅读量214

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/sunv_lx/article/details/78987554

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery

1. jQuery是什么

        --> 写项目都用这个
        2. jQuery短小精悍
        write less，do more
        是一个别人写好的类库（模块），我们直接在页面上引用这个类库（模块），就可以直接使用类库里面定义好的方法

2. jQuery怎么用

     1. 引用jQuery文件
            两种方式：
            1. 本地文件
                <script src="jquery-3.2.1.min.js"></script>
                <script>按照jQuery的规则写代码</script>
            2. CDN方式
                <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
                <script>按照jQuery的规则写代码</script>
       2. jQuery版本
            3.x
            jQuery.js
            jQuery.min.js
     3. jQuery使用
        3.1 查找标签
           ①基本查找   $("条件都写在这里")

        1. ID查找     -> $("#ID值")
        2. class查找 -> $(".class名字")
        3. 标签查找   -> $("标签名")
        4. *          -> $("*")
        5. 结合来用   -> $("div.c1") $("p.c2")

        6. 组合查询   -> $("条件1,条件2") $("div,p")

② 层级查找

        1. 后代选择器 -> $("x y")
        2. 儿子选择器 -> $("x>y")
        3. 弟弟选择器 -> $("x~y")

        4. 毗邻选择器 -> $("x+y")

选择器补充：
       - 属性选择器
           - $("[egon]")
           - $("[type='text']")
           - $("input[type!='submit']")

③ 筛选器

1.基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

2. 表单筛选器
           :text
           :password
           :...

           :enable
           :disable

           :checked
           :selected

④ 筛选器方法

        1. 下一个（同级的标签/弟弟标签）
            - next()
            - nextAll()
            - nextUntil(“终止条件”) (不包含终止条件)
        2. 上一个（同级的标签/姐姐标签）
            - prev()
            - prevAll()
            - prevUntil(“终止条件”) (不包含终止条件)
        3. 父标签系列

            - parent()

            - parents()
            - parentsUntil(终止条件) 不包含



            .children()
           .siblings()
           $("").find()

            $("").first()

             .last()

    3.2 修改标签的样式
               原生JS:
                 获取样式类： classList
                 添加样式类名 classList.add(.cls)
                 移除样式类名 classList.remove(.cls)
3.2. 操作标签
    1. 样式操作
        1. addClass
        2. removeClass
        3. toggleClass
    2. CSS操作
       1. $("").css("color", "red")    --> .css({"color": "red", "border": "1px solid black"})
    3. 位置
        position
            1. fixed
            2. relative   --> 相对位置，相对自己原来应该在的位置
            3. absolute   --> 绝对位置，相对上一级相对定位过的父标签
            4. static

        jQuery
            offset 获取相对当前窗口的偏移 {top: xx, left: xxx}
            position 相当于已经定位父标签的偏移 {top:xx, left:xx}

            offset({top: xx,left:xx}) --> 可以设置标签相对当前窗口的偏移

- scrollTop() 返回顶部示例
- scrollLeft()

    4. 尺寸 (CSS盒子模型)
        height()
        width()
        innerHeight()
        innerWidth()
        outerHeight()
        outerWidth()
    5. 文本操作
        DOM:
            innerHTML
            innerText
        jQuery：
            .html()
            .text()

    6. 属性操作
        val()        input、多选的select
            *****取值是默认取第一个匹配元素的值*****
            *****设置值是设置所有的标签的值*****
用于checkbox 和radio

prop() // 获取属性
removeProp() // 移除属性

用于ID等或自定义属性：

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

补充：each循环

- each循环
    1. $.each()
    2. $("").each()
			
	- 注意：this具体指的是谁（进入循环的当前对象）
	- return false 后面的时间或函数不执行
	- 如果一个jQuery查找的对象被多次用到，我们可以用变量把它保存起来，减少重复查找

1. 文档操作

       各种添加
       1. 内部添加（子标签）
           往前添加 prepend
           往后添加 append
       2. 外部添加（同级）
           往后添加after
           往前添加before

       3.清空和删除
           1. remove()
           2. empty() --> 把子标签删除

        4. 替换
           A.replaceWith(B) --> B替换A
           A.replaceAll(B)   --> A替换所有的B
        5. 克隆
           注意参数：true，加上true表示标签和事件都复制

2. 常用事件和事件绑定

       按键按下事件 --> 批量操作
       1. 常用事件
           click()

           blur()
           focus()
           change()
           keyup()
           keydown()

           hover() --> 我们不一样（实际是鼠标移上去和移出来两个事件）

       2. 事件的绑定
           .on() 分两种情况
               1. 普通绑定事件
                   .on("具体的事件", function(){...})
               2. 当绑定事件时，触发事件的标签还不存在时，应该使用事件委托
                   .on("具体的事件", "筛选条件", function(){...})
       3. 事件的移除
           .off()

       4. 页面加载完之后执行
           $("document").ready(function(){
              // 绑定事件的代码
           })
           $(function(){...})

       5. 阻止后续事件的执行
           return false

           阻止表单提交示例
       事件委托
           原理：利用事件冒泡--> 父标签捕获事件->处理事件
           $("已经存在的标签").on("事件", "选择器", function(){...})

3 .each()循环

       分两种情况
           1. $.each(循环的对象, function(i,v){...})

           2. $().each(function(){...})

       return false --> 跳出循环                     --> 类似于 break

       return        --> 跳出本次循环，进入下一次循环 --> 类似于 continue

4. 动画效果

       1. 显示隐藏
       .show()
       .hide()
       .toggle()

       2. 滑动(遮阳板)
           左侧菜单
           .slideUp()
           .slideDown()
           .slideToggle()

       3. 淡入淡出
           .fadeIn()
           .fadeOut()
           .fadeTo()
           .fadeToggle()

       4. animate({"width": "+=50px"}, 1000)

5 .data()方法

       .data("k1", "v1")   保存任意数据
       .data（"k1"）       获取k1对应的数据
       .removeData("k1")   清除k1对应的数据
       .removeData()       清除所有数据

       示例：
           table增删改查

6、 jQuery扩展

       给jQuery扩展方法
       $.extend({
          funcName: function(){...},
       })

       给jQuery对象扩展方法
       $.fn.extend({
          funcName: function(){...},
       })

       用到的JS知识点
           1. JS中变量作用域由谁控制的？ --> 函数外部访问不到函数内部的变量

           2. 匿名函数
               function(){...}
           3. 自执行函数
               (function(arg){...})(arg);

       示例：
           自定义登录校验插件

7.Ajax

sunv_lx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery1. jQuery是什么 --> 写项目都用这个 2. jQuery短小精悍 write less，do more 是一个别人写好的类库（模块），我们直接在页面上引用这个类库（模块），就可以直接使用类库里面定义好的方法 2. jQuery怎么用 1. 引用
复制链接

扫一扫