当前位置: 主页 > 网站建设 > JQuery知识点

JQuery知识点

时间:2022-01-09 来源:未知网络 作者:996建站网

$() 方法

  • 在 DOM 操作中,基本都是从获取元素
  • jQuery 中封装了一个更加强大的获取元素方法 $()

$() 方法

  • 在 jQuery 中,只有一个全局变量 $,这是 jQuery 的一大特点,避免了全局变量的污染。
  • 最开始变量不叫做 $,叫做 jQuery() 方法,在库中两个名字是并存的,都可以使用。
  • 经典错误:$ 未定义

jQuery 对象

  • $() 方法获取到的内容叫做 jQuery 对象
  • 内部封装了大量的属性和方法,比如 .css() 和 .html() 和 .animate() 等方法都是jQuery 对象的方法。
  • 通过 $() 获取的元素是一组元素,进行操作时是批量操作

jQuery 对象和原生 js 对象

  • jQuery 对象得到后,只能使用 jQuery 对象的方法,不能使用原生 js 元素对象的方法。
  • 原生 JS 对象也不能使用 jQuery 的方法。
  • jQuery 对象实际是一个类数组对象,内部包含所有的获取的原生 js 对象,以及大量的jQuery 的方法和属性
  • jQuery 对象中原生 js 对象的个数
  • $().length
  • $().size()
  • 互相转换
  • jQuery 转原生:直接利用数组下标方式,得到 jQuery 封装的原生对象。
  • 原生转 jQuery:将原生对象用 $() 方法包裹即可

筛选选择器

  • 也叫过滤选择器,jQuery 中新增的自己的选择器。
  • 用法:在基础选择器后面增加一些筛选的单词,筛选出前面选择器的选中内容中一部分。或者可以作为高级选择器的一部分。
  • 常用:
  • $(":first") 第一个
  • $(":last") 最后一个
  • $(":eq(index)") 下标为 index 的项
  • $(":gt(index)") 大于下标为 index 的项
  • $(":lt(index)") 小于下标为 index 的项
  • $(":odd") 下标为奇数的项
  • $(":even") 下标为偶数的项
  • $(":not(selector)") 去除所有与给定选择器匹配的元素

筛选方法

  • 也叫过滤方法,jQuery 中除了用选择器选择元素,jQuery 对象内还封装了一些对应的筛选方法。
  • 常用:
  • $("p").first()
  • $("p").last()
  • $("p").eq(3)

常用jq方法jQuery 操作标签的内容html() 方法

  • html() 方法相当于原生 JS 中的 innerHTML 属性,用来获取或设置标签内部内容。方法可以传递一个参数,自定义的字符串内容。
  • 获取:文本和内部标签,获取的时候只能获取第一个元素内部的文案
  • 语法:jQuery对象.html();
  • 设置:若设置标签时,标签会被渲染,如果内部的字符串包含了标签的语法的字符串,会按照html语法进行加载
  • 语法:jQuery对象.html('文本内容');

text() 方法

  • text() 方法相当于原生 JS 中的 innerText 属性,用来获取或设置标签内部文字。
  • 获取:仅仅是文本,所有的文本,不是只有第一个标签的
  • 语法:jQuery对象.text();
  • 设置:若设置标签时,标签会被当做普通文本
  • 语法:jQuery对象.text('文本内容');

val() 方法

  • val() 方法相当于原生 JS 中的 value 属性,用来获取或设置表单元素内容。
  • 获取:表单元素的 value,获取的是第一个
  • 语法:jQuery对象.val();
  • 设置:表单元素的value,设置的是所有
  • 语法:jQuery对象.val('文本内容')

jQuery 操作标签的属性attr() 方法

  • attr:全称 attribute,属性的意思。
  • 作用:用来获取或者设置标签的属性值。
  • 设置标签的属性
  • 语法:jQuery对象.attr(name,value);
  • 获取标签属性值
  • 语法:jQuery对象.attr(name);

removeAttr() 方法

  • 作用:移除标签的属性
  • 语法:removeAttr(name)

prop() 方法

  • 针对:selected、checked、disabled 等表单元素的属性。此类属性的属性值与属性名相同。直接操作的就是boolean值
  • 获取
  • 语法:$('input').prop('属性名');
  • 设置
  • 语法:$('input').prop('属性名',值);

jQuery 操作样式方法css() 方法

  • jQuery 对象有一个 css() 的方法,用于调用 css 属性值或者更改 css 属性值。
  • 语法:jQuery对象.css(name,value);
  • 参数1:字符串格式的 css 样式属性名
  • 参数2:设置或更改的属性值。
  • 注意
  • 一个参数:表示调用 css 属性的值,得到的是某个元素的计算后样式,值为字符串格式。
  • 两个参数:表示设置 css 样式属性,第二个参数可以是字符串格式的属性值,如果带单位的数字的属性值,可以写成带单位的字符串格式、不带单位的字符串、纯数字、带 += 等赋值运算的字符串。
  • css() 方法的第一个参数,复合属性的单一属性写法可以是驼峰命名法,也可以是横线写法。
  • 可以给同一个对象同时设置多条 css 属性,将多条属性的属性和属性值写成对象格式,传给 css()的参数。

jQuery 操作类名方法addClass() 添加类名

  • 语法:jQuery对象.addClass('类名')
  • 参数:字符串格式的类名。

removeClass() 移除类名

  • 删除指定的类名
  • 语法:jQuery对象.removeClass();
  • 参数:字符串格式的类名。
  • 不传参数,表示删除所有的类名

toggleClass() 类名切换

  • 若这个类名存在,则会移除该类名。否则添加该类名
  • 语法:jQuery对象.toggleClass('类名');
  • 参数:字符串格式的类名。
  • 优点:三个方法只操作参数部分的类名,不影响原有的其他类名。

hasClass() 检测类名是否存在

  • 语法:jQuery对象.hasClass('类名');
  • 返回值:true 和 fals

jQuery 常用事件方法

  • jQuery 对象封装了一系列的事件方法。
  • 事件方法与原生 JS 事件方法名称类似,不需要写 on。
  • 事件方法需要 jQuery 对象打点调用,小括号内的参数是事件函数。
  • 例如点击事件:click() 方法。

mouseenter() 方法

  • jQuery 中自己的事件方法。
  • 鼠标进入一个元素触发的事件。

mouseleave() 方法

  • jQuery 中自己的事件方法。
  • 鼠标离开一个元素触发的事件。
  • 注意:mouseenter 和 mouseleave 没有事件冒泡。在使用时替换 mouseover 和 mouseout 更加合适

hover() 方法

  • hover 事件相当于将 mouseoenter 和 mouseleave 事件进行了合写。
  • 参数:有两个参数,第一个参数是鼠标移上执行的事件函数,第二个参数是鼠标离开执行事件函数。

jQuery 关系查找方法$(this) 自己

  • 在原生的 DOM 操作中,事件函数内部有一个 this 关键字指向的就是触发事件的事件源,在 jQuery 中将 this 关键字传递给 $() 方法,得到就是指向自己的 jQuery 对象,就可以使用 JQ 的方法。

parent() 父级

  • jQuery 对象都有一个 parent() 方法,得到的是自己的父亲级。
  • 父级得到的也是一个 jQuery 对象,直接继续打点调用 JQ 方法和属性。

children() 子级

  • jQuery 对象内部有一个 children() 方法,可以得到自己的所有子级元素组成的 jQuery对象。
  • 得到的子级组成的 jQuery 对象可以继续调用 JQ 方法和属性。
  • 获得子级时,不限制标签类型。
  • children() 可以传参数:参数是字符串格式的选择器,在选中所有子级的情况下,保留满足选择器的部分,进行了二次选择。

siblings() 兄弟

  • jQuery 对象通过调用 siblings() 方法可以得到除了自己以外的所有同级元素(兄弟)组成 jQuery 对象,找到的只能是亲的兄弟,不能是叔叔家的兄弟。
  • 得到 jQuery 对象可以继续使用 JQ 的方法和属性。
  • siblings() 方法得到的 jQuery 对象可以进行二次选择,通过给参数传递字符串格式的选择器。

链式调用

  • jQuery 对象调用任何方法(除了节点关系方法)执行完后,方法都会有一个返回值,返回值就是 jQuery 对象自己,这个现象给我们提供了便利,可以对执行结果继续打点调用 JQ的方法和属性。
  • 可以使用 jQuery 对象进行连续打点调用。

jQuery 其他关系查找方法find() 后代元素

  • jQuery 对象可以利用 find() 方法,传递一个参数,参数部分规定的选择器,查找范围是jQuery 对象的所有后代。
  • 参数是字符串格式的选择器。

兄弟元素

  • 紧邻的兄弟元素方法
  • next() 下一个兄弟
  • prev() 前一个兄弟
  • 多选方法
  • nextAll() 后面所有兄弟
  • prevAll() 前面所有兄弟
  • 通过传递参数可以进行二次选择,参数是字符串格式的选择器,在前面或后面兄弟中选中符合选择器规定的部分。

parents() 祖先级

  • 通过该方法得到的是指定对象的包含 body 在内的所有祖先级元素组成的 jQuery 对象。
  • 通过传参进行二次选择,参数位置是字符串格式的选择器

jQuery 排序eq() 方法

  • jQuery 中获得的对象,内部包含选择的一组原生 js 对象,在 jQuery 对象中会进行一个大的排序,这个排序与原来的 HTML 结构没有关系。
  • eq() 方法在 jQuery 对象中通过下标获取某个对象,下标是 jQuery 对象中的大的排序的下标。

index() 方法

jQuery 对象调用 index() 方法时,得到的是它自己在 HTML 结构中的兄弟中的下标位置。与 jQuery 大排序没有关系。

排他思想

  • 在一些事件中,希望自己是特殊的,而它的兄弟们是默认的。
  • 排他方法jQuery 中可以让 this 特殊设置,让兄弟 siblings

each() 遍历

  • jQuery 对象进行的操作都是批量操作,批量操作只能执行一些简单的效果,如果想对 JQ 对象中的每一个元素以及内部的后代元素进行一些复杂操作,程序很难执行
  • each()
  • 参数是一个函数。
  • 作用:就是对 jQuery 对象中的元素每一个都执行函数内部的操作。
  • each 方法的基本原理就是 for 循环,从对象的下标为 0 的项一直遍历到最后一项,然后对每一项进行操作。
  • 优点 1
  • each 的函数内部,也有一个 this,指向的是进来遍历的每一次的元素。
  • 优点 2
  • each 的函数可以传一个参数 i,i 表示的是这一次的遍历对象在整体的 jQuery 对象大排队中的下标位置。

jQuery 中的入口函

  • 原生的 window.onload(页面所有的资源 [dom树,音频,视频,图片等]加载完毕后,才能触发),一个页面中只能书写一次,如果写了多个。后面的覆盖之前的
  • jQuery 中的入口函数 (仅仅需要等待页面中的dom树加载完毕就可以了),一个页面可以书写多个jq入口函数,执行顺序按照前后加载顺序执行
  • 语法1:
$(document).ready(function(){ 
// 获取元素
});

JQuery知识点插图

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序