jQuery
2023-04-06 09:59:25 0 举报AI智能生成
学习笔记
作者其他创作
大纲/内容
操作及其繁琐，开发效率非常低下
存在严重的浏览器兼容问题
原生js的DOM操作存在一些问题？
为什么学习jQuery？
$是jQuery核心操作符，代表jQuery中的工厂函数；$完全等价于jQuery；$就是jQuery的别名
$(function () { // 页面初始化代码，一般用来进行页面元素的事件注册});
jQuery入口函数
$
$(\"*\") // 所有元素
$(\"#lastname\") // id=\"lastname\" 的元素
$(\".intro\") // 所有 class=\"intro\" 的元素
$(\"p\") // 所有 <p> 元素
$(\"p.car\") // 所有 class=\"car\"的 <p> 元素
$(\".intro.demo\") // 所有 class=\"intro\" 且 class=\"demo\" 的元素
语法：$(\"选择器名称\");
选择器名称继承的是CSS，和CSS的规则一样
基本选择器
$(\"p:first\") // \t第一个 <p> 元素
$(\"p:last\") // 最后一个 <p> 元素
$(\"tr:even\") // 所有偶数 <tr> 元素
$(\"tr:odd\") // 所有奇数 <tr> 元素
$(\"ul li:eq(3)\") // 列表中的第四个元素（index 从 0 开始）
$(\"ul li:gt(3)\") // 列出 index 大于 3 的元素
$(\"ul li:lt(3)\") // 列出 index 小于 3 的元素
$(\"input:not(:first)\") // 列出不是第一个的所有 input 元素
语法：$(\"选择器名称:索引\")
按照元素的下标过滤
$(\"[href]\") // 所有带有 href 属性的元素
$(\"[href='#']\") // 所有 href 属性的值等于 \"#\" 的元素
$(\"[href!='#']\") // 所有 href 属性的值不等于 \"#\" 的元素
$(\"[href^='http']\") // 所有 href 属性的值以 \"http\" 开头的元素
$(\"[href$='.com']\") // 所有 href 属性的值以 \".com\" 结尾的元素
语法：$(\"选择器名称[属性名='属性值']\")
按照元素的属性名过滤
$(\":input\") // 所有 <input> 元素
$(\":text\") // 所有 type=\"text\" 的 <input> 元素
$(\":password\") // 所有 type=\"password\" 的 <input> 元素
$(\":radio\") // \t所有 type=\"radio\" 的 <input> 元素
$(\":checkbox\") // 所有 type=\"checkbox\" 的 <input> 元素
$(\":submit\") // 所有 type=\"submit\" 的 <input> 元素
$(\":reset\") // 所有 type=\"reset\" 的 <input> 元素
$(\":button\") // 所有 type=\"button\" 的 <input> 元素
$(\":image\") // 所有 type=\"image\" 的 <input> 元素
$(\":file\") // \t所有 type=\"file\" 的 <input> 元素
$(\":disabled\") // 所有禁用的 input 元素
$(\":selected\") // 所有被选取的 input 元素
$(\":checked\") // 所有被选中的 input 元素
语法：$(\":type属性的属性值\")
针对表单元素：按照type属性的属性值过滤
first() // \t将匹配元素集合缩减为集合中的第一个元素
last() // 将匹配元素集合缩减为集合中的最后一个元素
eq() // 将匹配元素集合缩减为位于指定索引的新元素
not() // \t从匹配元素集合中删除元素
语法：$(\"选择器名称\").下标方法()
按照元素的下标方法过滤
parent() // 获取唯一的父元素
parents() // 获取所有的先辈元素，包含父元素
children() // 获取所有的子元素
find() // 选择所有的后代元素 包含子元素在内，如果不传参表示什么都不选
prev() // 选择紧邻它的上一个兄弟元素
prevAll() // 选择前面所有的兄弟元素
next() // 选择紧邻它的下一个兄弟元素
nextAll() // 选择后面所有的兄弟元素
siblings() // 选择前后所有的兄弟，除了它自己
语法：$(\"选择器名称\").关系方法()
按照元素之间的层级关系方法过滤（重点）
高级选择器
jQuery的选择器
$(\"p\")[index]
jQuery对象转成DOM对象
$(\"p\")
DOM对象转成jQuery对象
jQuery和DOM对象的转换
方法规则：不传参表示读取，传参表示设置
$(\"p\").text(); // 用来设置或获取双标签的内部文本
$(\"p\").html(); // 针对内容中存在子标签的情况
$(\"p\").val(); // 获取或者设置表单元素的值
$(\"p\").attr(); // 用来获取或设置元素的属性 两个参数表示设置，一个参数表示获取
$(\"p\").prop(); // 功能和attr类似，不同的是它是用来操作boolean类型的属性，两个参数表示设置，一个参数表示获取，例如选项按钮的选中状态
$(\"p\").font color=\"#7bd144\
$(\"p\").show([timeout]); // 元素的显示
$(\"p\").hide([timeout]); // 元素的隐藏
$(\"p\").css(\"样式名\
$(\"p\").addClass(\"className\"); // 动态的为元素添加class属性
$(\"p\").removeClass(); // 删除指定的类样式
$(\"p\").toggleClass(); // 切换样式
jQuery的DOM操作
规则：jQuery事件和DOM的事件基本一致，将DOM事件的onXXX属性去掉on在加上()变成方法就是jQuery的事件
jQuery对象.事件方法名(function() { //事件处理函数})
语法
$(\"p\").click(function(){ // 动作触发后执行的代码!!});
click()
change()
......
事件绑定
在jQuery创建新元素的方式：$(\"html代码\") 里面的html代码可以直接以层次结构进行组织
append(新元素) // 追加 基于父元素调用
after(新元素) // 基于兄弟元素调用
before(元素) // 基于兄弟元素调用
remove() // 基于被删除的元素调用 无参
replaceWith(新元素) // 以及被替换的元素调用
动态的元素添加和删除
jQuery
0 条评论
回复 删除
下一页
