Web(5) jQuery_web切换类-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44113772/article/details/117469656

1.概念：

一个在页面中引用的JavaScript框架。 jQuery是一个快速、简洁的JavaScript框架，一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

2.jQuery 库包含以下特性：

HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities

3.快速入门

步骤：
1. 下载JQuery
  - 目前jQuery有三个大版本： 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)。 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日) 3.x：不兼容ie678，只支持最新的浏览器。很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。
  - jquery-xxx.js 与 jquery-xxx.min.js区别：
    1. jquery-xxx.js：开发版本。Development version - 用于测试和开发（未压缩，是可读的代码）。
    2. jquery-xxx.min.js：Production version - 用于实际的网站中，已被精简和压缩。
2. 导入JQuery的js文件：导入min.js文件
3. 使用 var div1 = $("#div1"); alert(div1.html());

替代方案（一般不这么做）如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。谷歌和微软的服务器都存有 jQuery 。

Microsoft CDN:

<span style="background-color:#f8f8f8"><span style="color:#333333"><head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head></span></span>

Google CDN:

<span style="background-color:#f8f8f8"><span style="color:#333333"><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head></span></span>

4.JQuery对象和JS对象区别与转换

JQuery对象在操作时，更加方便。
JQuery对象和js对象方法不通用的.
两者相互转换
- jq -> js : jq对象[索引] 或者 jq对象.get(索引)
- js -> jq : $(js对象)

5.选择器：筛选具有相似特征的元素(标签)

1.基本操作学习：

事件绑定 //1.获取b1按钮 $("#b1").click(function(){ alert("abc"); });
入口函数 $(function () { 。。。。});

window.onload 和 $(function) 区别： window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉，$(function)可以定义多次的。
样式控制：css方法 $("#div1").css("backgroundColor","pink");

2.分类

1.获取元素内容：

1. .html(): 获取第一个匹配的元素内部的HTML,包括所有后代节点。 $('ul').html();
2. .text(): 获取每个元素的标签体纯文本内容，包括后代元素。 $('ul').text();

3. .val() - 设置或返回表单字段的值。

2.更新元素：

1. .html(): 设置每个匹配的元素都相同。
2. .text(): 设置每个元素的纯文本内容相同。

3. .replaceWith();替换所有匹配的元素内容，同时返回被替换的元素。

4. .remove():移除匹配结果的所有元素。

3.插入元素：

append() - 在被选元素的结尾插入内容 $("p").append("Some appended text.");
prepend() - 在被选元素的开头插入内容 $("p").prepend("Some prepended text.");
after() - 在被选元素之后插入内容 $("img").after("Some text after");
before() - 在被选元素之前插入内容 $("img").before("Some text before");

function appendText()
{
var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}

function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素
var txt3=document.createElement("big");  // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}

4.删除元素/内容

remove() - 删除被选元素（及其子元素） $("#div1").remove();

注意：$("p").remove(".italic");是删除所有<p>元素。

empty() - 从被选元素中删除子元素 $("#div1").empty();

5.jQuery 操作 CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作

判断如果元素对象上存在则将属性值删除掉。如果元素对象上不存在则添加。

css() - 设置或返回样式属性

通用属性操作
           1. attr(): 获取/设置元素的属性
           2. removeAttr():删除属性
           3. prop():获取/设置元素的属性
           4. removeProp():删除属性

attr和prop区别？
1. 如果操作的是元素的固有属性，则建议使用prop
2. 如果操作的是元素自定义的属性，则建议使用attr

6.选择器

1. 基本选择器
           1. 标签选择器（元素选择器）
               * 语法： $("html标签名") 获得所有匹配标签名称的元素
           2. id选择器
               * 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
           3. 类选择器
               * 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
           4. 并集选择器：
               * 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
       2. 层级选择器
           1. 后代选择器
               * 语法： $("A B ") 选择A元素内部的所有B元素
           2. 子选择器
               * 语法： $("A > B") 选择A元素内部的所有B子元素
       3. 属性选择器
           1. 属性名称选择器
               * 语法： $("A[属性名]") 包含指定属性的选择器
           2. 属性选择器
               * 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
           3. 复合属性选择器
               * 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
       4. 过滤选择器
           1. 首元素选择器
               * 语法： :first 获得选择的元素中的第一个元素
           2. 尾元素选择器
               * 语法： :last 获得选择的元素中的最后一个元素
           3. 非元素选择器
               * 语法： :not(selector) 不包括指定内容的元素
           4. 偶数选择器
               * 语法： :even 偶数，从 0 开始计数
           5. 奇数选择器
               * 语法： :odd 奇数，从 0 开始计数
           6. 等于索引选择器
               * 语法： :eq(index) 指定索引元素
           7. 大于索引选择器
               * 语法： :gt(index) 大于指定索引元素
           8. 小于索引选择器
               * 语法： :lt(index) 小于指定索引元素
           9. 标题选择器
               * 语法： :header 获得标题（h1~h6）元素，固定写法
       5. 表单过滤选择器
           1. 可用元素选择器
               * 语法： :enabled 获得可用元素
           2. 不可用元素选择器
               * 语法： :disabled 获得不可用元素
           3. 选中选择器
               * 语法： :checked 获得单选/复选框选中的元素
           4. 选中选择器
               * 语法： :selected 获得下拉框选中的元素

7. CRUD操作:

addClass()	向匹配的元素添加指定的类名。
after()	在匹配的元素之后插入内容。
append()	向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo()	向目标结尾插入匹配元素集合中的每个元素。
attr()	设置或返回匹配元素的属性和值。
before()	在每个匹配的元素之前插入内容。
clone()	创建匹配元素集合的副本。
detach()	从 DOM 中移除匹配元素集合。
empty()	删除匹配的元素集合中所有的子节点。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面。
prepend()	向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo()	向目标开头插入匹配元素集合中的每个元素。
remove()	移除所有匹配的元素。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
replaceAll()	用匹配的元素替换所有匹配到的元素。
replaceWith()	用新内容替换匹配的元素。
text()	设置或返回匹配元素的内容。
toggleClass()	从匹配的元素中添加或删除一个类。
unwrap()	移除并替换指定元素的父元素。
val()	设置或返回匹配元素的值。
wrap()	把匹配的元素用指定的内容或元素包裹起来。
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来。