CoderZQYのBlog

个人不定期更新的学习周报

0%

javaweb——jQuery

发表于 更新于 分类于

jQuery笔记

1、JQuery介绍

  • JQuery是JavaScript和查询（Query），它就是辅助JS开发的类库
  • 核心思想：写得少做的多，所以它解决了很多浏览器的兼容问题
  • 流行程度：是目前最流行的JS库
  • 优点：免费、开源，语法设计使开发更便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

2、导入jquery-3.5.1.js

我是通过官网点击下载后进入到一个全是代码的页面，将其全选复制到我本地的文件，然后通过

1
<script type="text/javascript" src="路径名/jquery-3.5.1.js"></script>

导入即可

3、给按钮绑定点击事件的示例

1
2
3
4
5
6
$(function () { //表示页面加载完成之后，相当于window.onload  = function(){}
    var $btnObj = $('#btnId');//表示按id查询标签对象
    $btnObj.click(function () { //绑定点击事件
        alert('jquery的单击事件')
    })
})

4、常见问题

  • 使用jQuery一定要引入jQuery库吗？ 答：是
  • jQuery的 $ 到底是什么？ 答：定义的一个函数
  • 怎么给按钮绑定响应函数？ 答：1、使用jQuery查询到标签对象；2、使用标签对象.click(function(){});

5、jQuery的核心函数（$）

  1. 传入参数为函数时：表示页面加载完成之后，相当于window.onload() = function(){}
  2. 传入参数为 [HTML 字符串]时：会帮我们创建这个HTML对象
  3. 传入参数为 [选择器字符串]时：会根据对应的id、标签名、类型选择器进行查询
    • $(“#id属性值”); id选择器，根据id查询标签对象
    • $(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
    • $(“.class 属性值”); 类选择器，根据class属性查询标签对象
  4. 传入参数为 [DOM 对象]时：会把这个DOM对象转化为jQuery对象

6、jQuery对象和Dom对象区分

  1. Dom对象是通过getElementById()、getElementByName()、getElementByTagName()、createElement()方法创建的对象

    • Dom对象alert()出来的结果是：[object HTML 标签名 Element]

    jQuery对象是通过jQuery包装的Dom对象，是提供的API创建的对象、查询到的对象

    • jQuery对象alert()出来的结果是：[object Object]

  2. jQuery的本质：jQuery对象是一个Dom数组 + jQuery提供的一系列功能函数

  3. 二者使用区别：jQuery对象不能使用Dom对象的属性和方法、Dom对象也不能使用jQuery的属性和方法

  4. 二者的互转：

    • Dom —> jQuery对象：$( Dom对象 )
    • jQuery —> Dom对象： jQuery[下标]，取出对应的Dom对象

7、基本选择器

  1. #id 选择器：根据id查找
  2. .class 选择器：根据class查找
  3. element选择器：根据标签名查找
  4. *选择器：表示全部元素
  5. selector1，selector2 组合选择器：合并选择器1、2的结果返回

8、层级选择器

  1. ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素
  2. parent > child 子元素选择器：在给定的父元素下匹配所有的后代元素
  3. prev + next 相邻元素选择器：匹配所有紧接在 prev元素之后的 next元素
  4. prev ~ siblings 之后的兄弟元素选择器：匹配 prev元素之后的所有 siblings元素

9、过滤选择器（学会使用文档，即用即查）

  1. 基本过滤选择器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    :first  		获取第一个元素，查到的结果仍然是jQuery对象
    :last   		获取最后一个元素
    :not(selector)  查找所有未选中的input元素
    :even   		查找索引值为偶数的元素：查找表格1、3、5、...行（即索引值为0、2、4、...）
    :odd    		同上，奇数
    :eq(index)  	匹配第一个给定索引值的元素（从0开始计数）
    :gt(index)  	匹配所有大于给定索引值的元素（从0开始计数）
    :lt(index)  	同上，小于
    :header 		匹配如h1、h2、h3之类的标题元素
    :animated   	匹配所有正在执行动画效果的元素

  2. 内容过滤器：

    1
    2
    3
    4
    :contains(text) 匹配所有给定文本的元素
    :empty  		匹配所有不包含子元素或者文本的空元素
    :parent 		匹配含有子元素或者文本的元素
    :has(selector)  匹配含有选择器所匹配的元素的元素

  3. 属性过滤器

    1
    2
    3
    4
    5
    6
    7
    [attribute] 			匹配包含给定属性的元素
    [attribute = value]  	匹配给定的元素是某个特定的值
    [attribute != value]    匹配不含有指定的属性，或者属性不等于特定值的元素
    [attribute ^= value]    匹配给定的属性是以某些值开始的元素
    [attribute $= value]    匹配给定的属性是以某些值结尾的元素
    [attribute *= value]    匹配给定的属性是以包含某些值的元素
    [selector 1][selector 2][selector N]    复合属性选择器，需要同时满足多个条件时使用

  4. 表单过滤器

    1
    2
    3
    4
    5
    :input		匹配所有input、textarea、select和button元素
    :text		匹配所有的单行文本框
    :password	匹配所有密码框
    :radio		匹配所有单选按钮
    ...

    表单对象属性过滤器

    1
    2
    3
    4
    :enabled	匹配所有可用的元素
    :disabled	匹配所有不可用的元素
    :checked	匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
    :selected	匹配所有选中的option元素

    10、元素的筛选

1
2
3
4
5
6
7
eq()    	获取给定索引的元素
first() 	获取第一个元素
last()  	获取最后一个元素
filter(exp) 留下匹配的元素
is()		判断是否匹配给定的选择器，只要有一个匹配就返回
find(exp)		返回匹配给定选择器的后代元素
...

11、jQuery属性操作

1
2
3
4
5
html()  可以设置和获取起始标签和结束标签之间的内容。和dom属性innerHTML一样
text()  可以设置和获取起始标签和结束标签之间的文本。和dom属性innerText一样
val()   可以设置和获取表单项的value属性值。和dom属性value一样，val方法还可以同时设置多个表单项的选中状态
attr() 	可以设置和获取属性（不推荐操作checked、readOnly、selected、disabled等），还可以操作用户自定义的属性
prop()	可以设置和获取属性（推荐操作上述固有属性）

12、DOM的增删改

  1. 内部插入
    • appendTo()，a.appendTo(b)：把a插入到b子元素末尾，成为最后一个子元素
    • prependTo()，a.prependTo()：把a插入到b子元素前面，成为第一个子元素
  2. 外部插入
    • insertAfter()，a.insertAfter(b)：得到ba
    • insertBefore()，a.insertBefore(b)：得到ab
  3. 替换
    • replaceWith()，a.replaceWith(b)：用b替换a
    • replaceAll()，a.replaceAll(b)：用a替换掉所有的b
  4. 删除
    • remove()，a.remove()：删除a标签
    • empty()，a.empty()：清空a标签的内容

13、CSS样式操作

  1. addClass()：添加样式
  2. removeClass()：删除样式
  3. toggleClass()：有就删除，没有就添加样式
  4. offset()：获取和设置元素的坐标

14、jQuery动画操作

  1. 基本动画

    • show()：将隐藏的元素显示
    • hide()：将可见的元素隐藏
    • toggle()：可见就隐藏，隐藏就显示

    以上动画方法都可以添加参数

    • 第一个参数：执行的时长，毫秒为单位
    • 第二个参数：回调函数，动画完成后自动调用的函数

  2. 淡入淡出动画

    • fadeIn()：淡入
    • fadeOut()：淡出
    • fadeTo()：在指定时长内慢慢地将透明度修改到指定值（0透明，1完全可见，0.5半透明）
    • fadeToggle()：淡入/淡出切换

15、jQuery事件操作

  1. $(function(){});和window.onload=function(){}的区别？

    1. 它们分别是在什么时候触发？
      • jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象后立即执行
      • 原生js的页面加载完成之后，除了等浏览器的内核解析完页面的标签创建好DOM对象，还要等标签显示时需要的内容加载完成
    2. 它们触发的顺序？
      • jQuery页面加载完成后先执行
      • 原生js的页面加载完成后再执行
    3. 它们执行的次数？，
      • 原生js的页面加载完成之后，只会执行最后一次的赋值函数
      • jQuery的页面加载完成之后，把注册的function函数依次顺序执行

  2. jQuery中其他的事件处理方法

    1
    2
    3
    4
    5
    6
    7
    click()		绑定单击事件和触发单击事件
    mouseover()	鼠标移入事件	
    mouseout()	鼠标移出事件
    bind()		可以给元素一次性绑定一个或多个事件
    one()		使用上和bind()一样，但是one()方法绑定的事件只会响应一次
    unbind()	解除事件绑定
    live()		也是绑定事件，可以用来绑定选择器匹配的所有元素的事件，即使这个元素是后面动态创建出来的（现官方推荐使用on）

  3. 事件的冒泡

    • 指父子元素同时监听一个事件，当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里

    • 如何阻止事件冒泡？在子元素事件函数体内，使用return false;

  4. 事件对象的获取

    • 原生javascript获取事件对象

      1
      2
      3
      4
      5
      window.onload = function(){
      	document.getElementById("_").onclick = function(event){
      		console.log(event);
      	}
      }

    • jQuery代码获取事件对象

      1
      2
      3
      4
      5
      $(function (){
      	$("#_").click(function (event){
      		console.log(event);
      	})
      });

    • 使用bind同时把多个事件绑定到同一个函数，通过event获取当前操作是什么事件

-------------本文结束感谢您的阅读-------------