JQuery

# 概览

jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（框架）于 2006 年 1 月由 John Resig 发布。jQuery 设计的宗旨是 “write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。
jQuery 的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的 CSS 选择器，并且可对 CSS 选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

# 如何引入

• 引入 jQuery 文件得用 script 标签引用
• 在 body 中创建 script 标签并编写

在jQuery中不用写 window.onload = function(){}
直接给 $(function(){})➡相当于window.onload

Js中 $("h1").onclick = function(){}  在jq中是 $("h1").click(function(){})
通过=(等号)赋值的方法都变成了函数,在jq中基本见不到等号,所有的赋值操作都是函数传参的操作

# jQuery 选择器

$(""); // 所有的css选择器对JQ都有用

$(".nav>li:nth-child(3)>a").css("color", "red"); // css选择器

$("li.box"); // li下class为box的元素，注意li后边不可以有空格

$("p"); // 选取所有p元素

$("#intro"); // 选取所有id=intro的元素

# jQuery 属性选择器

$("div[id]"):所有包含id属性的div元素

$("[href]"):选取所有带有href属性的元素

$("[href = '#']"):查找所有 href="#" 的元素

$("a[title]"):所有包含title属性的a元素

$("a[href = '#']"):查找所有 href="#" 的a元素

$("input[name != 'one']"):查找所有name属性不是one的input元素

$("input[name ^= 'news']"):查找所有name属性以news开头的input元素

$("input[name $= 'letter']"):查找所有name属性以letter结尾的input元素

$("input[name *= 'man']"):查找所有name属性包含man的input元素

$("[href $= '.jpg']"):选取所有href值以.jpg结尾的元素

:first 匹配第1个元素  :last 匹配最后1个元素  odd/even:下标为奇/偶  gt(2):下标大于2的

[]前有元素则选取带有相关要求的指定类型元素，否则选取所有元素(因为没特定指定元素)

# 链式操作

$("h1")
  .click(function () {
    alert("单击");
  })
  .css("color", "red")
  .mouseover(function () {
    this.style.backgroundColor = "red";
  });
// 此处是链式操作，操作对象都是h1时才可以这样写

# 取赋值一体化

Js中的innerHTML 在jq中是 .html()➡可以解析标签
$("#div1").html() 获取(div1中所有的文本都获取到)
$("#div1").html("<h2>新内容</h2>")➡赋值

Js中的value 在jq中是 .val()➡input的才可以用.val()  .val()➡清空 .val("X”)➡赋值X

还有.text()方法

// js和jq可以共存，但不能混用

# jQuery 方法

.prop 获取或设置复选框的状态 .prop('checked') .prop("checked",true)

复选框 单选框 下拉列表 的单击事件最好用change()事件, 别用click()事件

.filter() 过滤，对已经获取到的网页元素进行过滤

.not() filiter的反义词

.has() 拥有，直接判定子节点中是否有符合条件的元素

$("div").filter(".box").css("backgroundColor","red");  $("div")为获取的元素
class="box"的 div(这个例子中div是被获取到的)
在已经获取到的div元素中找到class为box的 div节点

$("div").not(".box").css("backgroundColor","red");
class不是box的div

filter() 和 not() 的意思：180的家长

$("div").has(".box").css("backgroundColor","red");
div下有class为box的子元素div(父元素被选中) ➡ 小孩是180的家长
在div节点下找到 子节点为class="box" 的 div节点

筛选：filter 筛选出与指定表达式匹配的元素集合，用逗号分隔多个表达式
not:从匹配元素的集合中去掉与指定表达式匹配的元素
has:保留包含特定后代的元素，去掉那些不含有指定后代的元素

.prev() 查找当前兄弟节点的上一个节点(前一个) .prevAll() 前边所有

.next() 查找当前兄弟节点的下一个节点(后一个) .nextAll() 后边所有

.parent() 上一级(父节点) .siblings() 兄弟节点(当前节点的所有兄弟节点)

.children() 只找儿子辈，孙子辈不着(儿子级的集合)

.find("a") 只查找到a元素 (是找出正在处理的元素的后代元素的好方法)
.find() 一直往下找

.index() 获取当前节点在兄弟节点中的下标
.eq() 通过下标获取到指定的元素节点
注：下标都是从0开始

.attr() 设置和修改行内属性
<div id = "div1" title = "hello" class="box">

alert($("#div1").attr("title")) ➡ hello   获取
alert($("#div1").attr("class")) ➡ box   获取

$("#div1").attr("title","world")
$("img").attr("src","images/1.jpg")
以上两个是修改

$("#div1").attr({
    title: "world",
    class: "xxxx",
    yyy: "zzz"
})
一定要加引号，否则没效果，每个属性后要加逗号
变量不可以加引号
切记是冒号而不是等于号

$.fn.extend  jQuery 提供的扩展方法，使用该方法给 jQuery 新增属性或方法
$..extend    jQuery 提供给 $ 的扩展方法

.val() 获取/设置表单元素的值  input类型的使用.val()
alert($("input").val()) jq取值只能取第一个符合元素的值
$("input").val("hello") jq赋值批量操作,会对所有获取到的元素赋值

.size() 输出当前获取网页元素的个数
.length()  不是js中的length
alert($("input").size())➡3
alert($("input").length())➡3
注:.css() .attr() .html() .val() 一样都是批量操作,不需要循环来遍历

.text() 设置和修改文本节点
$("h3").text("你好") 修改
$("h3").text() 获取

$(this) 代表他自己(事件触发的那个对象)

$("li:not(li:first)") 除去li中的第一个，剩下的样式是……(除了它以外，剩下的会怎么怎么样)

.addclass() .removeclass()  给指定的元素添加/移去类

$("#div1").addclass("box1 box2 box3") 有的则不再添加
$("#div1").removeclass("box2 box3") 移去有的，没有的也不会报错

.width() .innerWidth() .outerWidth() .outerWidth(true)
.height() .innerHeight() .outerHeight() .outerHeight(true)和上边的用法一样
.width() width本身
.innerWidth()  width + padding
.outerWidth()  width + padding + border
.outerWidth(true) width + padding + border + margin

# DOM 节点操作

内部插入：

.append() .pretend() 将内容插入到指定元素内部中的末尾和首部
$("ul").append("<li>dom</li>") 把li插到ul下
上边的 "<li>dom</li>" 新建了一个li

.appendTo() .pretendTo()  插入到子节点的末尾/首部
$("span").appendTo($("div"))
$("span").pretendTo($("div"))
找到span节点，插入到div节点的子节点的末尾/首部

外部插入：

.before() .after() 在每个匹配元素之前/后 插入内容
$("div").before($("span")).css("color","red")  div前面是span，影响div

.insertBefore() .insertAfter() 将匹配元素插入到括号中的元素前/后面
(括号中的元素前/后面是匹配元素)
$("span").insertBefore($("div")).css("color","red") 找到span节点插入到div的前面，影响span
$("div").insertAfter($("span")) 找到div节点，插入到span节点后(span节点后是div)

删除：

.remove() 删除元素节点，并不会保留这个元素节点上之前的事件和行为
.detach() 删除元素节点，会保留这个元素节点上之前的事件和行为
.empty()  $("p").empty() 删除匹配的元素集合中所有的子节点，包括自己的文本(里边的内容)

# 事件绑定方法 (on,off)

1.给一个事件添加一个函数
$("#div1").on("click",function(){
  alert("hello");
})

2.同时给多个事件添加一个函数,多个事件间可以用空格隔开
var i = 0;
$("#div1").on("click mouseover",function(){
  $(this).html(i++);
})

3.给不同的事件添加不同的函数
$("#div1").on({
  click:function(){
    alert("单击");
  }, ➡逗号最后一个位置可以不加，其他位置要加
  mouseover:function(){
    $(this).css("backgroundColor","red");
  }
})

4.事件委托：第2个参数是触发对象的选择器
$("ul").on("click","li",function(){
  $(this).css("backgroundColor","red");
})

var i = 6;
$("#btn").click(function(){
  $(`<li>${i++ *1111}</li>`).appendTo($("ul"));
  // 这里边的 ` 是1旁边的~键中的数字键
  // 新增节点(在源码中怎么写在这就怎么写)
})

off:
$("#div1").off()  //取消所有事件上的所有函数
$("#div1").off("click") //取消某一事件下的所有函数
$("#div1").off("click",show) //取消某一事件下指定的函数

# 滚动高度及阻止默认行为

.scrollTop()  滚动的高度
$(window).scrollTop()

$("a").click(function(ev){
  ev.preventDefault();  //阻止默认行为(不让其跳转到指定的URL)
  ev.stopProgation();  //阻止事件冒泡(不弹出警告框)
  或 return false;  //既阻止事件冒泡，又阻止默认行为
  /* 或者在 a 的 href 中 加上javascript:void(0) 或 javascript:; 阻止a的默认跳转
  <a href = "javascript:void(0);"> 或 <a href = "javascript:;"> */
})

# 鼠标事件及 keypress 和 keydown

which: 鼠标事件:button 用在鼠标上  1:左键 2:滚轮 3:右键

用在键盘上： keydown:键码(不区分大小写)➡以大写为主
keypress:字符码(区分大小写，没有功能键)
$(document).mousedown(function(ev){
  alert(ev.which); //1,2,3
})
$(document).keydown(function(ev){
  ……
})
$(document).keypress(function(ev){
  ……
})

# 距离

.offset():直接获取当前元素,距离最左边的距离,margin不算数,不管有没有父节点，padding也不算

.position():直接获取当前元素,距离第一个有定位父节点的距离,margin算在内(margin算在当前元素的大小身上)

.offsetParent():查找第一个有定位的父节点,如果父节点没定位就继续网上找,最终找到html节点
.offset().top()  .position().top()  $("#div1").offsetParent().css  这里的css影响到.offsetParent()

# .each () jQuery 循环函数

$("input").each(function (index, item) {
  // item.value = index; ➡js写法
  $(item).val(index); //jq写法
});
//将input中的value属性改为下标
//item 为原生对象

# jQuery 特效函数

.hover(funcOver,funcOut)  funcOver:移入函数 funcOut:移出函数
.hide() 隐藏  第一个参数:动画持续的毫秒数 第二个参数:回调函数,动画结束时执行的
.show() 显示  第一个参数:动画持续的毫秒数 第二个参数:回调函数,动画结束时执行的
注:.hide()和.show()的动画效果是,从左上角收起和从左上角展开,并且和定位中的top和bottom有关

$("div1").hover(function(){
  $("div2“).hide(2000,function(){
    $("div1").html("移入");
  })
  ,function(){
    $("div2").show(2000,function(){
      $("div1").html("移出");
    })
  }
})

.slideDown() .slideUp() 动画效果是卷闸效果(车库门)
.fadeIn() .fadeOut() 动画效果是淡入,淡出
.fadeTo() 动画持续时间,透明度0——1,回调函数
这五个和上边的用法一样

# .ainmate () 动画方法:

第一个参数：要变化的css样式和目的值
第二个参数：动画持续时间
第三个参数：回调函数

$("div1").click(function(){
  $("div1").animate({   //第二个没写，第三个参数默认是"swing",其中第三个位置可以是function(){}这种形式
    width: 300,
    height: 300,
  },4000,"linear");
  $("div2").ainmate({
    marginLeft: 200px, //margin-left这种形式要写成marginLeft这种形式，否则会出错
    width: 300,
    height: 300
  },3000)
})

默认的运动形式: 慢快慢(swing)  匀速(linear)
$("div").stop(true).animate({}) 为了保证动画每次都可正常触发(不攒次数),要在animate之前调用一次stop
小技巧在animate前加.stop(true)

# 停止动画和延迟动画的函数

.stop()
.finish()

.delay()
$("div1").click(function(){
  $("div1").animate({width:300},2000).delay(4000).animate({height:3000},2000)
})
//.delay(4000)表示变宽之后延迟4s再变高
// 后边的.animate()表示 链式操作：先变宽再变高

$("div1").stop() 停止第一个动画，但是后续动画正常运动
$("div1").stop(true) 停止所有动画
$("div1").stop(true,true) 停止所有动画,并且将当前正在进行的动画,直接到达目的值
$("div1").finish() 停止所有动画,并且将所有的动画都达到目的值

.mouseleave()/.mouseout()
只要在元素上就不会触发,离开被选元素时触发/离开任何子元素都会触发

.mouseOver()/.mouseOut()
.mouseEnter()/.mouseleave()

.toggleClass() 对类的操作,有类就删除,没类就添加
.toggle() 类似单击回来单击回去 显示就隐藏，隐藏就显示

# ### 定时器

var time = setInterval(function(){})
clearInterval(函数名)  因为上边是time，所以这里的函数名应该是time

# 查找元素节点

doucument 指文档 (html 文档) window 指窗口 (html 文档 + 顶部等，比 document 加载慢)

.parentsUntil()
查找当前元素的所有父元素,直到遇到匹配的那个元素为止
.parentsUntil("html")➡(div1,html)不包括div1和html，只是他俩之间的元素

.nextUntil()
查找当前元素之后的所有兄弟元素,直到遇到匹配的那个元素为止,只是他俩之间的元素

.prevUntil()
查找当前元素之前的所有兄弟元素,直到遇到匹配的那个元素为止,只是他俩之间的元素

.parent() 获取父元素 .parents() 获取父元素们(如果没参数，则到html参数)
.closest() 获取父节点,必须传入参数,参数也是选择器,只获取第一个符合条件的元素，注：是从自身开始找的，包括自己
获取一堆节点用.parents() 获取一个父节点用 .closest()
.closest(selector)  获取指定的父元素节点

# 包装

<div>
  <span></span>
</div>
  <span></span>
  <span></span>

.wrap() 给每一个获取到的元素节点单独包装
$("span").wrap("<p class="box"></p>) 每个span标签外都有一个p标签

.wrapAll() 整体包装
$("span").wrapAll("<p class="box"></p>) 所有的span外整体套了一个p标签
.wrapInner() 内部包装
$("span").wrapInner("<p class="box"></p>) 每个span都像下边这样
<span>
  <p></p>
</span>

.unWrap()没有参数  删除包装,删除上面一层包装,不包括body节点,没有包装就不会删除
$("span").unWrap() div节点被删除

# 克隆

.clone() 克隆 默认只会克隆节点本身,并不会克隆元素节点的行为和事件
.clone(true) 既会克隆节点本身,也会克隆元素节点的行为和事件

# 拼接选择器

.add() 可以将多个选择器拼接在一起
$("div").add("span").add("ul li") 可以写成 $("div,span,ul li")
但写成这样的话,如果选择器过多,会不好分析代码

# slice 选择器

.slice(下标) .slice(start,end) 但范围是[slice,end)
在jq中表示 获取指定范围内获取到的元素节点

$("ul li").slice(1,4).css("backgroundColor","red")
范围是从下标为1的元素开始到下标为4的元素结束,但包含下标为1的元素,不包括下标为4的元素

# scroll 事件

.scroll()事件 $(window).scroll(function(){})
当用户滚动指定的元素时,会发生scroll事件。scroll事件适用于所有可滚动的元素和window对象(浏览器窗口)

点击和悬浮效果的实现(右侧导航条)

$("html,body").stop(true).animate({
  scrollTop:0   //返回顶部效果的实现
},500)

//一
$(window).scroll(function(){
  var length = $("ul li").size();
  for (var i = 0; i < length; i++){
    var top = parseInt($("div").eq(i).offset().top);
    var scrol = parseInt($(window).scrollTop());
    if(scroll > top){
      $("ul li").eq(i).addClass("active").siblings().removeClass("active");
    }
  }
})

//二
var ind = parseInt((hgt - oneHeight + searchHeight) / divHeight + 1);
if (ind > 0){
  $("ul li").eq(ind).addClass("active").siblings().removeClass("active");
}
//一和二是随着滚动条的变化而变化

//三
$("ul li a").click(function(event){
  /*
    var index = this.title;
    var id = "#index_" + index;
    $("html,body").animate({
      scrollTop = $(id).offset().top
    },1000)
   */
   $("html,body").animate({
     scrollTop:$($.attr(this.'href').offset().top)
   },1000)
})

//四
var height = $("div").outerHeight();
$("ul li a").click(function(){
  var ind = $(this).parent().index();
  $("html,body").animate({
    scrollTop: ind * height
  },1000)
})
//三和四是点哪个，到达哪个的地方

var myLi = $("div").html("哈哈") 创建一个本文为"哈哈"的新li
var myBtn = $("<button id = 'remove'>").text("删除")
创建一个id为remove，文本为"删除"的新按钮