jQery基础学习的笔记-CSDN博客

jQery基础学习的笔记

多库共存问题

释放$的作用

var my.noConflict(); 此时的此时代表 $ 拥有控制权

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

jQuery中的==$.fn==

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

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

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

jQuery选择器及应用

jQuery获取元素的方式

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

" class="hljs

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

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

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

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

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

标签加类选择器

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

层次选择器

<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").css("background","red"); $("#dv").css( { "background" : "red" , "width" : "20px"} );

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

添加样式

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

("#dv").addClass("cls_1 cls_2"); 多个样式

移除样式

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

("body").removeClass();

判断是否应用样式

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

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

切换元素样式

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

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

常见的样式的操作

获取与设置宽高

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

获取设置位置

("#dv").offset().top; $("#dv").offset({"left":200,"top":200});

获取滚动条高度

(this).scrollTop()

链式编程

示例：

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

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

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

jQuery中的遍历

向下遍历

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

(" #dv ").childen(" li ")

find(必选参数）
- 可以找到任意一级参数

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

向上遍历

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

$(" #dv ").parent()

parents(）
- 向上遍历所有的元素

$(" #dv ").parents()

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( 数字 | slow | normal | fast );
$("ul").hide( 数字 | slow | normal | fast );
$("ul").toggle( 数字 | slow | normal | fast );
- slow：600ms
- normal：400ms
- fast：200ms

$("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);
		});
	});
});

复制代码

滑动效果（向上、向下）

滑入： slideUp( 数字 | slow | normal | fast )
滑出：slideDown( 数字 | slow | normal | fast )
切换划入滑出：slideToggle( 数字 | slow | normal | fast )
- slow：600ms
- normal：400ms
- fast：200ms

( “div" ).slideDown(1000)； $( “div" ).slideToggle(1000)；

淡入与淡出效果

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

("#dv").fadeOut(1000); ("#dv").fadeTo(1000,0.3);

其他方式

停止动画

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

("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>")

复制代码

添加创建的元素

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

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

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

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

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

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

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

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

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

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

元素属性的操作

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

获取到a标签里面的超链接 ("a").attr( "herf"," www.baidu.com " );

删除元素

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

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

empty()
- 清空元素中的内容

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

remove()
- 移除元素自身---自杀

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

克隆元素

.clone()
- 克隆元素

克隆span标签给div2标签 var spanObj=("div2").append(spanObj);

设置元素的全选与全不选

.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中事件的相关操作

绑定事件

.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","");
}});
复制代码

.delegate()

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

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

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不常用==

解绑事件

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

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

父子元素事件解绑关系

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

注意：

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

触发事件

直接调用要触发的元素的方法
使用： trigget(事件名)
使用： 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");	//文本框没有获取到焦点了
复制代码