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插件库](http://www.jq22.com/)
// [jQuery之家](http://www.htmleaf.com/)
//1.下载
//2.复制到项目目录
//3.按要求复制css js 和 html
懒加载插件63
全屏滚动插件64
bootstrap组件65