jQuery

一、jQuery简介

jQuery 是一个快速、简洁的 JavaScript 库。

其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

jQuery 库包含以下功能：

1. HTML 元素选取
2. HTML 元素操作
3. CSS 操作
4. HTML 事件函数
5. JavaScript 特效和动画
6. HTML DOM 遍历和修改
7. AJAX
8. Utilities

1. jQuery 基础语法 $(selector).action()

• 美元符号 $ 定义 jQuery
• $(selector)—— jQuery的元素选择器（选中需要被控制的html元素，并转换成jquery对象）
• action() 执行对元素的操作（具体的函数名称，需要什么功能，就写那个功能的函数名称）

2. jQuery的初始化函数（入口函数）

// 1. 原始写法
$(document).ready(function(){
   
   ...  // jQuery 代码
});
    
// 2. 简洁写法（与第一种写法效果相同）
$(function () {
      
    ...  // jQuery 代码
}) ; 

• 等 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
• 相当于原生 js 中的 DOMContentLoaded。
• 不同于原生 js 中的 window.onload 事件，window.onload是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。

3. jQuery 对象和 JavaScript DOM 对象转换

jquery的构造有常用的两种：

• $(selecter)—将被选中的html标记构造成Jquery对象

• $(DOM对象)—将DOM对象构造成Jquery对象

DOM 对象与 jQuery 对象之间是可以相互转换的。

因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装， 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

• DOM对象转换成jQuery对象：$(DOM对象)
• jQuery对象转换为DOM对象：Jquery对象.get()

<div></div>

<script>
  // 1. DOM对象：用原生js获取过来的对象就是DOM对象
  var div1 = document.querySelector('div');
  alert(div1);  // [object HTMLDivElement] DOM对象
  // 2. jQuery对象：用jquery方式获取过来的对象是jQuery对象。
  var div2 = $('div');
  alert(div2);  // [object Object] jQuery对象
    
  // 3. jQuery对象和JavaScript DOM对象转换
  // 3.1 DOM对象转换成jQuery对象：$(DOM对象)
  var divjQuery = $(div1);
  alert(divjQuery);  // [object Object] jQuery对象
  // 3.2 jQuery对象转换为DOM对象：Jquery对象.get()
  var divDOM = div2.get();
  alert(divDOM); // [object HTMLDivElement] DOM对象
</script>

4. jQuery 选择器

jQuery 中所有选择器都以美元符号开头：$()。

语法名称	用法	描述
	$(this)	选取当前 HTML 元素
元素选择器	$(“div”)	获取同一类标签的所有元素
ID选择器	$("#id名称")	获取指定ID的元素
类选择器	$(".class类名")	获取同一类class的元素
并集选择器	$(“div，.nav，#bar”)	选取多个元素
后代选择器	$(“ul li”)	获取ul下的所有li元素，包括孙子层级等
子代选择器	$(“ul>li”)	获取ul下亲儿子层级的li，不包括孙子层级
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:odd	$(“li:odd”)	获取索引号为奇数的li元素（索引号从0开始）
:even	$(“li:even”)	获取索引号为偶数的li元素（索引号从0开始）
:eq(index)	$(“li:eq(2)”)	获取索引号为2的li元素（索引号从0开始）
eq(index)	$(“li”).eq(2)	获取索引号为2的li元素（索引号从0开始）
siblings(“选择器”)	$(".first").siblings(“li”)	查找兄弟节点，不包括自己本身
children(“选择器”)	$(“ul”).children(“li”)	相当于$(“ul>li”)，最近一级（亲儿子）

5. 知识铺垫

• jQuery 设置样式

$("div").css("属性", "值")    

• jQuery 里面的排他思想

// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css("color","red");
$(this).siblings(). css("color","");

• 隐式迭代

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作

• 链式编程

// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', ''); 

案例：点击哪个按钮，哪个按钮背景颜色就变为粉红色

<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>

<script>
  $(function () {
      
    $("button").click(function () {
        // 1. 隐式迭代 给所有的按钮都绑定了点击事件
      // $(this).css("backgroundColor", "pink"); // 2. 当前的元素变化背景颜色
      // $(this).siblings("button").css("backgroundColor", ""); // 3. 其余的兄弟去掉背景颜色 隐式迭代
      // 链式编程
      $(this).css("backgroundColor", "pink").siblings().css("backgroundColor", "");
    })
  })
</script>

二、jQuery 常用操作方法

1. 获取 / 修改 内容和属性

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

1. jQuery获取html元素的值

   jQuery对象.text —— 去除html标签

   jQuery对象.html —— 保留html标签

   jQuery对象.val

2. jQuery修改html元素的值

   jQuery对象.text=“数据值” —— 不会识别html标签

   jQuery对象.html=“数据值” —— 会识别html标签

   jQuery对象.val=“数据值”

<script>
  $(function () {
     
    // jQuery获取html元素的值
    console.log($(".div").text()); // 去除html标签
    console.log($(".div").html()); // 保留html标签
    console.log($("input").val());<