jQery基础学习的笔记

秒速五厘米 2022-10-01 08:00 124阅读 0赞

# jQery基础学习的笔记 #

## 多库共存问题 ##

### 释放$的作用 ###

> var my![=][equation_tex_3D].noConflict(); 此时的![只是一个变量 my][my]此时代表 $ 拥有控制权

注意：在JQuery中 jQuery与$ 效果一样

### jQuery中的==$.fn== ###

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。

注意：常用与jQuery组件的开发

> $.fn.method()=function()\{\}的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法。可以直接的去调用

## jQuery选择器及应用 ##

### jQuery获取元素的方式 ###

1.  **根据id获取**
    
     *  id选择器
     *  ==用法：==$("\#id的值");
     *  获取的元素的个数：一个

" class="hljs

`">$("#div") 复制代码`

1.  **根据标签的名字获取**
    
     *  标签选择器
     *  ==用法：==$("标签名字");
     *  获取的元素的个数：多个

// <div id="btn" class="dv"></div>
    $(".di")
    复制代码

1.  **根据类样式的名字获取**
    
     *  类选择器
     *  ==用法：==$(".类样式的名字");
     *  获取的元素的个数：多个

// <div id="btn" class="dv"></div>
    $("div")
    复制代码

1.  标签加类选择器

//<li class="dv">nihao </div>
            $("li.dv")
    复制代码

1.  层次选择器

<ul id="uu">
    	<li></li>
    	<li></li>
    	<li></li>
    </ul>
    复制代码

//获取所有的li标签
    $(function () {
         $("#uu>li")
    })
    
    复制代码

6.过滤选择器

*  even 偶数 选择器
 *  odd 奇数 选择器

$(".wrap li:odd").css("background","red");   //设置li奇数行的样式
    $(".wrap li:even").css("background","blue");//设置li偶数行的样式
    复制代码

7.索引选择器

*  ==lt(index)==：设置索引小于index的所有的标签元素
 *  ==eq(index)==：设置索引为index的标签元素
 *  ==gt(index)==：设置索引大于index的所有的标签元素

//设置ul中的索引为4的li的标签元素
    $(".wrap li:eq(4)").css("background","red");
    //设置ul中的索引大于4的所有li的标签元素
    $(".wrap li:gt(4)").css("background","blue");
    //设置ul中的索引小于4的所有li的标签元素
    $(".wrap li:lt(4)").css("background","green");
    复制代码

### jQuery中常见的几个方法 ###

> 注意：以下几个方法，括号里面什么都不写表示获取，写内容表示设置

*  ==.html()== 方法：
    
     *  设置标签中间显示其他标签及内容，类似于==innerHTML==
 *  ==.text()== 方法：
    
     *  设置标签中间显示的文本内容，类型于==innerText==
 *  ==.val()== 方法：
    
     *  设置input标签中value值，类似于==value==
 *  ==.css()== 方法：
    
     *  设置元素的样式，类似于==style==
 *  ==.attr()== 方法：
    
     *  获取属性值

## jQuery 样式操作 ##

### 设置样式 ###

*  .css() 为标签添加样式
    
     *  .css( "属性" , "属性值" )
     *  .css( "属性" , "属性值").css( "属性" , "属性值" )
     *  .css( \{"属性" : "属性值" \} )

> ![("\#dv").css("background","red");][dv_.css_background_red]("\#dv").css("background","red").css("background","red"); $("\#dv").css( \{ "background" : "red" , "width" : "20px"\} );
> 
> //获取宽和高的属性值---->数字类型 var width=![("\#dv").width()\*2; var height=][dv_.width_2_ var height]("\#dv").height()\*2; //设置元素的宽和高--->参数可以是数字也可以是字符串 ![("\#dv").width(width);][dv_.width_width]("\#dv").height(height);

### 添加样式 ###

*  .addClass() 为元素添加类样式
    
     *  addClass(" 类样式名字 ")； 添加一个类样式
     *  addClass(" 类样式名字1 类样式名字2 ")； 添加多个类样式
     *  注意：添加多个样式的时候 中间以空格隔开

> ![("\#dv").addClass("cls");     一个样式][dv_.addClass_cls_]("\#dv").addClass("cls\_1 cls\_2"); 多个样式

### 移除样式 ###

*  removeClass() 移除样式
    
     *  removeClass( " 类样式名字 " )； 移除类样式
     *  removeClass( ) 移除当前元素所有的样式

> ![("body").removeClass("cls");][body_.removeClass_cls]("body").removeClass();

### 判断是否应用样式 ###

*  hasClass() 判断当前元素是否应用了某个类样式
    
     *  hasClass( " 类样式名字 " )

> var result=$("\#dv").hasClass("cls"); 返回值为：==true==、==false==

### 切换元素样式 ###

*  toggleClass(); 切换元素的类样式
    
     *  toggleClass( " 类样式名字 ");
     *  注意：该方法可以添加和移除类样式 多次操作

> $("body").toggleClass("cls");//切换类样式

### 常见的样式的操作 ###

1.  获取与设置宽高

> //获取宽和高的属性值---->数字类型 var width=![("\#dv").width()\*2; var height=][dv_.width_2_ var height]("\#dv").height()\*2; //设置元素的宽和高--->参数可以是数字也可以是字符串 ![("\#dv").width(width);][dv_.width_width]("\#dv").height(height);

1.  获取设置位置

> ![("\#dv").offset().left;][dv_.offset_.left]("\#dv").offset().top; $("\#dv").offset(\{"left":200,"top":200\});

1.  获取滚动条高度

> ![(this).scrollLeft()][this_.scrollLeft](this).scrollTop()

## 链式编程 ##

示例：

> $(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");

注意：当发生断链的时候可以使用 ==.end()== 方法恢复到锻炼之前的效果

> $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");

## jQuery中的遍历 ##

### 向下遍历 ###

1.  childen(可选参数）
    
     *  只能遍历他的下一级（儿子辈）

> ![(" \#dv ").childen()][_dv _.childen](" \#dv ").childen(" li ")

1.  find(必选参数）
    
     *  可以找到任意一级参数

> $(" \#dv ").find(" li ")

### 向上遍历 ###

1.  parent(可选参数）
    
     *  只能遍历他的上一级（父辈）

> $(" \#dv ").parent()

1.  parents(）
    
     *  向上遍历所有的元素

> $(" \#dv ").parents()

1.  parentUntil(）
    
     *  向上在一个区间内遍历所有的元素

> 向上遍历a标签到div标签之间的所有元素 $(" a ").parentUntil("div")

### 同级遍历 ###

1.next();

*  获取的是当前元素的下一个兄弟元素

> $(this).next().css("backgroundColor","green");

2.nextAll();

*  获取的是当前元素的后面的所有的兄弟元素

> $(this).nextAll().css("backgroundColor","green");

3.nextUntil();

*  同级元素下面元素的一个区间

> 同级遍历 li1 标签到 li2 标签之间的所有元素 $("\# li1 ").nextUntil("\# li2")

4.prev();

*  获取的是当前元素的前一个兄弟元素

> $(this).prev().css("backgroundColor","green");

5.prevAll();

*  获取的是当前元素的前面的所有的兄弟元素

> $(this).prevAll().css("backgroundColor","green");

6.prevUntil();

*  同级元素上面面元素的一个区间

> 同级遍历 li1 标签到 li2 标签之间的所有元素 $("\# li1 ").prevUntil("\# li2")

7.siblings();

*  获取的是当前元素的所有的兄弟元素(自己除外)

> $(this).siblings().css("backgroundColor","green");

### 过滤效果 ###

1.first();

*  第一个符合条件的元素

> 获得第一个p标签元素 $(“div p”).first();

2.last();

*  最后一个符合条件的元素

> 获得最后一个p标签元素 $(“div p”).last();

3.eq(index);

*  指定第几个标签元素
 *  下标从 0开始

> 获得第四个p标签元素 $(“div p”).eq(3);

4.filter();

*  过滤留下特定的

> 过滤所有不是 cls样式的标签元素 $(this).filter(".cls");

5.not();

*  过滤掉指定的

> 过滤所有是 cls样式的标签元素 $(this).not(".cls");

### each()方法的使用 ###

*  each：迭代方法（循环）
    
     *  参数1：索引
     *  参数2：对象

$("#uu>li").each(function (index,element) {
       //第一个参数是索引,第二个参数是对象
       $(element).css("opacity",(index+1)/10);
    });
    复制代码

## jQuery中的动画效果 ##

### 动态效果 ###

$("ul").show(500);			//显示
    $("ul").hide(slow);			//隐藏
    $("ul").toggle(normal);		//显示 / 隐藏 
    复制代码

案例：几张图片依次的显示与隐藏

$(function () {
    	$("#btn1").click(function () {
    	
    		//获取div,最后一个图片,隐藏
    		$("div>img").last("img").hide(800,function () {
    		
    			//arguments.callee相当于递归
    			$(this).prev().hide(800,arguments.callee);
    		});
    	});
    	
    	//显示
    	$("#btn2").click(function () {
    		$("div>img").first("img").show(800,function () {
    		
    			//arguments.callee相当于递归
    			$(this).next().show(800,arguments.callee);
    		});
    	});
    });
    
    复制代码

### 滑动效果（向上、向下） ###

> ![( “div" ).slideUp(1000)；][_div_ _.slideUp_1000]( “div" ).slideDown(1000)； $( “div" ).slideToggle(1000)；

### 淡入与淡出效果 ###

*  淡入： fadeIn( 数字 | slow | normal | fast )
 *  淡出：fadeOut( 时间 )
 *  淡入/淡出：fadeTaggle( 时间 )
 *  淡化透明度：fadeTo( 时间，透明度)

> ![("\#dv").fadeIn(1000);][dv_.fadeIn_1000]("\#dv").fadeOut(1000); ![("\#dv").fadeToggle(1000); //一秒钟 透明度达到0.3][dv_.fadeToggle_1000_ _ _0.3]("\#dv").fadeTo(1000,0.3);

### 其他方式 ###

#### 停止动画 ####

*  .stop()方法用来停止当前动画
 *  一般会与show()和hide()方法配合使用

> ![("ul").stop().show(500);   //显示][ul_.stop_.show_500_]("ul")stop().hide(slow); //隐藏

#### jQuery中animate方法的使用 ####

*  animate(对象，时间，函数）
    
     *  第一个参数：是键值对---对象（数值的属性可以改，颜色不能改）
     *  第二个参数：时间---1000毫秒
     *  第三个参数：匿名函数---回调函数

$(function () {
    	$("#btn").click(function () {
    		$("#dv").animate({
        "width":"300px","height":"300px","left":"300px"},1000,function () {
    			$("#dv").animate({
        "width":"50px","height":"30px","left":"800px","top":"300px","opacity":0.2},2000);
    		});
    	});
    复制代码

## jQuery中HTML的操作 ##

### 创建元素的方式 ###

*  jQuery中创建元素的方式:
    
     *  1.$("标签的代码")
     *  2.对象.html("标签的代码");

var aObj=$("<a href='http://www.baidu.com'>百度</a>");
    $("#div").html("<p>这是一个p标签</p>")
    
    复制代码

### 添加创建的元素 ###

1.  append(元素） ==最后一个子节点==
    
     *  把元素添加到被选中元素里面的结尾（被选中元素里边 div里面）

> //把元素添加到div中 $("\#dv").append(aObj);//把超链接追加到div中

1.  pripend(元素）==第一个子节点==
    
     *  把元素添加到被选中元素里面的前面（被选中元素里边 div里面）

> //把元素插入到某个元素的前面 //$("\#dv").prepend(aObj);

1.  before(元素） ==添加兄弟==
    
     *  把元素添加到选中元素的前面（被选中元素外边 div外边）

> //把元素添加到当前元素的前面(兄弟元素来添加) //$("\#dv").before(aObj);

1.  after(元素） ==添加兄弟==
    
     *  把元素添加到选中元素的后边（被选中元素外边 div外边）

> //把元素添加到当前元素的后面(兄弟元素来添加) //$("\#dv").after(aObj);

1.  appendTo(）
    
     *  把一个对象直接加到另外一个对象里面

>var obj = $("<p></p>");
    >把 obj对象 主动的加到div中
    >obj.appendTo( $( "#div" ) )
    复制代码

### 元素属性的操作 ###

1.  .attr()
    
     *  设置属性与获取属性
        
         *  .attr("属性") 获取到属性里面的属性值
         *  .attr("属性“，”属性值") 为元素设置属性值

> 获取到a标签里面的超链接 ![("a").attr( "herf" ); 为a标签设置超链接][a_.attr_ _herf_ _ _a]("a").attr( "herf"," www.baidu.com " );

### 删除元素 ###

1.  .html()
    
     *  清空元素中的内容

> $("\#dv").html("");//清空元素中的内容

1.  empty()
    
     *  清空元素中的内容

> //$("\#dv").empty();//清空元素中的内容

1.  remove()
    
     *  移除元素自身---自杀

> //$("\#dv").remove();//移除元素自身---自杀

### 克隆元素 ###

1.  .clone()
    
     *  克隆元素

> 克隆span标签给div2标签 var spanObj=![("\#dv>span").clone();//克隆,复制了这个元素][dv_span_.clone]("div2").append(spanObj);

### 设置元素的全选与全不选 ###

1.  .prop()方法
    
     *  可以设置元素的全选与全不选
     *  案例：

<input type="button" value="全选" id="btnAll"/>
    <input type="button" value="全不选" id="btnNoAll"/>
    <div id="dv">
     <input type="checkbox" value="1"/>吃饭
     <input type="checkbox" value="2"/>睡觉
     <input type="checkbox" value="3"/>打豆豆
     <input type="checkbox" value="4"/>打篮球
     <input type="checkbox" value="5"/>打足球
     <input type="checkbox" value="6"/>打铅球
     <input type="checkbox" value="7"/>打桌球
    </div>
    </body>
    复制代码

//两个按钮:1按钮全选,2全不选
     $(function () { 
     //获取第一个按钮,点击---全选
     $("#btnAll").click(function () { 
     $("#dv :checkbox").prop("checked",true);
     });
     //获取第二个按钮,点击---全不选
     $("#btnNoAll").click(function () { 
     $("#dv :checkbox").prop("checked",false);
     });
     });
    
    复制代码

## jQuery中事件的相关操作 ##

### 绑定事件 ###

1.  .bind()

*  可以为元素同时绑定多个事件
 *  第一个参数是：事件名字,
 *  第二个参数是：事件处理函数-匿名函数

> 绑定一个事件 .bind( "事件名" , "处理函数" ) 绑定多个事件 .bind( \{ "事件名": "处理函数" , "事件名": "处理函数" , "事件名": "处理函数" \} )

//绑定单个事件
     $("#btn").bind("click",function () {
    	alert("我被点了");
    });
    
     //bind()方法可以为元素同时绑定多个事件
    $("#btn").bind({
        "click":function(){
    	alert("我被点了");
    },"mouseover":function(){
    	$(this).css("backgroundColor","red");
    },"mouseout":function(){
    	$(this).css("backgroundColor","");
    }});
    复制代码

1.  .delegate()

*  参数1.要绑定事件的元素---p
 *  参数2.要绑定的事件的名字---click
 *  参数3.绑定事件的处理函数---匿名函数

//给div标签里面的p标签添加事件
    $("#dv").delegate("p","click",function () {
    	alert("我被点了");
    })
    复制代码

1.  on()

*  两个参数
    
     *  1事件的名字
     *  2事件处理函数
 *  三个参数
    
     *  1,事件的名字
     *  2.要绑定事件的元素--p
     *  3事件处理函数

> 父级元素.on("事件类型","子级元素",事件处理函数);

$("#btn").on("click",function () {
    	//创建p添加到div中
    	$("#dv").append($("<p>这是一个p</p>"));
    	
    	//为div中的p标签绑定事件
    	$("#dv").on("click","p",function () {
    		alert("我被点了");
    	});
    });
    复制代码

**注意：** ==在实际的应用中，一般情况下on比较常用，bind与delegate不常用==

### 解绑事件 ###

1.  绑定与解绑事件
    
     *  bind() unbind()
     *  deledae() undelegate()
     *  on() off()
2.  参数
    
     *  （事件名字）要解绑的事件的名字
     *  （元素，事件名字）为那个元素解除那种绑定事件
3.  示例：

$("#dv").unbind("click");
    $("#dv").undelegate("click");
    $("#dv").off("click");
    复制代码

1.  父子元素事件解绑关系

//下面的代码是把子级元素的点击事件解绑了,父级元素的点击事件还存在
    $("#dv").off("click","**");
    //移除父级元素和子级元素的所有的事件
    $("#dv").off();
    复制代码

**注意：**

> 父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的>时候,父级元素的事件解绑了,子级元素的事件没有解绑
> 
>     但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父>级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事>件都会被解绑
>     复制代码

### 触发事件 ###

1.  直接调用要触发的元素的方法
2.  使用： trigget(事件名)
3.  使用： triggerHandler(事件名)

$(function () {
    	$("#btn1").click(function () {
    		$(this).css("backgroundColor","red");
    	});
    	
    	//点击第二个按钮-触发第一个按钮的点击事件
    	$("#btn2").click(function () {
    	
    		//触发事件--3三种方式
    		$("#btn1").click();
    		
    		$("#btn1").trigger("click");//触发事件
    		
    		$("#btn1").triggerHandler("click");//触发事件
    	});
    });
    复制代码

**注意：trigger() 与 triggerHandler() 区别**

> trigger() 会触发浏览器的默认行为，并执行事件 triggrtHandler() 不会触发浏览器默认行为，但是会执行事件 例如：获取到焦点是浏览器的默认行为
> 
>     $("#txt").trigger("focus");		//文本框获取到焦点了
>     $("#txt").triggerHandler("focus");	//文本框没有获取到焦点了
>     复制代码

### 事件对象 ###

> $("div").on("click",function(event)\{\} )

*  event.delegateTarget：代码绑定事件的对象
 *  event.currentTarget：绑定事件的对象
 *  event.target：真正触发事件的对象

### 取消冒泡事件与默认事件 ###

#### 取消冒泡事件 ####

1.  event.stoPropagation()
2.  return false

#### 取消默认事件 ####

1.  event.preventDefault()
2.  return false;

> 例如可以取消a标签的默认事件 $("a").preventDefault()

转载于:https://juejin.im/post/5cf20bfe6fb9a07f0052c349

[equation_tex_3D]: https://juejin.im/equation?tex=%3D
[my]: /images/20220118/2aecfbdfabc84e83baedc989afed5c28.png
[dv_.css_background_red]: /images/20220118/6efbd26927e44d94a2f30478c2a3bef0.png
[dv_.width_2_ var height]: https://juejin.im/equation?tex=%28%22%23dv%22%29.width%28%29*2%3B%0Avar%20height%3D
[dv_.width_width]: /images/20220118/91e3df94e55a4b0d83363c608294cca1.png
[dv_.addClass_cls_]: /images/20220118/34e8e7335c8d423cb7baa101de59ea9d.png
[body_.removeClass_cls]: /images/20220118/eea1a18fbdec4ea1b33f56d65f3d0ec2.png
[dv_.offset_.left]: /images/20220118/a0dae5302fef44bbbc5de5b7b14ca147.png
[this_.scrollLeft]: /images/20220118/470bf328508d487896eea4c24833d7fb.png
[_dv _.childen]: /images/20220118/f2ad1ed373c74016a125eec1b3e96b3e.png
[_div_ _.slideUp_1000]: /images/20220118/7e6bccc7b10546e7a51c63b1fc38d725.png
[dv_.fadeIn_1000]: https://juejin.im/equation?tex=%28%22%23dv%22%29.fadeIn%281000%29%3B
[dv_.fadeToggle_1000_ _ _0.3]: /images/20220118/3ddc5b490f054dc2a63fabad46de817c.png
[ul_.stop_.show_500_]: /images/20220118/9fd41f9e65904e94969c743f1a398987.png
[a_.attr_ _herf_ _ _a]: /images/20220118/9ef8f7ef6ff24e979de6382977652158.png
[dv_span_.clone]: /images/20220118/d75e28c39b504ace9f51ef57b0ef7370.png