Web_jQuery

郝鑫芸

已于 2023-07-05 15:13:17 修改

阅读量140

点赞数

分类专栏： jQuery 文章标签： jquery

于 2020-10-09 11:17:55 首次发布

本文链接：https://blog.csdn.net/qq_40041509/article/details/108703271

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery框架:

内容：掌握jQuery的思想设计与理念
官网：http://jquery.com/;
汉化：http://www.css88.com/jqapi-1.9/;
在线API：http://api.jquery.com/;
jQuery在线API: http://hemin.cn/jq/;

所谓框架:

就是个人或者团队开发出来的帮助程序猿快速开发的工具代码。第三方(第三方框架) 说的是：我一方、我的代码一方、别人的代码一方(第三方框架)。一般形容框架都是完整的一套代码体系；简单的封装三两个方法不能称之为框架。

jQuery框架就是一套其他团队开发出来的完整的框架工具。主要是针对JS的DOM操作的封装，dom节点获取、增删改查、dom操作等等。
API（Application Programming Interface应用程序编程接口）在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。

为什么要学习jQuery?

原因1:
目前jQuery框架已经是主流的非标准的公司标准框架
原因2:
因为jQuery可以解决我们js的dom操作的那些痛点!
js操作dom的痛点:

原生js所有对象的事件（window.onload）有层叠覆盖问题(后面事件覆盖前面的事件)。
原生js的代码容错性差。

 //例如:
  document.getElementById("id写错了");
 var box=document.getElementById("bo"); 
// 一旦使用box对象 则报错，报错意味着程序停止运行

存在着大量浏览器兼容问题
jQuery分为1.X版本 2.X版本 3.X版本；
如果我们下载使用的是1.X版本那么只要这个方法能用,就没有任何兼容问题一直兼容到IE5。
原生js简单功能实现过程繁琐
举例: 显示盒子设置文字效果;分别使用原生js和jQuery两套实现方式作对比

//原生js
var btn=document.getElementsByTagName("button")[0];
var liArr=document.getElementsByTagName("li");
var ul=document.getElementsByClassName("box")[0];
btn.onclick=function () {
	for(var i=0;i<liArr.length;i++){
		liArr[i].style.display="block";
		liArr[i].innerHTML="待我长发及腰，遮住一身肥膘，纵然虎背熊腰，也要高冷傲娇。"
	}
}

//   jQuery实现
$("button").click(function () {
	$(".box>li").show(5000).html("待我长发及腰，遮住一身肥膘");
})

jQuery最核心的两大特点:

1.链式编程
2.隐式迭代

JQ入口函数

方式一：$(document).ready(function(){});
方式二：$(function(){ });

JQ比js入口函数优点在于:

js的入口函数是:文档、节点、图片都加载完成后才执行。
JQ的入口函数只是：文档、节点加载完成后就执行。
JQ最重要的就是$符号，$符号是JQ的核心。

为什么选择$?
jQuery使用$符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

理解JQ的$符号

$(); // 调用上面我们自定义的函数$；
$(document）.ready(function(){}); // 调用入口函数；
$(function(){}); // 调用入口函数；
$(“#btnShow”) // 获取id属性为btnShow的元素；
$(“div”) // 获取所有的div元素；

jQuery和$是===的关系

完全一样

JQ对象和js对象的相互转换

JQ对象转换成JS对象:

JQ对象.get(索引值) 返回值是JS对象；
这里面的索引值表示：JQ的一次性会选择很多元素，想要哪个就使用哪个元素的索引值。
JQ对象[索引值]；
JS对象转换成JQ对象：$(js对象)；

JQ所支持的选择器

JQ几乎支持所有CSS以及CSS3选择器

ID选择器console.log($("#box"));
class选择器console.log($(".pox"));
元素选择器console.log($("li"));
子代选择器console.log($("ul>li"));
后代选择器console.log($("#box .inner"));
并集选择器console.log($("#box,.pox"));
交集选择器console.log($("p.pox"));
css3选择器也都支持console.log($("li:nth-child(2)"));

JQ的过滤选择器

JQ过滤选择器，能够过滤掉一部分元素，只选择一部分。
:eq(index) $("选择器:eq(索引值)")
表示在已经选择的众多元素中找到指定索引值的那个元素；
:odd $("选择器:odd")
表示在已经选择的众多元素中找到索引值为奇数的元素；
:even $("选择器:even")
表示在已经选择的众多元素中找到索引值为偶数的元素；
:first $("选择器:first")
表示在已经选择的众多元素中找到第一个元素；
:last $("选择器:last")
表示在已经选择的众多元素中找到最后一个元素；
:lt(index) $("选择器:lt(index)")
表示在已经选择的众多元素中找到比当前 lt索引值还小的那些元素不包括自己；
:gt(index) $("选择器:gt(index)")
表示在已经选择的众多元素中到比当前 gt索引值还大的那些元素不包括自己；
:not(选择器) $("选择器:not('选择器')")
表示在已经选择的众多元素中排除not选择器选择的元素选择剩下那些元素；

JQ的筛选选择器

JQ的筛选选择器都是一些方法，跟原生js的节点访问关系很像。
.parent()—找到父元素（亲的）;
.children(选择器)—找到子元素参数可选传入选择器表示找到指定的子元素,否则就是默认找到所有元素;
.find(选择器selector)—找到后代指定选择器的元素 参数必须传否则找不到;
.siblings(选择器)—找到所有兄弟元素如果选择器则表示筛选指定选择器的兄弟
.eq(index) 和:eq()功能一样–在已经选择众多元素中找到指定索引值的元素；
.eq比:eq方便:
例如如果索引值是变量的情况

$("ul>li:eq("+变量+")")
$("ul>li").eq(变量)

.first()
.last()
.next()—找到下一个兄弟节点；
.prev()—找到上一个兄弟节点；

jQuery操作DOM

A. 样式操作

一、样式属性操作 `.css()`

JQ的css方法可以设置和获取css样式；

$("选择器").css("css属性名")
表示获取元素指定css属性的值(包括内嵌和外链)；
$("选择器").css("属性名","属性值")
设置元素单个css样式；
$("选择器").css(json对象)
可以一次性设置多个css样式；

二、JQ关于类的操作的方法

addClass("类名")增加一个类
$(selector).addClass(“liItem”);

$("button").eq(0).click(function () {
		$("#box").addClass("fz co ml");
})

removeClass("类名")删除一个类
$(selector).removeClass(“liItem”);
$(selector).removeClass(); 不指定参数，表示移除被选中元素的所有类

$("button").eq(1).click(function () {
	$("#box").removeClass("ml");
})

hasClass("类名")判断是否包含指定类名
$(selector).hasClass(“liItem”);此时，会返回true或false；

$("button").eq(2).click(function () {
	// console.log($("#box").hasClass("ml"));
	if($("#box").hasClass("ml")){
		$("#box").removeClass("ml")
	}else{
		$("#box").addClass("ml")
	}
})

toggleClass(“类名”)
判断是否包含指定类名；如果包含则自动删除，如果不包含则自动添加；
$(selector).toggleClass(“liItem”);

$("button").eq(3).click(function () {
	$("#box").toggleClass("ml")
})

注意点：操作类样式的时候，所有的类名，都不带点（.）
经验：

操作的样式非常少，那么可以通过.css()这个方法来操作
操作的样式很多，那么要通过使用类的方式来操作
如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。（把css从html中分离出来）

B. jQuery动画

一、隐藏显示动画

show() 显示动画 作用：让匹配的元素展示出来

用法一：$(selector).show(2000);
参数为数值类型，表示：执行动画时长
单位为：毫秒（ms），参数2000即2秒钟显示完毕；
用法二：$(selector).show(“slow”);
参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast；
跟用法一的对应关系为： slow：600ms、normal：400ms、fast：200ms；
有动画效果主要控制的属性是: width;height;opacity;display:block;overflow:hidden；
用法三：$(selector).show(2000, function() {});
参数一可以是数值类型或者字符串类型；
参数二表示：动画执行完后立即执行的回调函数；
用法四：$(selector).show();
不带参数，作用等同于 css(“display”, ”block”)
注意：此时没有动画效果；

$("button").eq(0).click(function () {
	// $("#box").show()
	// $("#box").show(10000)
	// $("#box").show("slow");
	// $("#box").show("normal");
	// $("#box").show("fast");
	$("#box").show(5000,function () {
	    alert("终于显示了")
	})
})

hide() 隐藏动画 作用：让匹配的元素隐藏起来
参数格式跟show()一样,只不过hide最后是display:none;

$("button").eq(1).click(function () {
	// $("#box").hide();
	// $("#box").hide(2000);
	// $("#box").hide("slow");
	$("#box").hide(3000,function () {
		alert("终于隐藏了")
	});
})

toggle(毫秒值) 显示隐藏切换动画

二、滑入滑出动画

slideDown() 滑入动画

不传参数
默认normal速度的动画; 控制的是height属性
传入毫秒值
表示动画时间
传入速度和回调函数

$("button").eq(0).click(function () {
//    滑入动画
//     $("#box").slideDown();
//     $("#box").slideDown(3000);
    $("#box").slideDown("slow",function () {
        alert("总算滑完了")
    })

})

slideUp() 滑出动画 参数跟slideDown() 滑入一样

$("button").eq(1).click(function () {
	$("#box").slideUp(3000,function () {
	    alert("总算出去了")
	})
})

slideToggle() 滑入滑出切换

$("button").eq(2).click(function () {
   // $("#box").slideToggle(2000)
   $("#box").toggle(1000)
})

三、淡入淡出动画

fadeIn() 淡入动画
参数跟滑入滑出一样;控制的是opacity;

$("button").eq(0).click(function(){
    $("#box").fadeIn(2000);
})

fadeOut() 淡出动画

$("button").eq(1).click(function(){
    $("#box").fadeOut(2000);
})

fadeToggle() 淡入淡出切换

 $("button").eq(2).click(function(){
	$("#box").fadeToggle(400);
})

fadeTo(毫秒值,透明度值)
表示动画淡出/淡入到指定透明度
参数1:毫秒值 ，参数2:透明度值

$("button").eq(3).click(function(){
	$("#box").fadeTo(1000,0.3);
})

四、animate自定义动画

animate自定义动画参数:

json对象 必选
执行的时长 毫秒值或者字符串值 必选
动画执行完的回调函数 可选

animate动画所支持的属性是那些单位是px的css属性；

$(function () {
    $("button").click(function () {
      /*  $("#box").animate({
            width:400,
            height:200,
        },2000)*/
        $("#box").animate({
            width:400,
            height:"200px",
            fontSize:30,
            left:200,
            borderWidth:30,
            borderRadius:200,
            opacity:0.3
        },2000,function () {
            alert("总算执行完了")
        })
    })
})

五、JQ停止动画

对象.stop(boolean,boolean) 传入两个布尔值; 默认都是false;

第一个参数表示后续动画是否要执行
（true:后续动画不执行;false:后续动画会执行）
第二个参数表示当前动画是否执行完
（true:立即执行完成当前动画;false:立即停止当前动画）

如果传入两个false表示:马上去执行下一个排队的动画,然后立即停止当前正在进行的动画;
1true，2false表示:立马停止当前动画后续动画也不执行
1false，2true
1true，2true

$(function () {
	$("button").eq(0).click(function(){
	    /*$("#box").animate({
	        width:400,
	        height:400,
	        left:100,
	        top:50
	    },3000)*/
	    $("#box").slideToggle(3000);
	})
	$("button").eq(1).click(function(){
	    // $("#box").stop();
	    // $("#box").stop(false,false);
	    // $("#box").stop(true,false);
	    // $("#box").stop(false,true);
	    $("#box").stop(true,true);	
	})
})

下拉菜单划入画出版本：

在JQ动画中一般先stop再调用动画,除非特殊需求

$(function () {
   $(".wrap>ul>li").mouseenter(function () {
       $(this).children("ul").stop(true,false).slideDown(200);
   })
   $(".wrap>ul>li").mouseleave(function () {
       $(this).children("ul").stop(true,false).slideUp(200);
   })
})

<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    .wrap {
        width: 330px;
        height: 30px;
        margin: 100px auto 0;
        padding-left: 10px;
        background-image: url(image/bg.jpg);
    }
    .wrap li{
        background-image: url(image/libg.jpg);
    }
    .wrap > ul > li {
        float: left;
        margin-right: 10px;
        position: relative;
    }
    .wrap a {
        display: block;
        height: 30px;
        width: 100px;
        text-decoration: none;
        color: #000;
        line-height: 30px;
        text-align: center;
    }
    .wrap li ul {
        position: absolute;
        top: 30px;
        display: none;
    }
</style>

C. jQuery关于DOM节点操作的方法:

回顾之前原生js关于DOM增删改操作的方法

createElement("标签名") 创建节点
appendChild(元素对象) 增加一个子节点
insertBefore(新,参考老) 插入新节点
removeChild(子节点) 移除
replaceChild(新,老) 替换
cloneNode(boolean) 克隆

一、动态创建元素

创建节点对象
var $newDiv= $("<div >我是新节点</div>");

二、添加元素

在页面上拼接节点对象
父节点.append(标签字符串或者节点对象);
子节点对象.appendTo(父节点对象);
上面两个都是拼接到父节点最后一位;
父节点.prepend(标签字符串或者节点对象);
子节点对象.prependTo(父节点对象);
上面两个都是拼接到父节点第一位;
兄弟节点之前插入
节点对象.before(标签字符串/节点对象)；
兄弟节点之后插入
节点对象.after(标签字符串/节点对象)；

总结:
append prepend after before,这四个方法参数都能传入标签字符串或节点对象。
appendTo和prependTo不行必须是节点对象调用。

$(function () {
    $("button").click(function () {
        /*JQ创建一个新节点 创建出来的是JQ对象 可以直接写一个完整的标签*/
       var $newDiv= $("<div class='pox'>我是新节点</div>");
       console.log($newDiv);
       /*拼接节点对象*/
       $("#box").append($newDiv)
        /*拼接标签字符串*/
        $("#box").append("<p>我是新来的p元素</p>")

        $newDiv.appendTo($("#box"));

        /*拼接节点对象到第一位*/
        $("#box").prepend($newDiv)
        /*拼接标签字符串到第一位*/
        $("#box").prepend("<p>我是新来的p元素</p>");
        /*子节点拼接到父节点第一位*/
        $newDiv.prependTo($("#box"))

        /*在指定兄弟节点之前查新新节点对象*/
        $(".hox").before($newDiv)
        /*在指定兄弟节点之前查新标签字符串对象*/
        $(".hox").before("<p>我是新来的p元素</p>")

        /*在指定兄弟节点之后查新标签字符串对象*/
        $(".hox").after("<p>我是新来的p元素</p>")
        /*在指定兄弟节点之前查新新节点对象*/
        $(".hox").after($newDiv)
    })
})

三、html()方法创建元素

原生JS有innerHTML属性，JQ对应的就是html()方法

html()方法的使用：

元素.html("新标签内容")；
表示：把元素内部所有内容清空并替换新内容；
元素.html("")；
表示：清空当前元素内部所有内容
元素.html()；
表示：获取元素内部所有内容返回字符串

text()方法的使用：
text()方法的使用跟innerText效果一样
具体使用跟html()方法一样

四、清空元素的操作

$("#box").html("");
$("#box").empty();
表示：清空指定元素的所有子元素（光杆司令），没有参数
$("#box").remove();
表示：元素"自杀" 表示连自己也干掉

五、复制元素

JQ的clone默认是带着内部内容一起克隆
虽然JQ的clone参数也是传一个布尔值
但是,这个布尔值（true 或者 false）表示:指示事件处理函数是否会被复制。V1.5以上版本默认值是：false;
是否复制标签上面的事件,实际操作不好用!!

D. JQ中标签属性的操作

原生js中操作标签属性的方法:setAttribute removeAttribute getAttribute

一、属性操作.attr()和.prop()

JQ是通过attr()方法来实现原生js的这三个功能

.attr()方法：

`.attr()` 方法参数

增加一个标签属性节点
元素.attr("属性名","属性值");
删除一个属性节点
元素.removeAttr("属性名");
修改一个属性节点的名字
元素.attr("已经存在的属性名","新属性值");
获取属性节点的值
元素的.attr("属性名") 返回当前属性节点的值,如果属性不存在则返回undefined

但是: 三个特殊的属性无法通过attr进行操作:checked selected disabled
经过测试attr()无法操作checked属性只有第一次生效后面不生效,需要通过 prop()方法操作prop()方法跟attr()方法操作一模一样;
prop()方法通常用来影响DOM元素的动态状态，而不是改变的HTML属性。例如：input和button的disabled特性，以及checkbox的checked特性。

`.prop()` 方法参数操作form表单

.prop(name) String 属性名称
选中复选框为true，没选中为false：
$("input[type='checkbox']").prop("checked");
.prop(properties) Map 作为属性的“名/值对”对象
禁用页面上的所有复选框：
$("input[type='checkbox']").prop({disabled: true});
.prop(key,value) String,Object 属性名称，属性值
禁用和选中所有页面上的复选框：
$("input[type='checkbox']").prop("disabled", false);$("input[type='checkbox']").prop("checked", true);
.prop(key,function(index, attr)) String,Function
1:属性名称。
2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。
通过函数来设置所有页面上的复选框被选中：
$("input[type='checkbox']").prop("checked", function( i, val ) {return !val;});

$(function () {
   $("button").eq(0).click(function () {
       $("#box").attr("title","我时粉盒子")
   })

   $("button").eq(1).click(function () {
       $("#box").removeAttr("title")
   })
   $("button").eq(2).click(function () {
       $("#box").attr("class","kox")
   })
   $("button").eq(3).click(function () {
       console.log($("#box").attr("title"));;
   })

   $("button").eq(4).click(function () {
   //多选按钮选中
   //     $("#cb").attr("checked",true);
       $("#cb").prop("checked",true)

   })

   $("button").eq(5).click(function () {
   //    多选按钮 取消选中
   //     $("#cb").attr("checked",false);
       $("#cb").prop("checked",false)
   })

   $("button").eq(6).click(function () {
       //输入框禁用
       $("#inp").prop("disabled",true)
   })

   $("button").eq(7).click(function () {
       //   输入框取消禁用
       $("#inp").prop("disabled",false)
   })
})

二、值和内容

1. .val() 方法是专门用在输入框对象的用来获取和设置输入框输入的内容
input.val() 获取输入的内容
input.val("内容") 设置输入框内部输入的内容

2. html()和text()方法是专门用来获取和设置元素内部内容的方法,三种用法:

html()/text() 不传参数表示获取
html() 获取内部所有内容包括标签本身
text() 获取内部文本内容不包括标签本身
html("内容")/text("内容")传入指定内容
都是清空标签内部原有内容设置为新内容
如果内容包含标签字符串则:
html()会渲染标签效果
text()不会渲染标签效果
html("")/text("")
都是将元素内部内容清空

3. .index()方法，JQ每个对象都有.index()方法，默认是当前元素在父元素中的索引值。
4. .hover()方法，鼠标移入移出，暂停开始定制器。
.hover(回调函数，回调函数)方法有两个参数：
1:回调函数；表示鼠标移入
2:回调函数；表示鼠标移出

$("#box").hover(function(){
	clearInterval(timer);
},function(){
	timer=setInterval(autoPlay,1000);
})

5. 元素.prevAll() 选择当前元素前边的所有兄弟
6. 元素.nextAll() 选择当前元素后边的所有兄弟
7. .end() 不忘初心方法
JQ虽然有链式编程方法(每次操作完都返回当前操作过的对象)
但是在不停的链式当中对象可能发生切换
比如 prevAll() 返回值是前边所有的兄弟元素返回值发生了切换,不再是原来的$(this)
这种情况下就需要用到.end()方法把当前对象切换回上一次调用的那个对象

    var shi="★";
    var kong="☆";
$("ul>li").mouseenter(function () {
   $(this)
     .text(shi).prevAll().text(shi)
     .end().nextAll().text(kong);
})

E. JQ中event对象的使用

JQ的event是直接参数接收即可没有兼容问题

$("#box").click(function (event) {
	console.log(event);
	跟原生JS的event对象一样
	clientX/Y  pageX/Y  screenX/Y
	target   timeStamp  type  button
	offsetX/Y (鼠标到盒子的距离)
})

onkeydown onkeyup 键盘按下和抬起事件一定要是能获取焦点的元素才可以添加触发该事件
document/html/body 添加keydown事件都能响应

$("#inp").keydown(function (event) {
   //key是返回按键的名称  keycode返回按键码
   // console.log(event.key,event.keyCode);
   if(event.key=="Enter"){
       alert("你按了回车!!!")
   }
})

$("#box").html(`
	当前键盘码(keycode):`+event.keyCode+` <br>
	当前按键是:`+event.key+`
`)

F. JQ关于尺寸和位置操作

一、高度和宽度操作

元素.height()；获取或者设置元素的高度
元素.width()；获取或者设置元素的宽度
参数传入数字表示设置宽高
上面两个获取的就是元素设置的css样式的宽高，如果未设置宽高则无法获取。

.css()获取高度和.height()获取高度的区别？
元素.css("height") 和元素.height()的区别:
元素.css("height") 返回值的number类型 例如 200
元素.height() 返回的是带px的string字符串 例如 200px
所以 元素.css("height") 可以进行下一步的数学运算

二、坐标值操作

元素.offset() 返回一个对象 {top: 50, left: 108}
表示距离最近的有定位的父盒子的左侧和上边的距离;如果父系盒子都没有定位则距离到body;
该方法还可以设置left和top值,元素.offset({left:数值,top:数值});
例如：$(this).offset({top:200});也可以单独设置一边。
如果元素本身没有定位 则该方法会给元素动态添加 相对定位 并设置位置
.offset()方法能获取能设置。
.position() 也返回一个对象 {top: 50, left: 108}
但是.position() 方法只能获取 不能设置。
获取被卷去的头部：console.log($(this).scrollTop());
对.scrollTop()的理解：
垂直滚动条位置是可滚动区域在可视区域上方的被隐藏区域的高度。
如果滚动条在最上方没有滚动或者当前元素没有出现滚动条，那么这个距离为0。
设置被卷去的头部：$(this).scrollTop(2500);
.scrollLeft()同理

G. jQuery事件机制

一、JQ事件绑定的方式

<button>增加元素</button>
<div id="box">
   <p>我是第一个p元素</p>
   <p>我是第二个p元素</p>
   <p>我是第三个p元素</p>
</div>

JQ给元素绑定事件的方式:

简单事件绑定
$("选择器").事件名称(驱动函数)；

$("button").click(function () {
   $("#box").append("<p>我是新来的p元素</p>")
})

.delegate()方式绑定事件
父元素.delegate("子元素选择器","不带on的事件名称",事件驱动函数);
优点:
1.可以批量添加事件给父元素下面的一堆子元素同时添加点击事件;
2.默认自带事件委托功能;

/*单独给box添加点击事件*/
$(document.body).delegate("#box","click",function () {
   alert("点我干嘛")
})
/*为box下面所有的p元素添加点击事件*/
$("#box").delegate("p","click",function () {
   alert("我是p元素,你点我干嘛")
})

.on()的方式绑定事件 (最流行最新最潮流的绑定方式强烈推荐!!)
jQuery1.7版本后，jQuery用.on()统一了所有的事件处理的方法,给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点。
格式:
父元素.on("不带on的事件名称","子代或者后代选择器",data(传给事件所需要的数据),事件驱动函数);
优点:
整合了.delegate()特点:
1.批量添加事件减少绑定次数;
2.自带事件委托功能;
3.可以一次性添加多个事件。

var data={
   name:"小强",
   age:15
}
/*on绑定事件*/
$("#box").on("click","p",data,function (event) {
   alert("我是p元素,点我干嘛")
   //事件触发时 可以获取传入的事件(后面讲)
   console.log(event.data);
})
/*on 可以一次性绑定多个事件 多个事件用空格隔开*/
$("#box").on("click contextmenu mouseover","p",function () {
   alert("我是p元素,请问你是单击还是右击呢?")

})

ps: 所有绑定事件的方式都没有层叠覆盖问题

二、JQ事件解绑的方式

用什么方式绑定的就用什么方式解绑

<button>click()绑定事件</button>
<button>delegate绑定事件</button>
<button>on绑定事件</button>
<button>解绑click()事件</button>
<button>解绑delegate事件</button>
<button>解绑on事件</button>
<div id="box">
    <p>我是第一个p元素</p>
    <p>我是第二个p元素</p>
    <p>我是第三个p元素</p>
    <div>我是div里面的div</div>    
</div>

.undelegate()解绑.delegate()绑定的事件:
父元素选择器.undelegate();解绑当前父元素选择器下面所有子元素绑定的事件;
父元素选择器.undelegate("click"); 解绑当前父元素下面所有子元素的click事件;
.off()解绑.on()方式绑定的事件
父元素选择器.off();解绑当前父元素选择器下面所有子元素绑定的事件;
父元素选择器.off("click"); 解绑当前父元素下面所有子元素的click事件;

/*以下是事件绑定*/
$("button").eq(0).click(function(){
   $("#box>p").click(function () {
       alert("我是click()方式绑定事件")
   })
})
$("button").eq(1).click(function(){
   $("#box").delegate("p","click",function () {
       alert("delegate方式绑定的点击事件")
   })
   $("#box").delegate("div","click",function () {
       alert("delegate方式绑定的点击事件")
   })
})
$("button").eq(2).click(function(){
   $("#box").on("click","p",function () {
       alert("on方式绑定的点击事件")
   })
   $("#box").on("click","div",function () {
       alert("on方式绑定的点击事件")
   })
})

/*以下是事件解绑*/
$("button").eq(3).click(function(){
   //只有此种写法才能解绑简单事件绑定
   $("#box>p").prop("onclick",null).off("click")
})
$("button").eq(4).click(function(){
//    解绑delegate绑定的事件
   $("#box").undelegate();
})
$("button").eq(5).click(function(){
   // 解绑on方式绑定的事件
   $("#box").off()
})

三、JQ事件事件触发

<button>事件触发</button>
<div id="box"></div>
<input type="text" id="inp">

什么是事件触发:
执行了事件驱动函数里面的代码,但是又不用去操作事件

JQ的事件触发的方式:

元素.事件名称()；会触发浏览器默认行为。
元素.trigger("不带on的事件名称")；会触发浏览器默认行为。
元素.triggerHandler("不带on的事件名称")；不会触发浏览器默认行为。

$("#box").click(function () {
    alert("你点我粉盒子干嘛???")
})
$("#inp").focus(function () {
   console.log("我是输入框获取焦点事件");
})

$("button").eq(0).click(function () {
   // $("#box").click();
   // $("#box").trigger("click")
   // $("#box").triggerHandler("click");

   // $("#inp").focus();
   // $("#inp").trigger("focus");
   $("#inp").triggerHandler("focus");

})

var data={
    name:"小强强",
    age:16
}
/*on绑定的事件 只能通过 focus或者trigger两种事件触发的方法 触发该事件*/
$(document.body).on("focus","#inp",data,function (event) {
   console.log("我是输入框获取焦点事件");
   //事件触发时 同样能够拿到该数据
   console.log(event.data);
})

让当前文本框文本默认选中 .select();
oninput事件没有keycode属性

jQuery补充

一、链式编程原理

链式编程原理：当前方法 return this;
这个this就表示当前已经设置好的对象返回给下一个调用者。
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。

var per=new Object();
per.setName=function (name) {
  this.name=name;
  return this;
}

.end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。

二、隐式迭代

隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

JQ自带隐式迭代操作 就是内部自动帮助我们完成循环针对每一个元素操作。但是在某些情况下我们还是需要每个元素单独操作就需要用到each方法。

有了隐式迭代，为什么还要使用each函数遍历？
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。
如果要对每个元素做不同的处理，这时候就用到了each方法

三、each方法

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数；
参数一表示当前元素在所有匹配元素中的索引号
参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});Element是一个 js对象，需要转换成jquery对象

each方法的使用：
$("选择器").each(function(索引值,ele元素){ })；
选择器选择几个元素那么回调函数就会触发几次，
会针对每一个元素执行一次回调函数把当前元素的索引值和元素的js对象传入回调函数

<ul>
   <li>0</li><li>1</li><li>2</li><li>3</li>
   <li>4</li><li>5</li><li>6</li><li>7</li>
   <li>8</li><li>9</li>
</ul>

$(function () {
    $("ul>li").each(function (index,element) {
        // console.log(index,element);
        $(element).css("opacity",index/10);
    })
})

四、多库共存

此处多库共存指的是：
jQuery占用了$ 和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库，并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量，那么，要保证每个库都能正常使用，这时候就有了多库共存的问题。
什么是JQ的多库共存?
就是可以同时引入多个版本的jQuery 还可以同时存在；想调用哪个版本的jQuery就可以任意切换；

模拟另外的库使用了 $ 这个变量
此时，就与jQuery库产生了冲突
var $ = { name : “itszt” };

解决方式：
让jQuery释放对$的控制权，让其他库能够使用$符号，达到多库共存的目的。此后，只能使用jQuery来调用jQuery提供的方法；
$.noConflict(); //true两个都交出来，返回值是新的调用方法；

<script src="jquery-1.8.2.min.js"></script>
<script src="jquery-1.11.1.js"></script>
<script>
	// 打印当前jQuery版本
	console.log($.fn.jquery);//1.11
	$.noConflict();  //让当前$对象放弃当前版本
	console.log($.fn.jquery);//1.8
	console.log(jQuery.fn.jquery);//1.11
		/*如果引入了两个版本的jQuery 这样完成*/
</script>


<script src="jquery-1.8.2.min.js"></script>
<script src="jquery-1.11.1.js"></script>
<script src="jquery-3.2.1.js"></script>
<script>
	/*如果引入了三个版本*/
	/*.noConflict()传入true 表示$和jQuery对象同时放弃一个版本
	.noConflict()方法的返回值是当前被放弃的版本*/
	console.log($.fn.jquery);//3.2
	var q= $.noConflict(true);
	console.log($.fn.jquery);//1.11
	console.log(jQuery.fn.jquery);//1.11
	$.noConflict();
	console.log(q.fn.jquery);//3.2
	console.log($.fn.jquery);//1.8
	console.log(jQuery.fn.jquery);//1.11
</script>

jQuery插件机制

一、第三方插件

jQuery这个js库，虽然功能强大，但也不是面面俱到包含所有的功能。
jQuery是通过插件的方式，来扩展它的功能：
当你需要某个插件的时候，你可以“安装”到jQuery上面，然后使用。
当你不再需要这个插件，那你就可以从jQuery上“卸载”它。
（联想：手机软件，安装的app就好比插件，用的时候安装上，不用的时候卸载掉）;

<script src="jquery.color-2.1.0.js"></script>;
.animate()自定义动画：不支持背景的动画效果
.animate()动画支持的属性列表

<!--先保证引入JQ核心文件-->
<script src="jquery-1.11.1.js"></script>
<!--再引入插件文件-->
<script src="jquery.color-2.1.0.js"></script>
<script>
	/*什么是插件开发:
	又叫二次开发  表示在原有基础上 新增一些新的功能,新的功能是依赖原来功能存在的 只不过比原有功能更加强大,这就是插件的开发 也是二次开发*/
	$("#box").click(function () {
	  alert("开始变化")
	  $(this).animate({
	      backgroundColor:"purple"
	},2000)
	})
</script>

jQuery.lazyload.js;

使用步骤：

引入jQuery文件
引入插件
使用插件

二、自定义制作插件

如何创建jQuery插件：http://learn.jquery.com/plugins/basic-plugin-creation/

全局jQuery函数扩展方法：$.pluginName = function() { };

jQuery对象扩展方法：$.fn. pluginName = function() { };

/*JQ已经内置了 扩展插件的功能
$.fn.方法名=function(){  }
此功能表示给全局 页面所有的JQ对象 绑定一个方法
自定义插件的方法 里面的this 表示  当前调用该方法的盒子
对象默认是JQ对象*/
<script src="jquery-1.11.1.js"></script>
<!--引入自己定义的插件-->
<script src="jQuery-setColor-my-1.0.1.js"></script>
<script>
	$("button").click(function () {
		$("#box").setColor("blue");
	})
</script>

//自己定义的插件
$.fn.setColor=function (color) {
    // console.log(this);
    this.css("background-color",color);
}

三、jQueryUI

jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API：http://api.jqueryui.com/category/all/
其他教程：jQueryUI教程

基本使用:

引入jQueryUI的样式文件
引入jQuery
引入jQueryUI的js文件
使用jQueryUI功能

四、jQuery插件之懒加载

<div></div>
<img class="lazy" data-original="http://tools.yufenghen.cn/mock/ajaxdemo/getstar/liying.jpg" width="200" alt="">
<div></div>

<script src="jquery-1.11.1.js"></script>
<script src="jquery_lazyload/jquery.lazyload.js"></script>

<script>
 $(function () {
     $("img.lazy").lazyload({
         effect:"fadeIn";
     });
 })
</script>

郝鑫芸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web_jQuery

内容：掌握jQuery的思想设计与理念官网：http://jquery.com/;汉化：http://www.css88.com/jqapi-1.9/;在线API：http://api.jquery.com/;jQuery在线API: http://hemin.cn/jq/;所谓框架:就是个人或者团队开发出来的帮助程序猿快速开发的工具代码。第三方(第三方框架) 说的是：我一方、我的代码一方、别人的代码一方(第三方框架)。一般形容框架都是完整的一套代码体系；简单的封装三两个方法不能称之为框架。
复制链接

扫一扫