###JQuery
####什么是JQuery
- 是一个通过JavaScript代码写的 关于JavaScript的框架
- 用来简化js代码
- 可以像css一样通过选择器获取元素
- 可以快速修改元素的样式
####如何引入jQuery
-
因为jQuery就是一个js文件 所以引入方式和引入一个普通的js文件一样
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
####jQuery对象和js对象互相转换
-
把js转成jq
/* 得到js对象 */
var input = document.getElementById(“myinput”);
/* 把js对象转成jQuery对象 /
/ $是jQuery单词的缩写 $=jQuery /
var $jq = $(input);
/ 弹出文本框的value值 */ -
把jq转成js
/* 得到jq对象 */
var $jq = $("#myinput");
/* 把jq转成js对象 */
//第一种写法
var js1 = $jq[0];
//第二种写法
var js2 = $jq.get(0);
alert(js1.value+"="+js2.value);
###选择器
####基础选择器
- 标签名选择器
var $div = $(“div”); - id选择器
var $div = $("#id"); - 类选择器
var $div = $(".class"); - 分组选择器
var $div = $(“div,#id,.class”); - 任意元素选择器
var $div = $("*");
###层级选择器 - $(“div span”) 匹配div下所有的span元素
- $(“div>span”) 匹配div的所有span子元素
- $(“div+span”) 匹配div相邻的后面的兄弟span元素
- $(“div~span”) 匹配div后面所有的兄弟span元素
###层级函数 当得到某个元素对象后 需要获得该元素的相关元素的时候使用 - 获取元素的所有兄弟元素
$("#abc").siblings(“div”); - 获取元素的哥哥元素
$("#abc").prev(“div”); - 获取元素的哥哥们元素
$("#abc").prevAll(“div”); - 获取元素的弟弟元素
$("#abc").next(“div”); - 获取元素的弟弟们元素
$("#abc").nextAll(“div”);
###过滤选择器 - $(“div:first”)匹配所有div中的第一个
- $(“div:last”)匹配所有div中的最后一个
- $(“div:even”)匹配所有div中的偶数 从0开始
- $(“div:odd”)匹配所有div中的奇数 从0开始
- $(“div:eq(n)”) 匹配所有div中下标等于n的 从0开始
- $(“div:lt(n)”) 匹配所有div中下标小于n的 从0开始
- $(“div:gt(n)”) 匹配所有div中下标大于n的 从0开始
- $(“div:not(.abc)” 匹配所有div中class值不等于abc
###内容选择器 - $(“div:has§”) 匹配所有包含p标签的div
- $(“div:empty”) 匹配所有空的div
- $(“div:parent”)匹配所有非空的div
- $(“div:contains(‘abc’)”) 匹配包含abc文本内容的div
###可见选择器 - $(“div:hidden”) 匹配所有隐藏的div
- $(“div:visible”)匹配所有可见的div
###显示隐藏相关的函数 - 让隐藏的元素显示
$(“div:hidden”).show(); - 让显示额元素隐藏
$(“div:visible”).hide(); - 切换隐藏和显示状态
$("#abc").toggle();
###属性选择器 - $(“div[id]”) 匹配所有有id属性的div元素
- $(“div[id=‘abc’]”) 匹配有id属性值为abc的所有div
- $(“div[id!=‘abc’]”) 匹配有id属性值不为abc的所有div
###子元素选择器 - $(“div:nth-child(n)”) 获取div中第n个子元素 从1开始
- $(“div:first-child”) 获取div中第1个子元素
- $(“div:last-child”) 获取div中最后一个子元素
###表单选择器 - $(":input") 匹配所有 文本框 密码框 单选 多选 下拉选 文本域 按钮
- $(":password") 匹配所有密码框
- $(":radio")匹配所有单选
- $(":checkbox")匹配所有多选(复选框)
- $(":checked")匹配所有被选中的 单选、多选、下拉选
- $(“input:checked”) 匹配所有被选中的 单选、多选
- $(":selected") 匹配被选中的下拉选
###和页面(DOM)相关
-
创建元素
var div = document.createElement(“div”);
var $div = $(“abc”); -
添加到页面中
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲big").append(div); //添加到最后面
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲big").prepend(div);//添加到最前面 -
插入元素
兄弟元素.after(新元素) 加载兄弟元素的后面
兄弟元素.before(新元素) 加载兄弟元素的前面
//添加到二哥前面 before
( " h 1 : c o n t a i n s ( ′ 二 ′ ) " ) . b e f o r e ( ("h1:contains('二')").before( ("h1:contains(′二′)").before(h1);
//添加到二哥的后面 after
( " h 1 : c o n t a i n s ( ′ 二 ′ ) " ) . a f t e r ( ("h1:contains('二')").after( ("h1:contains(′二′)").after(h1); -
删除元素
- 通过自己删除 $("#id").remove();
- 先匹配到所有的指定类型元素 从里面删除某些元素 $(“div”).remove("#abc");
-
修改元素的样式css
$(“div”).css(“color”,“red”);
$(“div”).css({“color”:“red”,”background-color”:”green”}); -
属性
$("#abc").attr(“id”); 获取id的属性值
$("#abc").attr(“class”,“aaa”); 给元素添加class属性值为aaa -
文本
$("#abc").text() 获取文本内容
$("#abc").text(“啊啊啊”) 赋值文本内容 -
html
$("#abc").html() 获取文本内容
$("#abc").html(“啊啊啊
”) 赋值文本内容
###获得元素的子元素和父元素
children()得到所有子元素
parent()得到父元素
###jq事件相关内容
####常见事件
- 鼠标相关: click 点击 mouseover mouseout mousedown mouseup mousemove
- 键盘: keydown keyup
- 状态: $(function(){}) focus blur submit resize窗口尺寸改变 change当value值发生改变时的事件
####事件模拟
//开启定时器
setInterval(function(){
//模拟事件
$(“input”).trigger(“click”);
},3000);
hover事件合并函数
-
hover(fn1,fn2); 等效 mouseover + mouseout
$("div").hover(function(){ $("div").css("color","red"); },function(){ $("div").css("color","green"); })
###动画相关
function fn1(){//隐藏
$("img").hide(3000);
}
function fn2(){//显示
$("img").show(3000,function(){
alert("啦啦啦");
});
}
function fn3(){//滑出
$("img").slideUp(2000);
}
function fn4(){//滑入
$("img").slideDown(2000);
}
function fn5(){//淡入
$("img").fadeIn(2000);
}
function fn6(){//淡出
$("img").fadeOut(2000);
}
function fn7(){//自定义
$("img").animate({"left":"250px"},1000)
.animate({"top":"250px"},1000)
.animate({"left":"0px"},1000)
.animate({"top":"0px"},1000)
.fadeOut(2000,function(){
$(this).remove();
});
}
###音频视频播放
<!-- autoplay自动播放 loop循环播放 controls显示播放面板-->
<!-- <audio src="music.mp3" autoplay="autoplay"
loop="loop" controls="controls"></audio> -->
<!-- poster视频封面 -->
<video poster="../imgs/k.jpg" controls="controls">
<source src="hero.mp4">
</video>