jQuery学习笔记核心总结:$()函数构造jQuery对象

2019-03-2115:53:11WEB前端开发Comments1,488 views字数 1854阅读模式

$()构造一个jQuery对象,jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

核心文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

1、 ${表达式}:根据这个表达式来查找所有匹配的元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

2、$(html标记字符串) :根据提供的html字符串,创建jquery对象包装的dom元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

3、$(dom元素):将一个或多个dom元素转换为jquery对象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

4、(document).ready(function())==(document).ready(function(){})==(function(){});在页面加载完成后自动执行的代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

选择器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

jQuery的api文档里有详细的介绍,我只总结了一些常用的以及难以理解的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

层级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

1、$(“ancestor descendant”):在给定的祖先元素下匹配所有的后代元素 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

2、$(“parent > child”):在给定的父元素下匹配所有的子元素 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

3、$(“prev + next”):匹配所有紧接在 prev 元素后的 next 元素 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

4、$(“prev ~ siblings”):匹配 prev 元素之后的所有 siblings(同级) 元素 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

顺序文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

1、$(“tr:first”) 匹配找到的第一个元素 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

2、$(“tr:last”) 匹配找到的最后一个元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

3、$(“input:not(:checked)”) 去除所有与给定选择器匹配的元素 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

4、$(“tr:even”) 匹配所有索引值为偶数的元素,从 0 开始计数 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

5、$(“tr:odd”) 匹配所有索引值为奇数的元素,从 0 开始计数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

6、$(“tr:eq(1)”) 匹配一个给定索引值的元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

可见性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

1、$(“tr:visible”) 查找所有可见的 tr 元素 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

2、$(“tr:hidden”) 匹配所有的不可见元素,input 元素的 type 属性为 “hidden” 的话也会被匹配到。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

子元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

1、$(“ul li:last-child”) 在每个 ul 中查找最后一个 li 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

2、$(“ul li:only-child”) 在 ul 中查找是唯一子元素的 li 表单:。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

表单文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

1、$(“:input”) 查找所有的input元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

2、$(“text”) 匹配所有的单行文本框文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

3、$(“:password”) 匹配所有密码框文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

4、$(“radio”) 匹配所有单选按钮文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

5、$(“checkbox”) 匹配所有复选框文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

6、$(“submit”) 匹配所有提交按钮文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

7、$(“image”) 匹配所有图像域文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

8、$(“button”) 匹配所有按钮文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

9、$(“file”)
匹配所有文件域文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

筛选
过滤文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

1、$(“p”).eq(1) 获取第N个元素,这个元素的位置是从0算起 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

2、if( $(this).hasClass(“protected”) ) 检查当前的元素是否含有某个特定的类,如果有,则返回true。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

3、$(“p”).filter(“.selected”) 筛选出与指定表达式匹配的元素集合文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

4、("p").not(("p").not((“#selected”)[0])删除与指定表达式匹配的元素查找。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

查询文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

1、$(“p”).find(“span”);搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

2、$(“p”).next();取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

总述:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

从核心功能来看,jQuery 仅仅做了一件简单而又平凡的事:查询。它的语法如此简洁明了,以致于很多人在不知道javascript是什么的时候就已经会用jQuery了,用一个词形容就是:大道至简。 从设计层面来看,我们可以将jQuery提供方法分为两大类:静态方法和实例方法。静态方法就是直接通过美元符访问的方法,这些方法一般不对dom元素操作,而是提供了一些常用的工具,比如ajax请求、以及对字符串的一些常用操作,除此之外,jQuery还提供了对自身的扩展机制,你可以通过extend方法来编写你需要的组件。而实例方法和静态方法不一样,它是用来对jQuery查询的DOM元素进行操作,jQuery 执行$()会构建一个 jQuery 对象,这个对象以数组的方法存储查询出的所有DOM元素,然后在这个对象的原型链上实现了对这些 DOM 操作的方法,比如 each()方法就是用来遍历每一个DOM元素的。你可能会注意到,我刚说这个对象“以数组的方式”存储,那就是说,jQuery构建的这个对象不是数组,那这个对象到底是什么? 其实这个对象就是 jQuery 的核心,也被称作“jQuery对象”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10188.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/10188.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定