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