前端 --- 46 jQuery 初始

一.引入方式

1.直接下载文件到本地（最常用），从本地中导入

2.使用文件的网络地址，就像我们img标签里面的那个src的用法差不多。

引入完之后，就可以直接使用jQuery的语法来写了，但是还是要写在script标签里面，
并且要注意引入顺序，先引入文件，再在script标签里面写jQuery的代码，先导入再使用。

二.基础语法

 三.选择器(查找标签)

　　1.id选择器

$("#id")  #不管找什么标签，用什么选择器，都必须要写$("")，
   引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，
   用原生JS找到的标签对象叫做DOM对象，看我们上面的jQuery对象部分的内容

　　2.标签选择器

　　

　　3.class 选择器

　　

　　4.配合使用

　　

　　5.所有元素选择器

　　

　　6.组合选择器

　　

　　7.层级选择器

　　

　　8.属性选择器

　　

　　示例

　　

　　

四.筛选器(选择之后进行过滤)

 　　1.基础筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

$("div:has(h1)")// 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，
　　　　　　　　　　　　把这些div标签的后代中有h1的div标签筛选出来
$("div:has(.c1)")// 找到所有后代中有c1样式类（类属性class='c1'）的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

 　　2.表单筛选器(多用于找form表单里面出现的input标签)

　　

　　

 　　3.表单对象属性

　　

:enabled      可用的
:disabled　　　禁止使用
:checked       默认被选中
:selected      select标签中被选中

 

 　　4.筛选器方法

　　① 下一个元素　

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它

　　② 上一个元素　　

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

　　③ 父类元素

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，
　　　　　　这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。

　　④ 儿子和兄弟元素

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选

　　⑤查找(搜索所有与指定表达式匹配的元素)

$("div").find("p")
　等价于
$("div p")

　　⑥筛选

　　筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，
　　　　　　　　　　　　　　　　和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签
　等价于 
$("div.c1")

 　　⑦补充

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

五.样式操作

　　1.样式类

　　①添加删除class类的值来修改样式　　

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

　　②直接修改css的属性来修改样式　

css("color","red")//DOM操作：tag.style.color="red"

示例：
$("p").css("color", "red"); //将所有p标签的字体设置为红色

　　③位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移，不能设置位置
$(window).scrollTop()  //滚轮向下移动的距离
$(window).scrollLeft() //滚轮向左移动的距离

offset  和  position　的区别
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

.position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，
　　　　如果找不到这样的元素，则返回相对于浏览器的距离。

　　④ 尺寸

height() //盒子模型content的大小，就是我们设置的标签的高度和宽度
width()
innerHeight() //内容content高度 + 两个padding的高度
innerWidth()
outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，
　　　　　　不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离
outerWidth()

六.文本操作

　　1.HTML代码　

html()// 取得第一个匹配元素的html内容，包含标签内容
html(val)// 设置所有匹配元素的html内容，识别标签，能够表现出标签的效果 

　　2.文本值

text()// 取得所有匹配元素的内容，只有文本内容，没有标签
text(val)// 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去

　　3.值

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

　　①设置值

　　

　　② 获取被选中的checkbox 或 radio 的值

　　

　　③注意事项

七.属性操作

　　1.用于自带属性等和自定义属性

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr(属性名)// 从匹配的元素中删除一个属性

　　2.用于checkbox 和 radio 的属性

prop() // 获取属性
removeProp() // 移除属性

 　　3.prop 和 attr 的区别

　　①

　　②

　　③

　　④总结

1.对于标签上有的能看到的属性和自定义属性都用attr

2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

八.文档处理

　　1.添加到指定元素内部的后面　

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

　　2.添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

　　3.添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

　　4.添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

 　　5.移除和清空元素

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在

　　6.替换

replaceWith()
replaceAll()

　　7.克隆

clone()// 参数，看下面的示例
          参数为true时 ,完全克隆

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>克隆</title>
  <style>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  </style>
</head>
<body>

<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // clone方法不加参数true，克隆标签但不克隆标签带的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加参数true，克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>
</body>
</html>


点击复制按钮