jquery note

---

title: jQuery Note
categories:

• jQuery
• 前端
  tags:
• JavaScript
• jQuery

---

依然是pink老师的jQuery视频笔记 依然是水博客

jQuery概述

• jQuery是JavaScript库 封装了很多函数 DOM操作
• 学习jQuery就相当于学习函数的使用
• jQuery入口函数 相当于js的 DOMContentLoaded

$(function(){
    $('div').hide();
    //$是jQuery的顶级对象 相当于js的window 是jQuery的别称
    // $('div')  等同于   jQuery('div')
})

• jQuery获得的是jQuery对象 js获得的是DOM对象
  • jQuery对象只能用jQuery属性和方法
  • DOM对象只能用原生js属性和方法
• jQuery对象和DOM对象转化
  • DOM对象转化为jQuery对象： $(DOM对象)
  • jQuery对象转化为DOM对象：

<video src="mov.mp4" muted></video>
<script>
	var myvideo = document.querySelector('video');
	//	jquery里面没有play 这个方法	原生js有
	$('video')[0].play()	//法1
	$('video').get(0).play()	//法2
</script>

jQuery常用API

jQuery选择器

$("选择器")

(3). 隐式迭代 数组内部所有元素都执行

(4). 筛选选择器

(5). 筛选方法（重点）

//新浪下拉菜单
<style>
	* {
		margin: 0;
		padding: 0;
	}
	
	li {
		list-style-type: none;
	}
	
	a {
		text-decoration: none;
		font-size: 14px;
	}
	
	.nav {
		margin: 100px;
	}
	
	.nav>li {
		position: relative;
		float: left;
		width: 80px;
		height: 41px;
		text-align: center;
	}
	
	.nav li a {
		display: block;
		width: 100%;
		height: 100%;
		line-height: 41px;
		color: #333;
	}
	
	.nav>li>a:hover {
		background-color: #eee;
	}
	
	.nav ul {
		display: none;
		position: absolute;
		top: 41px;
		left: 0;
		width: 100%;
		border-left: 1px solid #FECC5B;
		border-right: 1px solid #FECC5B;
	}
	
	.nav ul li {
		border-bottom: 1px solid #FECC5B;
	}
	
	.nav ul li a:hover {
		background-color: #FFF5DA;
	}
</style>
<ul class="nav">
	<li>
		<a href="#">微博</a>
		<ul>
			<li>
				<a href="">私信</a>
			</li>
			<li>
				<a href="">评论</a>
			</li>
			<li>
				<a href="">@我</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="#">微博</a>
		<ul>
			<li>
				<a href="">私信</a>
			</li>
			<li>
				<a href="">评论</a>
			</li>
			<li>
				<a href="">@我</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="#">微博</a>
		<ul>
			<li>
				<a href="">私信</a>
			</li>
			<li>
				<a href="">评论</a>
			</li>
			<li>
				<a href="">@我</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="#">微博</a>
		<ul>
			<li>
				<a href="">私信</a>
			</li>
			<li>
				<a href="">评论</a>
			</li>
			<li>
				<a href="">@我</a>
			</li>
		</ul>
	</li>
</ul>
<script>
	//法1
	$(function() {
		$(".nav>li").mouseover(function() {
			$(this).children("ul").show();
		});
		$(".nav>li").mouseout(function() {
			$(this).children("ul").hide();
		})
	})
	//法2 hover	写两个函数就分别经过和离开 一个就两个都触发
	$(".nav>li").hover(function() {
		$(this).children("ul").stop().slideToggle();
	});
</script>

(6). jQuery排他思想

<button>1</button>
<button>1</button>
<button>1</button>
<button>1</button>
<script>
    $(function(){
        $("button").click(function(){
			// $(this).index();	获得索引号
            $(this).css("background","red");
            $(this).siblings("button").css("background","");
        })
    })
</script>

(7). jQuery链式编程

$(this).css("background","red");
$(this).siblings("button").css("background","");
//上面这两句等于下面这一句
$(this).css("background","red").siblings().css("background","");

jQuery样式操作

(1).操作css

$(this).css("width")	//获取属性值
$(this).css("width","300px")	//修改属性值
//参数可以是对象 以对象的方式修改
$("div").css({
	width: 400,
	height: 400,
	backgroundColor: "red"
		// 如果是复合属性则必须采取驼峰命名法
})

(2).jQuery操作类

封装一个类

//1.添加类
//addClass相当于追加类 不同于js的className的覆盖
$("div").click(function(){
	$(this).addClass("current");	//current是封装的类
})
//2.删除类
$("div").click(function(){
	$(this).removeClass("current");
})
//3.切换类 toggleClass()
$("div").click(function(){
	$(this).toggleClass("current");
})

//tab栏切换案例	
$(function() {
	$(".tab_list li").click(function() {
		$(this).addClass("current").siblings().removeClass("current");
		var index = $(this).index();
		console.log(index);
		$(".tab_con .item").eq(index).show().siblings().hide();
	});
})

jQuery效果(动画)

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

速度 切换效果 回调函数(动画结束每个元素执行一次)

<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
	$(function() {
		$("button").eq(0).click(function() {
			$("div").show(1000, function() {
				alert(1);
			});
		})
		$("button").eq(1).click(function() {
			$("div").hide(1000, function() {
				alert(1);
			});
		})
		$("button").eq(2).click(function() {
				$("div").toggle(1000);
			})
			// 一般情况下，都不加参数直接显示隐藏就可以了
	});
</script>

滑动

$("div").slideDown();
$("div").slideoup(500);
$("div").slideToggle(500);

• 动画队列
  • 停止排队 （见上面新浪下拉菜单）

淡入淡出

$("div").fadeIn(100);
$("div").fadeOut();
$("div").fadeToggle(100);
$("div").fadeTo(1000,0.5);	//速度和透明度 两个参数必须写

自定义动画

//王者荣耀手风琴样例
$(function() {
	$(".king li").mouseenter(function() {
		// 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
		$(this).stop().animate({
			width: 224
		}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
		// 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
		$(this).siblings("li").stop().animate({
			width: 69
		}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
	})
});

jQuery属性操作

• 固有属性

  • 获取固有属性 element.prop(“属性名”)
  • 设置/修改属性值element.prop(“属性名”,“属性值”)

• 自定义属性

  • attr(“属性”) //类似getAttribute()
  • attr(“属性”,“属性值”) //类似setAttribute()

• 数据缓存 data() 这个数据放在元素的内存里面

jQuery内容文本值

// 1. 获取设置元素内容 html()
console.log($("div").html());
// $("div").html("123");
// 2. 获取设置元素文本内容 text()
console.log($("div").text());
$("div").text("123");

// 3. 获取设置表单值 val()
console.log($("input").val());
$("input").val("123");

.parents() //返回所有父级

.toFixed(2) //保留两位小数

jQuery元素操作

• 遍历元素

.each(function(index,domEle){

})	//更适合DOM对象
$.each({可以是对象},function(index,ele){

})	//更适合数据 对象 数组

//创建元素
var li = $("<li>我是后来创建的li</li>")
//内部添加
$("ul").append(li);		//最后面
$("ul").prepend(li);	//最前面
//外部添加
var div = $("<div>我是后来创建的div</div>");
$(".test").before(div);
$(".test").after(div);
//删除元素
$("ul").remove();	//删除匹配的元素
$("ul").empty();	//删除子节点 本身不删除
$("ul").html("");	//html设置为空 等同于empty

jQuery尺寸 位置操作

语法	用法
width()/height()	取得元素的宽度和高度(边框等不算)
innerWidth()/innerHeight()	包含padding的
outerWidth()/outerHeight()	包含padding和border
outerWidth(true)/outerHeight(true)	padding border margin

语法	用法
offset()	距离文档
position()	得到带有定位的父级定位坐标
scrollTop()/scrollLeft()	被卷曲的

jQuery事件

//(1).单个事件注册
$("div").click(function(){
	$(this).css("background","purple");
});
$("div").mouseenter(function(){
	$(this).css("background","skyblue");
});
//(2).事件处理on
$("div").on({
	mouseenter: function(){
		$(this).css("background","skyblue");
	},
	click: function(){
		$(this).css("background","purple");
	},
	mouseleave: function(){
		$(this).css("background","blue");
	}
});
//on绑定多个事件
$("div").on("mouseenter mouseleave", function() {
	$(this).toggleClass("current");
});
//on事件委派
$("ul").on("click", "li", function() {
	alert(11);
});	//on可以给未来创建的元素添加事件 但是直接原始元素创建事件不可以
//事件处理off	off()解绑程序
$("div").off();	//无参数解除所有事件
$("div").off("click");	//接触click事件
$("ul").off("click","li");	//接触事件委托
//只触发一次可以用one方法
//自动触发事件
$("div").click();	//1.元素.事件 触发点击事件
$("div").trigger("click");	//2.元素.trigger("事件")
$("div").triggerHandler("click");	//3.不会触发默认行为
//(3).jQuery事件对象
$("div").on("click",function(event){
	console.log(event);
})

其他方法

1拷贝对象 2多库共存 3jQuery插件

//拷贝对象
var tar = {};
var obj = {
	id: 1,
	name: "andy",
};
$.extend(tar,obj);	//
console.log(tar);

//多库共存：	$符号冲突
//1.$ 直接写成 jQuery 就可以
//2.自定义
var suibian = $.noConflict();
suibian("div");

jQuery插件库

jQuery之家

//jQuery插件
// [jQuery插件库](http://www.jq22.com/)
// [jQuery之家](http://www.htmleaf.com/)
//1.下载
//2.复制到项目目录
//3.按要求复制css js 和 html

懒加载插件63

全屏滚动插件64

bootstrap组件65

todolist综合练习

todolist综合练习