jQuery基本操作

jQuery基本操作

首先引入jquery文件库

<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>

jQuery对象

jQuery对象是一个数组，可以通过数组下标转为DOM对象

// jQuery和DOM对象的互转
// 相当于window.onload
$(function(){
  $("button").click(
    function () {
      alert("helloWorld");
      var $btn = $("button");
      alert($btn.length);
      // 使用数组下标来转为DOM对象
      alert($btn[0].firstChild.nodeValue);

      var btn = document.getElementById("btn");
      // 使用$()进行包装将DOM对象转为jQuery对象
      alert($(btn).text());
    }
  )
})

选择器

基本选择器

基本选择器根据id，class和标签名来查找DOM元素

• #id id选择器
• .class class选择器
• element 标签选择器
• *匹配所有元素

$("#id")
$(".class")
$("div")

层次选择器

层次选择器根据DOM元素的层次关系来获取元素，主要的层次关系包括后代、父子、相邻、兄弟关系

• 派生选择器 $(“div span”) 选取div的所有span(后代)元素，关系是祖先和后代

• 父子选择器 $(“parent > child”) 选取parent元素下的child元素，关系是父子

• 直接兄弟选择器 $(“prev + next”) 选取紧接在prev元素后的下第一个兄弟关系的next元素

  可以使用.next()来代替，如 $(“div”).next()

• 后续全部兄弟节点选择器 $(“prev ~ siblings”) 选取prev元素后的所有兄弟关系的siblings元素

  可以使用.nextAll()来代替，如 $(“div”).nextAll()

(“prev ~ siblings”)选择器只能选择”#prev”元素后面的同辈元素，而jquery中的方法siblings()与前后位置无关，只要是同辈节点就可以选取

<div id="content">
  <span></span>
  <p>
    <span></span>
  </p>
  <p>
    <span></span>
  </p>
  <p>
    <span></span>
  </p>
</div>

$(function () {
  // 派生选择器 $("div span")  选取div的所有span(后代)元素   不考虑层次
  var ele = $("div span");
  alert(ele.length); // 4
  // 父子选择器 $("parent > child")  选取parent元素下的child元素
  var ele1 = $("div > span");
  alert(ele1.length); // 1

  // 直接兄弟选择器 $("prev + next")  选取紧接在prev元素后的下第一个兄弟关系的next元素
  var ele2 = $("div span + p");
  alert(ele2.length); // 1

  // 后续全部兄弟节点选择器 $("prev ~ siblings") 选取prev元素后的所有兄弟关系的siblings元素
  var ele3 = $("div span ~ p");
  alert(ele3.length); // 3

})

过滤选择器

过滤选择器通过特定的过滤规则来筛选出所需的DOM元素，该选择器都以”:”开头

按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器

基本过滤选择器

• :first $("li:first") 选取第一个元素
• :last $("li:last") 选取最后一个元素
• :not(selector) $("li:not(.red)") 选取class不是red的li元素
• :even $("li:even") 选取索引(0开始)是偶数的所有元素
• :odd $("li:odd") 选取索引(0开始)是奇数的所有元素
• :eq(index) $("li:eq(2)") 选择索引等于index的元素
• :gt(index) $("li:gt(2)") 选择索引大于index的元素
• :lt(index) $("li:lt(2)") 选择索引小于index的元素
• :header $(":header") 选择标题元素 h1~h6
• :animated $("animated") 选择正在执行动画的元素
• :focus $(":focus") 选择当前被焦点的元素

内容过滤选择器

根据元素中的文字或所包含的子元素特征获取元素

• :contains(text) $(":contains('com')") 选取含有”com”文本的元素
• :empty $(":empty") 选取不包含子元素或空文本的元素
• :has(selector) $("has(.red)") 选取含有class是red的元素
• :parent $(":parent") 选取含有子元素或文本的元素

可见性过滤选择器

• :hidden $(":hidden") 选取所有不可见元素
• :visible $(":visible") 选取所有可见元素

属性过滤选择器

根据元素的某个属性来获取元素，以[]括起来

• [attribute] $("div[id]") 匹配包含给定属性的元素，查找含有id属性的div元素
• [attribute=value] $("input[name='basketball']") 匹配给定属性是某个特定值的元素，查找name属性值为basketball的input元素
• [attribute!=value] $("input[name!='basketball']") 匹配给定属性是某个特定值的元素，查找name属性值不为basketball的input元素
• [attribute^=value] $("input[name^='foot']") 匹配给定的属性是以某些值开始的元素
• [attribute$=value] $("input[name$='end']") 匹配给定的属性是以某些值结尾的元素
• [attribute*=value] $("input[name*='com']") 匹配给定的属性是包含某些值的元素
• [selector1][selector2] $("input\[id][name='aa']") 复合属性过滤选择器，同时满足多个条件，找到含有id属性，且name等于aa的元素

子元素过滤选择器

• :first-child $("li:first-child") 获取每个父元素的第一个子元素
• :last-child $("li:last-child") 获取每个父元素的最后一个子元素
• :only-child $("li:only-child") 获取只有一个子元素的元素
• :nth-child(odd/even/eq(index)) 获取每个自定义子元素的元素(索引值从1开始)

表单对象属性过滤选择器

• :enabled $("#form1:enabled") 选取id为form1所有可用元素
• :disabled $("#form1:enabled") 选取id为form1所有不可用元素
• :checked $("input:checked") 选取所有被选中的input元素(单选框、复选框)
• :selected $("select option:selector") 选取所有被选中的选项元素(下拉框)

表单选择器

为表单元素量身定制的

• :input 获取所有input、textarea、select
• :text 获取所有单行文本框
• :password 获取所有密码框
• :radio 获取所有单选
• :checkbox 获取所有多选
• :submit 获取所有提交按钮
• :image 获取所有图像
• :reset 获取所有重置按钮
• :button 获取所有按钮
• :file 获取所有文件

操作文本节点

使用text()方法

// 读取文本
$("#bj").text();
// 修改文本  将文本改成北京
$("bj").text("北京");

操作属性节点

使用attr()方法

//获取属性  获取value属性
$("input[name='username']").attr("value");
//修改属性  修改value属性值为张三
$("input[name='username']").attr("value","张三");

创建节点并插入节点

创建节点

使用jquery的工厂函数$(html) 会根据html来创建一个DOM对象，并把这个DOM对象包装成一个jQuery对象

插入节点

创建好节点之后需要将创建的节点插入文档中

• append() 向每个匹配的元素的内部结尾处追加内容
• appendTo() 将每个匹配的元素追加到指定元素中的内部结尾处
• prepend() 向每个匹配元素的内部的开始处插入内容
• prependTo() 向每个匹配的元素插入到指定的元素内部的开始处

$("<li id='bj'>北京</li>").appendTo($("#city"));

• after() 向每个匹配的元素之后插入内容
• insertAfter() 向每个匹配的元素的插入到指定的元素之后
• before() 向每个匹配的元素之前插入内容
• insertBefore() 向每个匹配的元素的插入到指定的元素之前

$("<li id='sh'>上海</li>").insertAfter($("#bj"));

删除节点

• remove() 删除所有匹配的元素，该节点包括子节点都被删除
• empty() 清空元素中所有后代节点(不包括属性节点)

$("#bj").remove();

$("#city").empty();

属性操作

可以使用attr()方法来进行属性操作

jQuery中提供了很多方法来实现获取和设置某些属性。

• attr()
• html() 读取和设置某个元素中的HTML内容
• text() 读取和设置某个元素中的文本内容
• val() 读取和设置某个元素中的值 value属性
• height()
• width()
• css()

removerAttr()可以删除指定元素的指定属性

样式操作

• addClass() 追加样式
• removeClass() 移除样式
• toggleClass() 切换样式
• hasClass() 判断元素中是否含有某个class