Jquery

了解Jquery

什么是JQuery
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQueryJavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。简单来说，Jquery是简化版的JS
Jquery的优点：

• 因为jq是轻量级别的框架，大小不大30kb
• 它有强大的选择器，出色的DOM操作封装
• 有可靠的事件处理机制
• 完善的ajax
• 出色的浏览器兼容性
• 支持链式操作，隐式迭代
• 行为层(功能)和结构层(页面元素) 的分离，还支持丰富的插件

---

Jquery的使用

引入Jquery库： 在使用jquery之前，必须要引入jquery库
<script src = "jquery-3.4.1.min.js"></script>"·
声明Jquery变量： [^$ 声明该变量是jq变量 同时$也是JQuery的简写]
var $ 变量名 = 赋值内容;
例如：var $ a = 10 ;
jq中顶级对象是 $ 或者jQuery关键字

注意： jQuery中的 $ 和 jQuery关键字 本身同为一个对象

Jquery变量与Dom变量的转换：

• Dom变量转Jquery变量：
  var oDiv = document.getElementsByClassName(“box”)[0];获取Dom变量
  var $b = $(oDiv);将Dom变量赋值给Jquery变量
• Jquery变量转Dom变量：
  var $c = $b[0];

利用Jquery来设置CSS的方法：

jquery中提供更简便的链式编程（冒号赋值，逗号间隔），与js的写法有所不同

Jquery元素.css(属性名,属性值)
例：$(".box").css("color","red").css("fontSize","30px");
入口函数:
Js中入口函数：window.onload
Jquery中入口函数:$(document).ready(function(){…});/$(function(){...});

文档的加载步骤：
1.解析HTML结构
2.加载外部的样式表和脚本
3.解析并执行脚本
4.构建HTML–DOM模型 (ready方法执行 - JQ入口函数)
5.加载图片等外部资源
6.页面加载完毕 (load方法执行 - JS入口函数)

---

Jquery选择器

1.id选择器
$("#box")
2.class选择器
$(".box")
3.标签名选择器
$("div")
4.通用选择器
$("*")
5.层级选择器
$("div>span").html();
6.后代选择器
$("p span")

find()方法
搜索所有段落中的后代 span 元素$("p").find("span")

7.子元素选择器和children方法

• 子元素选择器$("p>span")
• children方法：
  $("p").children()p标签中的每个子元素
  $("p").children(".span")p标签中的每个span
  取得一个包含 匹配的元素集合中 每一个元素的所有子元素的元素集合

连续子代选择器
$("div>span>span")

8.群组选择器
$("div,p")
9.交叉选择器
两个条件必须同时满足
$("#btn.div")
10. 紧邻选择器和 next()方法

条件1: 紧挨着制定目标 (这里的指定目标： .box)
条件2： 需要在目标的下方书写

$(".box+button")
next方法
$(".d").next()
nextAll 方法
$(".d").nextAll("button")
prev 方法
$(".d").prev()
prevAll 方法
$(".d").prevAll("span")
siblings 方法
$(".d").siblings("button")
11. 同辈选择器（同级/同胞选择器)
可以获取到目标下方 所有的元素(无论是否紧邻)
$(".box~p")
12. 过滤选择器

• :first匹配到第一个符合条件的元素
  $('li:first')
• :last匹配到最后一个符合条件的元素
  $('li:last')
• :not 除了()中指定的条件，获取:前指定的所有元素，
  $("li:not(.list)")
• :even 索引为偶数的
  $("li:even")
• :odd 索引为奇数
  $("li:odd:not(.list)")
• :eq(指定索引值)
  $("li:eq(0)")
• :gt(大于索引值)
  $("li:gt(1)")
• :lt(小于索引值)
  $("li:lt(2)")

13. 属性选择器

1. 获取具有id属性的div
   目标[属性名] 当目标具备这个属性时被选中
   $("div[id]")
2. 目标[属性名=‘属性值’]
   当目标具有 指定属性的属性值时被选中
   $("div[id='div1']")
3. 目标[属性名!=‘属性值’]
   选取目标中不具有指定属性值的所有元素
   $("div[id!='box']")
4. 目标[属性名^=‘属性值’]
   目标指定的属性名， 是以指定的属性值开头的
   $("div[id^='d']")
5. 目标[属性名$=‘属性值’]
   目标指定的属性名 是以指定的属性值结尾的
   $("div[id$='1']").
6. 目标[属性名*=‘属性值’]
   目标指定的属性名 只要包含指定的属性值
   $("div[id*='iv']")

---

Jquery动画效果

1.显示/隐藏

目标隐藏：目标.hide( );
目标显示：目标.show( );
目标根据当前状态显示/隐藏：目标.toggle( );

2.淡入/淡出

目标淡入：目标.fadeIn( );
目标淡出：目标.fadeOut( );
目标根据当前状态淡入/淡出：目标.fadeToggle( );
目标渐变到指定的透明度：目标.fadeTo(动画执行时间,指定的透明度);

3.目标滑入/滑出

目标滑入：目标.sildeDown( );
目标滑出：目标.slideUp( );
目标根据当前状态滑入/滑出：目标.slideToggle( );

小括号中设置动画执行时间

4.自定义动画

目标.animate({
		动画效果
		}，动画执行时间，动画结束后执行的函数);

在动画结束后执行的函数内在此添加animate多重嵌套来实现连续的动画效果

$(".text:first").animate({
		opacity: 1,
		left:"200px"
	},500,function(){
		$(this).animate({ top:"-100px" },800,function(){
			$(this).fadeOut(200)
		})	

---

Jqoery中操作Dom节点

1. 节点的创建
   var $ 节点名称 = $(节点内容);
   例：var $ li = $ ( <li></li>);
2. 节点的添加
   • 内容.appendTo(目标） 将内容添加到目标中的最后一位
     例$("<li></li>").appendTo("ul");
   • 目标.perpend(内容） 将内容添加到目标中的第一位
     例：$("ul").prepend("<li></li>");
   • 目标.after(内容） 将目标添加到指定内容之后
     例：$(".box").after("<span></span>");
   • 目标.insertAfter(目标） 将内容添加到目标后(若内容时页面已有元素，则将该元素移动到指定位置)
     例：$("ul").insertAfter($("div"));
   • 目标.before(内容） 将内容添加到指定目标前
     例：$(".box").before("<span></span>");
   • 内容.insertBefore(目标)） 将内容添加到目标前(若内容时页面已有元素，则将该元素移动到指定位置)
     例：$(".less").insertBefore($(".box"));
3. 节点删除
   • 指定目标.remove(） 将制定目标删除
     例：$("span").remove();
   • 目标.empty(） 清空目标的子节点(不会对自身造成影响)
     例：$("ul").empty( );
4. 节点复制
   目标.clone( ); 返回目标的复制体（需要创建元素接收或者直接使用）
   例：var $box = $(".box").clone();

---

Jquery中数据绑定

• 元素事件绑定
  元素.on( 事件类型，执行的子元素，参数，执行函数）；

  事件类型：是必填选项，可以绑定多个事件，但仅限于功能相同，事件 功能不同时可采用链式变成在其后续写
  执行的子元素是可选选项，可以不写
  参数指执行时传递到函数内部的数据，是可填选项，可以通过event.date来获取
  执行函数是必填选项

  例：$(".box").on("click mouseout",".min_box",{sum:20},function (e) {执行函数)
  on事件绑定与函数名绑定事件的区别：
  函数名绑定事件仅作用于页面的已有元素，对于后续添加的元素无效，而.on绑定事件与事件监听效果类似，可以对后续添加的元素也实现效果

• 元素事件解绑
  元素.off(参数1，参数2，参数3）

  参数1：符合要解除目标的事件类型和事件命名，是必填选项
  参数2：看置顶可以出发绑定事件的后代元素，是可选参数
  参数3：当事件运行时的执行函数，是可选选项

  例：$('ul').off('click',"li");
  也可以直接使用(’.class名’)，这样的话，可以移除相同命名空间的不同事件，对于模拟操作.trigger()和.triggerHandler()，用法也是一样的(如果该事件已经删除，则无法模拟使用)

读取和使用鼠标状态：
$('button').mousedown(function(e){
alert(e.which) 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
})
阻止默认事件和冒泡事件：
阻止默认事件 e.preventDefault();
阻止冒泡事件 e.stopPropagation();
对象的方式 绑定多个事件

$("button").on({
    mousedown:function () {
        alert("鼠标按下了");
    },
    mouseup:function () {
        alert("鼠标抬起了")
    }
})

事件命名空间：
针对同名元素绑定事件时的元素查找
$('input').on('click.a', function () {});
$('input').on('click.b', function () {});

使用.off来解决永远只响应一次的时间，避免事件叠加冲突：
var iCount = 0;
function sayHello() {
    alert("Hello!");
    }
$('.btn3').on("click", function () {					//每单击一次，响应一次事件
        iCount = iCount + 1;
        $('.box').html("Say Hello" + iCount + "次");
        $(".box").off('click').on('click', sayHello); 	//先移除事件（避免事件叠加），再绑定事件
    })

---

• 判断目标样式
  if(被判断目标.is(".类名")){执行的代码/功能 }
• attr与prop的区别：
  • 相同：
    两者都是用于获取和设置元素属性值
  • 区别：
    prop是处理元素的固有属性；attr处理自定义属性
    操作固有属性时，prop 返回正确值，attr 返回undefind
• each循环：
  each( 需要遍历的目标，每个目标要执行的功能 )
  用于循环遍历成员、数据，常用于多元素或者任意数组和对象的循环访问
• 停止动画：
  stop(参数1，参数2)
  参数1：stopAll是否清除动画队列(默认false，后续动画继续执行)
  参数2：goToEnd，是否立即完成当前动画(默认false，立即停止)
• 释放#的所有权：
  var $ js = $.noConflict()使用js代替$