jquery总结：（一）认识jquery以及常用的选择器介绍

最新推荐文章于 2022-10-03 15:42:55 发布

℡北辰羽こ墨ヾ

最新推荐文章于 2022-10-03 15:42:55 发布

阅读量105

点赞数 2

本文链接：https://blog.csdn.net/weixin_43273658/article/details/87819386

版权

什么是jQuery?
jQuery是一个js框架(其实就是一个.js文件),它的特点是使用选择器查找要操作的节点,并且将这些节点封装成一个jQuery对象。封装的目的是为了更好地兼容不同的浏览器之间的差异，同时也会简化代码。
注：选择器是jQuery借鉴css选择器的语法而创建的一种查找要操作的节点的语法格式。比如 $(’#id’);
使用jQuery的基本步骤
（1）、引入jQuery.js文件
（2）、使用选择器查找要操作的节点
（3）、调用jQuery对象的属性或者方法来操作相应的节点

<script  src="../js/jquery-3.3.1.min.js"></script>
<script>
  $(function(){
      //改变 id 为 one 的元素的背景色为 红色
     $("#b1").click(function () {
        $("#one").css("backgroundColor","red");
          })
</script>

3.jquery对象与js对象之间的相互转换
（1）、js对象和jq对象的方法和用法是不相通的
（2）、jq中提供了更多更好更便捷的方法
转换：
jq ----> js jq对象[index]或者jq对象.get(index)
js ----> jq $(js对象)
4.jquery选择器：
（1）、基础选择器
a、标签选择器（元素选择器）
* 语法： $(“html标签名”) 获得所有匹配标签名称的元素
* $("#b2").click(function () { $("div").css("backgroundColor","red"); })
b、id选择器

语法： $("#id的属性值") 获得与指定id属性值匹配的元素
$("#b1").click(function () { $("#one").css("backgroundColor","red"); })
c、类选择器
语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
$("#b3").click(function () { $(".mini").css("backgroundColor","red"); })
d、并集选择器
语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素
$("#b4").click(function () { $("span,#two").css("backgroundColor","red"); })
(2)、层级选择器
a、后代选择器
- 语法： $("A B ") 选择A元素内部的所有B元素
- $("#b1").click(function () { $("body div").css("backgroundColor","red"); })
- b、子选择器
- 语法： $(“A > B”) 选择A元素内部的所有B子元素
- $("#b2").click(function () { $("body > div").css("backgroundColor","red"); })(
  (3)、属性选择器
  a、属性名称选择器
- 语法： $(“A[属性名]”) 包含指定属性的选择器
- $("#b1").click(function () { $("div[title]").css("backgroundColor","red"); })
  b、属性选择器
- 语法： $(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器
- $("#b2").click(function () { $("div[title='test']").css("backgroundColor","red"); })~
  c、复合属性选择器
- 语法： $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器
  (4)、过滤选择器
  a、首元素选择器
- 语法： :first 获得选择的元素中的第一个元素
- $("#b1").click(function () { $("div:first").css("backgroundColor","red"); })
  b、尾元素选择器
- 语法： :last 获得选择的元素中的最后一个元素
- $("#b2").click(function () { $("div:last").css("backgroundColor","red"); })
  c、非元素选择器
- 语法： :not(selector) 不包括指定内容的元素
- $("#b3").click(function () { $("div:not('.one')").css("backgroundColor","red"); })
  d、偶数选择器
- 语法： :even 偶数，从 0 开始计数
- $("#b4").click(function () { $("div:even").css("backgroundColor","red"); })
  e、奇数选择器
- 语法： :odd 奇数，从 0 开始计数
- $("#b5").click(function () { $("div:odd").css("backgroundColor","red"); })
  f、等于索引选择器
- 语法： :eq(index) 指定索引元素
- $("#b7").click(function () { $("div:eq(3)").css("backgroundColor","red"); })
  g、大于索引选择器
- 语法： :gt(index) 大于指定索引元素
- $("#b6").click(function () { $("div:gt(3)").css("backgroundColor","red"); })
  h、小于索引选择器
- 语法： :lt(index) 小于指定索引元素
- $("#b8").click(function () { $("div:lt(3)").css("backgroundColor","red"); })
  j、标题选择器
- 语法： :header 获得标题（h1~h6）元素，固定写法
- $("#b9").click(function () { $(":header").css("backgroundColor","red"); })(
  (5)、表单过滤选择器
  a、可用元素选择器
- 语法： :enabled 获得可用元素
- $("#b1").click(function () { alert($("input:enabled").val()) })
  b、不可用元素选择器
- 语法： :disabled 获得不可用元素
- $("#b2").click(function () { alert($("input:disabled").val()) })
  c、选中选择器
- 语法： :checked 获得单选/复选框选中的元素
  、选中选择器
- 语法： :selected 获得下拉框选中的元素