JQUERY-定义-查找
正课:
1. 什么是jQuery
2. 如何使用jQuery
3. 查找
1. 什么是jQuery
第三方开发的 执行DOM操作的 极简化的 函数库
第三方: 下载
执行DOM操作: 学习jQuery,还是在学DOM
极简化: jQuery是DOM操作的终极简化: 4个方面:
1. 增删改查
2. 事件绑定
3. 动画
4. Ajax
函数库: jQuery中一切都是函数
为什么: 2个原因:
1. 终极简化
2. 解决了大部分浏览器兼容性问题:
凡是jQuery让用的,都没有兼容性问题
如果不兼容,jQuery在底层用程序模拟实现
2. 如何使用:
3步:
1. 上官网看是什么:
2. 看快速入门:
3. 下载手册,备查:
下载: 版本:
1.x 兼容旧浏览器
未压缩: jquery-1.11.3.js
具有: 完备的注释,代码格式和见名知意的变量名
可读性好,体积大——开发和学习阶段使用
压缩: jquery-1.11.3.min.js
移除所有注释, 清除所有空字符格式,极简化变量名
体积小,可读性差——生产环境
2.x 不再兼容旧浏览器
3.x 也不兼容旧浏览器,还增加了新功能
1. 所有代码运行在严格模式下
2. 支持for...of,代替原有each()
3. 新动画API: requestAnimationFrame()
4. 支持Promise
引入: 2种:
1. 将js文件下载的项目本地
2. 引入CDN网络中的js文件
CDN网络: 内容分发网络
可根据客户端据不同服务器的网络状况,自动选择最优的服务器下载资源
原理:
引入jquery.js,其实是在全局创建了一种新类型: 2部分
1. 构造函数: 创建jQuery类型的子对象
2. 原型对象: 保存所有jQuery类型的子对象共有API
创建jQuery类型的子对象:
什么是jQuery类型的子对象: 专门封装一个或多个DOM元素,并提供操作DOM元素的简化版API
本质是一个类数组对象。
为什么: 普通DOM元素不是jQuery类型,不能用简化版API
只有将找到的DOM元素,放入jQuery对象中,才能使用简化版API
何时: 只要想使用jQuery的简化版API,都要先创建jQuery对象
如何: 2种:
1. 用选择器查找DOM元素,并创建jQuery对象:
var $elems=new jQuery("selector")
先找到符合selector要求的DOM元素,再创建一个jQuery类型的子对象,保存找到的DOM元素
简化: var jQuery=function("selector"){//工厂函数
return new 构造函数("selector")
}// jQuery("selector") 等效于 new 构造函数()
更简化: window.jQuery = window.$ = jQuery;
//调用$() 等效于调用jQuery()
对原型对象的简化: jQuery.fn = jQuery.prototype = {
jQuery.fn也是jQuery类型的原型对象的别名
2. 直接将获得的DOM元素封装进jQuery对象:
var $elem=$(dom元素对象);
3. 查找:
1. 按选择器查找:
jQuery支持所有CSS选择器,并扩展了部分自有的选择器
基本选择器: 5个 同CSS
#id element .class * selector1,selector2,...
层级选择器: 4个 同CSS
parent child parent>sub prev+next prev~nextsiblings
子元素过滤: 4个 同CSS
特点: 在各自父元素内分别编号,从1开始
:first-child :last-child :nth-child(n) :only-child
基本过滤(位置过滤): 7个 jQuery中新增
特点: 先取出所有符合条件的元素放入一个集合中统一编号。编号从0开始
:first/last :even/odd :eq/gt/lt(i)
属性过滤: 同CSS
[属性名]
[属性名=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]
[属性名!=值]
input.txt[title=用户名]
何时:代替class选取多个元素,添加行为
可见性过滤: 2个:
:visible :hidden(display:none input type="hidden")
内容过滤: 2组:
1. 用子元素或内容的特征判断父元素:
1. 以内容文本作为特征: :contains(text)
2. 以子元素特征: :has(选择器)
2. 以是否有子元素或内容为条件:
:parent 非空
:emty 空
表单元素过滤:
:input 选择所有表单元素(input select textarea button)
每种type都有专门的选择器:
:text :password :radio :checkbox :file :submit...
状态过滤: :enabled :disabled :checked :selected
2. 按节点间关系查找:
2大类:
1. 父子:
$elem.parent() 父元素
$parent.children() 直接子元素
$parent.children().first()
$parent.children().last()
2. 兄弟:
$elem.next()
$elem.prev()
$elem.is("selector") 判断$elem是否符合selector选择器的要求
$elem.show()/hide() 代替display="block"/"none"
$elem.css("CSS属性名","属性值") style.css属性名=值
$elem.html("内容") innerHTML="内容"
jQuery API三大规律:
1. 自带遍历: 对整个jQuery对象调用API等效于对其中每个DOM元素都调用一次API
2. 一个函数两用: 给新值,就修改。没给新值,就返回旧值
3. 返回当前正在操作的jQuery对象本身
JQUERY-定义-查找的更多相关文章
- jQuery的查找
children([expr])概述 :取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合.可以通过可选的表达式来过滤所匹配的子元素.注意:parents()将查找所有祖辈元素,而child ...
- jquery zTree 查找所有的叶子节点
jquery zTree 查找所有的叶子节点 // 保存所有叶子节点 10 为初始化大小,并非数组上限 var arrayObj = new Array([10]); /* treeNode: 根节点 ...
- 利用js和JQuery定义一个导航条菜单
利用js和JQuery定义一个导航条 效果: 一.html代码: <div class="Maintenance"> <div class="Title ...
- 在jQuery定义自己函数
刚才有学习<在jQuery定义自己的扩展方法函数>http://www.cnblogs.com/insus/p/3415312.html .现在想练习一下定义自定义函数.经重构之后,还是发 ...
- JQuery中查找父元素,子元素,追加元素,插入元素和删除元素 及其他常用方法
Jquery之所以强大,和其在获取对象时使用与css选择器兼容的语法有很大关系.而且它还兼容了CSS3的选择器,而且多出了不少. 所以jQuery的选择器也就变得很多很强大.就最基本的有以下四个: $ ...
- js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素
js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素 一.总结 一句话总结:closest()方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上.of ...
- js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代
js进阶 11-16 jquery如何查找元素的父亲.祖先和子代.后代 一.总结 一句话总结:过滤或者查找的方法里面可以带参数进行进一步的选择. 1.parent()和parents()方法的区别是什 ...
- jQuery元素查找方式
jQuery常用的元素查找方法总结 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到 ...
- jquery元素查找方法集锦
jQuery常用的元素查找方法总结 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到 ...
- jquery元素查找方法
$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div&q ...
随机推荐
- Sqlite之事务
12.Sqlite事务介绍: 11.android SQLite 批量插入数据慢的解决方案 (针对于不同的android api 版本) ========== 12.Sqlite事务介绍: 应用程序初 ...
- 【3D美术教程】手雷(传统与PBR流程)
转自:https://www.sohu.com/a/156489635_718614 随着最新的次时代技术PBR流程的普及,越来越多的公司由传统流程转向了PBR流程,主要原因在于PBR材质不仅效果上更 ...
- 涂抹mysql笔记-搭建mysql高可用体系
mysql的高可用体系<>追求更高稳定性的服务体系 可扩展性:横向扩展(增加节点).纵向扩展(增加节点的硬件配置) 高可用性<>Slave+LVS+Keepalived实现高可 ...
- Python全栈开发记录_第一篇(循环练习及杂碎的知识点)
Python全栈开发记录只为记录全栈开发学习过程中一些难和重要的知识点,还有问题及课后题目,以供自己和他人共同查看.(该篇代码行数大约:300行) 知识点1:优先级:not>and 短路原则:a ...
- 中间件weblogic控制台创建数据源报错---根据真实故事改编
1.在weblogic控制台创建数据源,有报错--不能创建数据源,图免 2.weblogic数据源管理节点所在服务器telnet测试,到数据库1521端口是通的 3.经过请教各路大神,得出结论:由于子 ...
- ElasicSearch(2) Linux运行
1.org.elasticsearch.bootstrap.StartupException: java.lang.RuntimeException: can not run elasticsearc ...
- K8s之Etcd
Etcd是一个开源的.高可用的.分布式的键值对数据存储系统,提供共享配置.服务的注册和发现.etcd与zookeeper相比算是轻量级系统,两者的一致性协议也一样,etcd的raft比zookeepe ...
- linux shell并发执行命令
一般我们在linux上十一shell命令的批量执行操作,一般使用for或者while 循环进行操作,但是这样有一个问题,for或者while本质上是串行的,并不能,如果某一个命令执行耗费的时间比较长, ...
- 在IDEA中停止和关闭SonarLint自动检查,手动运行SonarLint检查代码
关闭SonarLint自动检查代码 有时敲一行代码SonarLint插件就会自动检查,让人感觉很不舒服,还会使电脑卡顿: 依次点击:File -> Settings 或直接Ctrl+Alt+S ...
- R语言-散点图进阶
1.分组散点图 ①xyplot()函数 > library(lattice) > xyplot(mpg~disp, #定义Y~X轴 + data=mtcars, + groups=cyl, ...