JQuery学习

jQuery常用函数

jQuery官网下载：https://jquery.com/download/

jQuery中文API：https://jquery.cuishifeng.cn/

新手在慢慢的学习过程中，可以慢慢试着使用JQ写个聊天弹出框

jQuery对象和DOM对象

jQuery对象和DOM对象不能相互交叉使用
eg：

// 获取DOM对象,并设置属性值
document.getElementById("div").style.display="none";
//获取 jQuery对象，并使用jQuery对应的方法
$("div").hide();
// JQuery对象使用DOM方法和属性会报错，二者不可交叉使用
$("div").style.display="none";

jQ对象和DOM对象转换

1、 DOM对象转为jQuery对象：$('div');
$(DOM对象);
比如：$("div"); 此时便获取到了jQuery对象

console.log($("div"));
2、jQuery对象转为 DOM对象：[index]、get(index)
1.直接使用[index]获取到DOM对象；index是索引号
var domObj = $("div")[0] ;
2.使用get(index)获取，此时便得到的是一个DOM对象
var domObj = $("div").get(0);

筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取索引号为2的li元素
:odd	$(“li:odd”)	获取索引号为奇数的li元素
:even	$(“li:even”)	获取索引为偶数的li元素

筛选选择器的简单使用实例

<div>
	<ul class='ulOne'>
		<li>第1个小li</li><!-- 索引0 -->
		<li>第2个小li</li><!-- 索引1 -->
		<li>第3个小li</li><!-- 索引2 -->
		<li>第4个小li</li><!-- 索引3 -->
	</ul>
</div>

<script type="text/javascript">
$(function(){
	// :first 得到第一个li标签和属性值
	var li1 = $('li:first');  // <li>第1个小li</li>
	// :last 得到最后一个小li标签和属性值
	var li4 = $('li:last');  // <li>第4个小li</li>
	// :eq 得到所以匹配的标签（相当于java中equals方法的缩写），这里匹配的是索引
	var li2 = $("li:eq(2)"); // <li>第2个小li</li>
	// :odd 匹配所有索引值为奇数的元素，从 0 开始计数 1、3、5、7
	$("li:odd"); //<li>第2个小li</li>第4个小li<li></li>
	console.log("odd:"+$('li:odd').text()); //odd:第2个小li第4个小li
	// :even 匹配所有索引值为偶数的元素，从 0 开始计数 0、2、4、6
	$("li:even"); //<li>第1个小li</li>第3个小li<li></li>
	console.log("even:"+$("li:even").text()); //even:第1个小li第3个小li
})
</script>

jQuery筛选方法

语法	用法	说明
parent()	$(“li”).parent();	查找父级
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”);最近的一级
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”);后代选择器
siblings(selector)	$(".first").siblings(“li”)	查找兄弟节点,不包含自身(同父级下相同级别的元素,不包含自身)
nextAll([expr])	$(".first").nextAll()	当前元素之后的所有的同辈元素
prevtAll([expr])	$(".first").prevtAll()	当前元素之前的所有的同辈元素
hasClass(class)	$(“div”).hasClass(“protected”)	检查当前元素是否包含某个特定的类,包含返回true,否则false(当前元素是否包含class为’protected’的类)
eq(index)	$(“li”).eq(2)	相当于$(“li:eq(2)”);index索引从0开始
parents()	$(this).parents();	获取当前元素元素的所有父辈
toggleClass()	$(this).toggleClass(“current”);	给当前元素上不存在class="current"則添加，否則移除class=“current”

<div class='one'>
	<div class='two'>
		<div class='three'>
			<div class='four'>
				<ul class='ulOne'>
					<li>第1个小li</li><!-- 索引0 -->
					<li>第2个小li</li><!-- 索引1 -->
				</ul>
				<ul class='ulTwo'>
					<ol>第1个小ol</ol><!-- 索引0 -->
					<ol>第2个小ol</ol><!-- 索引1 -->
				</ul>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function(){
		//parent(); 取得一个包含着所有匹配元素的唯一父元素的元素集合。
		console.log($('li').parent().text());//第1个小li 第2个小li
		console.log($('li').parent('ul').text());//第1个小li 第2个小li
		//children();取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。相当于$(“ul>li”);最近的一级
		console.log($('ul').children().text());//第1个小li第2个小li第1个小ol第2个小ol
		console.log($('ul').children('li').text());//第1个小li第2个小li
		// find();搜索所有与指定表达式匹配的元素。相当于$(“ul li”);后代选择器
		console.log($('div').find('ul').text());// 第1个小li 第2个小li 第1个小ol 第2个小ol
		// siblings();用于筛选同辈元素的表达式。查找兄弟节点,不包含自身,匹配的是ulOne，得到的是ulTwo，不包含自身
		console.log($('.ulOne').siblings().text());//第1个小ol 第2个小ol
		//hasClass();检查当前的元素是否含有某个特定的类，如果有，则返回true。
		console.log($('div').hasClass('one'));// 包含返回true，否则返回false
		/**  以下方法可以试一下具体功能，一部分在下面会有补充
		 * nextAll()	当前元素之后的所有的同辈元素
		 * prevtAll()	当前元素之前的所有的同辈元素
		 * eq(2)		相当于$(“li:eq(2)”);index索引从0开始
		 * parents();	获取当前元素元素的所有父辈
		 * toggleClass(“cls”);	给当前元素上不存在class="cls"則添加，否則移除class=“cls”
		 */
	})
</script>

排他思想

排他思想，除自身外，其他都改变

siblings();查找兄弟节点,不包含自身

除了自身颜色不变，其余兄弟节点全变红色
$(".btn").siblings("button").css("background","red");

<style>.current{background:green;}</style>
<div class="btn">
    <button type="button">按钮1</button>
    <button type="button">按钮2</button>
    <button type="button">按钮3</button>
    <button type="button">按钮4</button>
    <button type="button">按钮5</button>
    <button type="button">按钮6</button>
    <button type="button">按钮7</button>
    <button type="button">按钮8</button>
    <button type="button">按钮9</button>
</div>
<script>
$(function(){
	$("button").click(function(){
		// this指当前，给当前元素绑定背景颜色
		$(this).css("background","red");
		// 除当前元素外（不包含自身），其他元素均为不添加背景颜色
		$(this).siblings("button").css("background","");
	});
})
</script>

toggleClass

如果存在（不存在）就删除（添加）一个类。

// 点击后给 div  添加上 class="current" 类属性
$("button").click(function(){
    // 鼠标点击后给当前元素添加上calss="current"的属性
    //$(this).addClass("current");
    // 鼠标点击后移除当前元素上的class="current"属性
    //$(this).removeClass("current");
    // 点击鼠标后给当前元素添加上class="current"的属性,再次点击后移除class="current"的属性,相当于addClass和removeClass的结合
    $(this).toggleClass("current");
});

stop阻止事件排队

stop()写在动画效果函数的前面

当鼠标快速经过或者点击多个元素(绑有事件)，就会存在事件排队逐一执行的现象

/**   停止排队函数		stop()  */

$("ul>li").hover(function(){
	//$(this).children("ul").sideToggle(1000);
	$(this).children("ul").stop().toggle(1000);
});

attr()和prop()全选 | 取消全选

prop()：只有该元素有固有的属性时 该方式才生效

attr()：均可使用

<div class="btn">
	<p><label><input type="checkbox" class="checkAll"/>全选</label></p>
    <label><input type="checkbox" class='check'/>复选框</label><br/>
    <label><input type="checkbox" class='check'/>复选框</label><br/>
    <label><input type="checkbox" class='check'/>复选框</label><br/>
    <label><input type="checkbox" class='check'/>复选框</label><br/>
    <label><input type="checkbox" class='check'/>复选框</label><br/>
    <label><input type="checkbox" class='check'/>复选框</label><br/>
    <label><input type="checkbox" class='check'/>复选框</label><br/>
    <label><input type="checkbox" class='check'/>复选框</label><br/>
    <label><input type="checkbox" class='check'/>复选框</label><br/>
</div>

<script type="text/javascript">
	/**	attr("属性");	attr("属性","属性值");  
		获取元素属性     $("input").attr("属性");  
		设置元素属性	   $("input").attr("checked",true);
		
		获取元素属性    $("input").prop("属性");  
		设置元素属性	   $("input").prop("checked",true);
	*/
	// 以prop为例，实现全选和取消全选
	$(".checkAll").change(function(){
		let flg = $(this).prop("checked"); // prop()中只有属性没有值,则代表是获取$(this)当前组件的prop值，选中返回true，否则返回false
		if(flg){
		// 既有属性又有值,则代表是给所有class='check'组件(标签)添加上属性和值，即全选操作
		$(".check").prop("checked",true); 
		}else{
		// 取消全选
		$(".check").prop("checked",false); 
		}
	});
</script>

change()和:checked

/**  change()  当值发生改变时  此函数绑定的事件就会触发  **/
$(".itex").change(function(){
	//当input中的值发生改变 此函数就会执行
	console.log("值发生了改变:"+$(this).val());
});

change()：当元素(值)的发生改变时，该方法就会执行

:checked : 匹配所有被选中元素(复选框、单选框等)

存在多个相同类名时(class=“check”)，$(this)值是当前所点击的组件对象

<div class="btn">
	<label><input type="checkbox" class="checkAll" name="topCheck" />全选</label><br/>
	
    <label><input type="checkbox" class="check" name="" /> 选项1</label><br/>
    <label><input type="checkbox" class="check" name="" /> 选项2</label><br/>
    <label><input type="checkbox" class="check" name="" /> 选项3</label><br/>
    <label><input type="checkbox" class="check" name="" /> 选项4</label><br/>
    
	<label><input type="checkbox" class="checkAll" name="bottomCheck" />全选</label><br/>
</div>

<script>
$(".checkAll").change(function(){
	let that = $(this);
	let flg = that.prop("checked");  // 点击全选返回true或者false
	$(".check").prop("checked",flg); // 当全选时 flg为true,则所有的选项都被选中,否则为false  全都不选中
	$(".check,.checkAll").prop("checked",flg); // 除了所有选项选中外,所有checkAll的复选框也一起被选中
});
    
/**  :checked : 匹配所有被选中元素(复选框、单选框等)    **/
$(".check").change(function(){
	let count = $(".check:checked").length; // 所有被选中的元素的个数
	let num = $(".check").length; // 获取所有class名为"check"的个数
	count == num ? $(".checkAll").prop("checked",true):$(".checkAll").prop("checked",false);
});
</script>

substr()和toFixed()

substr()：字符串的截取 获取当前对象的父类中的兄弟节点中类名为’.atm’的文本,并截取**(1,x];**的字符串

let atm = $(this).parent().siblings(".atm").text().substr(1);

​ substr(num); substr中的数字代表截取的字符串的长度,num=1,说明是截取到0~1,
​ 返回的是1后面的数据,num=5,截取长度就是 0~5,返回的是 5之后的新字符串

toFixed(); 保留小数位

<span class="atm">$12.6</span>
<script>
$(function{
	let atm = $(".atm").text().substr(1);  // 12.6
    let num = 15.80;
    console.log(Number(num));  // 返回的是 15.8
    console.log(num.toFixed(3));  //结果是 15.800   toFixed(3)保留3位小数
})
</script>

事件委托 live()和on()

on()、live()：事件委托

​ .live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上 触发的事件作出回应。

多个事件可以使用对象 on({click:function(){},blur:function(){}});

on() 可以触发后来添加的元素
在js中创建的元素 使用on() 可以就行事件的绑定

** var tt = <ol><li>li元素<li><li>点击</li></ol>;**

JS中创建的元素 使用 $("ol li").click(function(){});时 事件不会生效
此时就需要使用 on()元素了,使用 live()也可以

<!-- on()   可以触发后来添加的元素
		在js中创建的元素 使用 on()  可以就行事件的绑定

var tt = `<ol><li>li元素<li><li>点击</li></ol>`;

JS中创建的元素  使用  $("ol li").click(function(){});时 事件不会生效
此时就需要使用 on()元素了,,,使用  live()也可以
-->

<div class="one">
	<div class="two">
		<div class="three">
			<div class="four">
				<div class="five">
					<p> 获取one元素 </p>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
$("p").live("click",function({
	$(this).parents();//可以获取到five,four,three,two,one元素;
	$(this).parents(".two");  //可以直接获取到父级父级元素中的two
}));
$("p").on("click",function({
	$(this).parents();//可以获取到five,four,three,two,one元素;
	$(this).parents(".two");  //可以直接获取到父级父级元素中的two
}));
$("div").on({
	mouseenter:function(){//鼠标经过div,颜色变为天蓝色
		$(this).css("background","sykblue");
	},
	click:function(){//鼠标点击div颜色变为紫色
		$(this).css("background","purple");
	},
	mouseleave:function(){//鼠标离开div 颜色变为蓝色
		$(this).css("background","blue");
	}
});
/**   绑定事件  事件委派:   */
$("ul").on('click','li',function(){
	console.log($(this));
});
var tt = `<ol><li>li元素<li><li>点击</li></ol>`;
$("ol li").on('click',function(){
	console.log($(this));
});
$("div").on("mouseenter mouseleave",function(){
	console.log($(this));
	console.log("鼠标来了");
	console.log("鼠标离开了");
});
</script>

off()移除事件

/***  off()  移除事件  */
$("p").off();  // 移除p元素上的所有事件

$("p").off("click");  // 移除p元素上的click事件  foo是监听函数名

$("ul").off("click","li");  // 解除事件委托


/***  noConflict();  不冲突的  **/
var  ml = JQuery.noConflict();  // 自定义JQuery的的对象  将 $ 改为 ml

ml("#id").on("click",function(){
	console.log(ml(this));
});

each()遍历

一般用于遍历元素 ：$("div").each()
** 一般用于遍历数据,处理数据 || 可遍历数组 也可 遍历对象 ** ：*$.each(arr,function(){})

• el.remove(); // 删除匹配的元素(本身)
• el.empty(); // 删除匹配的元素集合中所有的子节点
• el.html(""); // 清空匹配的元素内容

$("div").each(function(index,el){
	console.log(index,el)
});

$.each($("div"),function(index,el){
	console.log(index,el)
});


let arr=['red','blue','green','yellow','pink','black'];
$.each(arr,function(index,el){
	console.log(index,el)
});


let atr = {name:'张三',age:18,sex:男,hobby:'篮球,足球,排球,羽毛球'};
$.each(atr,function(key,val){
	console.log(key+":"+val);
});
/**  el.remove();  // 删除匹配的元素(本身)
	 el.empty();	// 删除匹配的元素集合中所有的子节点
	 el.html("");	// 清空匹配的元素内容
*/

jQuery动画

toggle是点击一次执行一个方法(show),再次点击后执行另一个方法(hide)

toggle(speed,[easing],[fn]);
show(speed,[easing],[fn]);

fn:回调函数,在动画执行完成后执行回调函数

显示隐藏	滑动	淡入淡出	自定义动画
show();	slideDown();	fadeIn();
hide();	slideUp();	fadeOut();	animate();
toggle();	sideToggle();	fadeTo();

/**  事件切换  hover(fn1,fn2);  */ 
// 鼠标经过和离开的复写函数,经过触发fn1,离开触发fn2
$("ul>li").hover(function(){
		console.log("触发了一次函数");
		//$(this).children("ul").show(1000);
		$(this).children("ul").stop().slideDown(1000);
},function(){
	console.log("又一次触发了函数");
	//$(this).children("ul").hide(1000);
	$(this).children("ul").stop().slideUp(1000);
});

/**  hover(fn);   */
// 鼠标经过和离开都会触发此函数
$("ul>li").hover(function(){
	//$(this).children("ul").sideToggle(1000);
	$(this).children("ul").stop().toggle(1000);
});

配合JQ试试写个聊天框弹窗，来熟悉JQuery