前端 --- 6 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>


点击复制按钮 

九.事件

　　1.常用事件

click(function(){...})    点击事件
hover(function(){...})　　　光标 移进 和 移出 (需要两个function)
blur(function(){...})　　　　丢失光标
focus(function(){...})　　　　获取光标
change(function(){...})   //内容发生变化，input，select等
keydown(function(){...})   按下某键
keyup(function(){...})  　　抬起某键　　
mouseover 和 mouseenter的区别是：mouseover事件只要你在绑定该事件的对象上移动就会一直触发，
　　　　　　　　　　　　　　　　　　 mmouseenter事件只触发一次，表示鼠标进入这个对象

 　　2.input 事件(只能用 on 绑定)

　　　实时监听input输入值的变化

 

 　　3.事件绑定 

　　　　①  .click(function(){...})

　　　　②  .on('click',function(){...})

　　　　③移除事件

　　　　　　$('li').off('' click");

　　　　④阻止后续事件执行

　　　　　常见阻止表单提交等，如果input标签里面的值为空就组织它提交，就可以使用这两种方法

　　　　　　1).  return false;

　　　　2).  e.stopPropagation();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">  #action里面如果没写url，默认是将内容提交到当前页面的url处
    <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.stopPropagation();
    });
</script>
</body>
</html>

　　　　⑤注意

　像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，

但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。

　　4.

　　　①阻止事件冒泡

　　子级标签事件发生 带动 父级标签事件发生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    //冒泡的意思就是因为html可以嵌套，如果你给儿子标签绑定了点事件或者没有绑定点击事件，
　　　　父级标签绑定了点击事件，那么你一点击子标签，不管子标签
    有没有绑定事件，都会触发父级标签的点击事件，如果有，会先触发子标签的点击事件，然后触发父级标签的点击事件，　　
　　不管子标签有没有点击事件，都会一级一级的还往上找点击事件
    //所以我们要阻止这种事件冒泡
    $("span").click(function (e) { //这个参数e(只是个形参，写evt或者event名字的也很多)表示当前事件本身，这个事件也是一个对象
        alert("span");
        //return false；这个也可以阻止
        e.stopPropagation(); 用事件对象的这个方法就能阻止冒泡 （Propagation：传递的意思）
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

　　②事件委托

　　通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。

$("table").on("click", ".delete", function () { //中间的参数是个选择器，前面这个$('table')是父级标签选择器，
　　　　　　　　　　　　选择的是父级标签，意思就是将子标签（子子孙孙）的点击事件委托给了父级标签
  //但是这里注意一点，你console.log(this)；你会发现this还是触发事件的那个子标签，这个记住昂
  // 删除按钮绑定的事件 
})

十.    页面载入　

　　页面加载完成之后 要做的内容　

　　1.window.onload = funtion(){...}

缺点: ( 只能一个 , 慢 )
   1.如果你自己写了两个js文件，每个js文件中都有一个window.onload的话，那么后引入的文件会把前面引入
的文件的window.onload里面的js代码全部覆盖掉，那么第一个文件的js代码就失去了效果，
   2.还有一个问题就是，window.onload会等到页面上的文档、图片、视频等所有资源都加载完才执行里面的js代码，
导致有些效果的加载比较慢，

 　　2.①

$(document).ready(function(){
// 在这里写你的JS代码...
})

　　② (上面的简写   常用)

$(function(){
// 你在这里写你的代码
})

 十一.动画效果

　　1.常用简单方法

// 基本
show([s,[e],[fn]])  $('.c1').show()  //show(5000),就是5秒之后显示出来这个标签，并且有一个动画效果，
　　　　　　　　　　　　　　　　　　　　　　（搞个img图片看看效果），后面两个参数先不用管
hide([s,[e],[fn]])  $('.c1').head()
toggle([s],[e],[fn])//这几个toggle的意思就是你原来是什么效果，我就反着来
// 滑动（拉窗帘一样）
slideDown([s],[e],[fn])  
//使用的时候别忘了给标签设置一个高度和宽度，其实就是控制你的标签高度，如果你写$('#di').slideUp(5000)；
　　　　　　　　意思就是5秒内把你的高度变为0
//还有如果你直接操作的是img标签和操作img标签的父级标签，两个的效果是不同的
slideUp([s,[e],[fn]]) 
slideToggle([s],[e],[fn])
// 淡入淡出（控制透明度）
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])  o参数是透明度，0-1的区间，意思是淡入或者淡出到一个多大的透明读
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            /*background: url("hlw.png") no-repeat;*/
             200px;
            height: 200px;
            /*position: absolute;*/  /*自己试以下position：absolute的效果*/
            display: none;
        }
        .c2{
            height: 100px;
            background-color: lawngreen;
        }

    </style>
</head>
<body>

<!--<div class="c1" hidden></div>-->  <!--不用hidden，上面写display：none也是可以的-->
<div class="c1"></div>
<div class="c2"></div>
<script src="jquery.js"></script>
<script>
    // $('.c1').hide(3000);
    $('.c1').show(3000);

</script>
</body>
</html>

　2.　 自定义动画  ( animate)

<!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>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0  //1秒之后透明度变为0，注意写法，animate({属性：值},毫秒数) 
    }, 1000)
  })
</script>
</body>
</html>


点赞特效简单示例

 十二. 补充

　　1. each 迭代函数,可以迭代对象和数组

　　　①迭代数组

li =[10,20,30,40]
$.each(li,function(i, v){  
  console.log(i, v);//function里面可以接受两个参数，i是索引，v是每次循环的具体元素。
})

　输出：

010
120
230
340

　　　　 ②遍历对象

// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
})

#.each() 方法用来迭代jQuery对象中的每一个DOM元素。
　每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。
   由于回调函数是在当前DOM元素为上下文的语境中触发的，
   所以关键字 this 总是指向这个元素。

　　可直接写成

$("li").addClass("c1");  // 对所有标签做统一操作

　　③  终止遍历

 　　2.   .data()   在标签上储存数据

　　①  设置值

　　　　　.data(key, value): 设置值

　

　　②  取值

　　　.data(key): 取值，没有的话返回undefined

 

 

 　　③删除数据

　　　　

 　　3.插件

　　①. jQuery.extend(object)

 　　　jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

<script>
jQuery.extend({ //$.extend({})
  min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>

 　　②.jQuery.fn.extend(object)

 　　　　给任意的jQuery标签对象添加一个方法

<script>
  jQuery.fn.extend({  //给任意的jQuery标签对象添加一个方法
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>