jQuery
初始jQuery
jQuery简介
1、jQuery由美国人Jhon Resig于2006年创建
2、 jQuery是由目前最流行的Javascript程序库,它是对Javascript对象和函数的封装
3、他的设计理念是写最少的代码,做最多的事(write less,do more)
jQuery获取链接:http://jquery.com
jQuery语法
jQuery的语法结构
组成 | 说明 和作用 |
---|---|
$() | 工厂函数 将DOM对象转换为jQuery对象 |
selector | 选择器 获取需要操作的DOM元素 |
action() | 方法 jQuery中提供的方法,其中包括绑定事件处理的方法 |
语法:$(“selector”).action();
jQuery操作页面元素
方法 | 语法 |
---|---|
addClass() | 语法:jQuery对象.addClass([class名]); 示例:$(" current").addClass(“current”); |
css() | 语法:设置一个css样式:css(“属性”,“属性值”) 设置多个css样式:css({“属性”:“属性值”,“属性”:“属性值”}) |
show() hide() | 语法:显示:dollar符 (“current”).show() ; 隐藏:$(“current”).hide() |
next() | 链式操作 |
$ = jQuery
jQuery链式操作和隐式迭代
链式操作
$(".stripe
tr").mouseover(function(){
$(this).addClass("over");})
$(".stripe
tr").mouseout(function(){
$(this).removeClass("over");
})
但是我们写成了:
$(".stripe
tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
因为鼠标移入移除都是发生在同一个对象上的,所以我们可以将发生在同一个对象上的动作连起来写,这样子如果有很
多对象并且在他们身上发生了很多动作那么就会节省很多代码
<body>
<ul>
<li id="frIstLi">HTML</li>
<li>css</li>
<li>java</li>
<li>js</li>
<li>jQuery</li>
<li>oop</li>
<li>api</li>
<li>mysql</li>
</ul>
<script src="js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function (){
$("#frIstLi").css("color","pink").next().css("color","red")
})
</script>
</body>
隐式迭代
1、在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用,这就叫做隐式迭代
2、我想把ul下的每个li都加个样式jquery写法就是:$(“ul li”).addClass(“test”),就是把ul下的每一个li都加了test的样式,我们并没有去取得所有li然后循环加样式
3、如果获取的是多元素的值,大部分情况下返回的是第一个元素的值
4、each方法:大部分情况下是不需要使用each方法的,因为jquery有隐式迭代的特性,但是如果要对每个元素做不同的处理就要用到each方法了
<ul>
<li>HTML</li>
<li>css</li>
<li>java</li>
<li>js</li>
<li>jQuery</li>
<li>oop</li>
<li>api</li>
<li>mysql</li>
</ul>
<script src="js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function (){
// $("li").css({"font-wight":"bolder","color":"green"})
// for (let i = 0; i < $("li").length; i++) {
// $("li")[i].click=function (){
// for (let j = 0; j < $("li").length; j++) {
// $("li")[i].style.color = '';
// }
// $("li")[i].style.color = 'pink';
// }
// }
$("li").each(function (){
$("li").click(function (){
$("li").css({"font-wight":"bolder","color":"green"})
})
})
})
</script>
jQuery对象和dom对象相互转换
案例:
//通过js方法,获取dom对象
// var h1 = document.getElementsByTagName("h1")[0];
// h1.innerHTML="操作dom对象";
//dom对像·像转换为jQuery对象,通过工厂函数进行转换
// let $1 = $(h1);
// $1.html("操作dom对象转换为jQuery对象")
//通过jQuery方法获取jQuery对象
let $h1 = $("h1:eq(0)");
$h1.html("操作jquery对像")
//讲jQuery对象转换为dom对象:方法有两种--->方法一:get(0) 方法二:[0]
方法一:
let newH1 = $h1.get(0);
newH1.innerHTML = "操作jQuery对象转换为dom对象"
方法二:
let newH1 = $h1[0];
newH1.innerHTML = "操作jQuery对象转换为dom对象"
// 总结
// dom对像转jQuery对象:$()
// jQuery对象转dom对象:get(0) [0]
jQuery选择器
jQuery选择器功能强大,种类也很多,分类如下
通过css选择器选取元素
基本选择器、层次选择器、属性选择器
通过过滤选择器选取元素
基本过滤选择器
可见性过滤选择器
属性选择器
通过HTML元素的属性来选择元素
//包含该属性
$("a[href]").css("background","red")
//包含该属性并且属性值等于绝对值
$("a[href='abc']").css("background","pink")
//包含该属性并且属性值不等于绝对值
$("a[href!='abc']").css("background","pink")
//属性值以xxx开头
$("a[href^='https']").css("background","pink")
//属性值以xxx结尾
$("a[href$='html']").css("background","red")
//属性值包含xxx
$("a[href*='a']").css("background","green")
层次选择器
通过DOM元素之间的层次关系来获取元素
//后代选择器
$("ul li").css("background","pink");
//子代选择器
$("ul>li").css("background","green");
//相邻选择器
$(".js+li").css("background","#ccc");
//同辈选择器
$(".js~li").css("background","pink");
//所有兄弟选择器
$(".js").siblings().css("background","pink");
基本选择器
基本选择器包括标签、类、ID、并集和全局
//标签选择器
$("h1").css("color","red")
//类选择器
$("h2").css("color","green")
//id选择器
$("#h3").css("color","pink")
//并集选择器
$("h1,.h2,#h3").css("color","red")
//全局选择器
$("*").css("color","#ccc")
可见性过滤选择器
通过元素显示状态来选取元素
$(":visible").hide()//所有显示的元素隐藏
$(":hidden").show()//所有隐藏的元素显示
基本过滤选择器
//获取contain下所有的标题元素
$(".contain :header").css({"background":"pink","font-size":"20px"})
//获取偶数行的li
$("li:even").css("background","#CCC")
//获取奇数行的li
$("li:odd").css("background","red")
//获取第一个li
$("li:first").css("color","yellow")
//获取最后一个li
$("li:last").css("color","blue")
//获取大于某某索引的li元素
$("li:gt(3)").css("font-size","25px")
//获取小于某某索引的li元素
$("li:lt(3)").css("font-size","5px")
//等于某索引值
$("li:eq(3)").css("background","yellow")
事件(jQuery事件是对javascript事件的封装,常用事件分类:)
基础事件:
鼠标事件
方法 | 描述 | 执行时机 |
---|---|---|
click() | 触发或将函数绑定到指定元素的click事件 | 单机鼠标时执行 |
mouseover() | 触发或将函数绑定到指定元素mouseover事件 | 鼠标移过时 |
mouseout() | 触发或将函数绑定到指定元素mouseout事件 | 鼠标移出时 |
mouseenter() | 触发或将函数绑定到指定元素mouseenter事件 | 鼠标进入时 |
mouseleave() | 触发或将函数绑定到指定元素mouseleave事件 | 鼠标离开时 |
$(function (){
$(".nav-box .wrap .nav-ul li a").mouseover(function (){
$(this).css("color","orange")
}).mouseout(function (){
$(this).css({"color":"#FFF","display":"none"}).slideDown("slow")
})
});
mouseover And mouseout 对比 mouseenter And mouseleave
<body>
<h1>mouseover And mouseout</h1>
<div class="out">
<span></span>
<div class="inner"></div>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
// const
$(function (){
var count = 0;
var count1 = 0;
//鼠标移入
$(".out").mouseover(function (){
$("span").text("鼠标移入移除的次数是"+(++count));
//鼠标移出
}).mouseout(function (){
$("span").text("鼠标移出移除的次数是"+(++count1));
})
});
</script>
</body>
<body>
<h1>mouseenter And mouseleave</h1>
<div class="out">
<span></span>
<div class="inner"></div>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
// const
$(function (){
var count = 0;
var count1 = 0;
//鼠标进入
$(".out").mouseenter(function (){
$("span").text("鼠标移入移除的次数是"+(++count));
//鼠标离开
}).mouseleave(function (){
$("span").text("鼠标移出移除的次数是"+(++count1));
})
});
</script>
</body>
鼠标事件方法的区别
方法 | 相同点 | 不同点 |
---|---|---|
mouseover() mouseenter() | 鼠标进入备选元素时触发 | 鼠标在其备选元素的子元素上来回进入时触发mouseover(),不触发mouseenter() |
mouseout() mouseleave() | 鼠标离开备选元素时触发 | 鼠标在其备选元素的子元素上来回进入时触发mouseout(),不触发mouseleave() |
window窗口事件
方法 | 描述 |
---|---|
$(window).resize(); | 调整窗口大小时 |
属性 | 描述 |
---|---|
window.innerHeight | 浏览器高度 |
window.innerWidth | 浏览器宽度 |
$(function (){
var i=0;
$(window).resize(function (){
console.log("窗口发生变化:"+(i++)+"c")
console.log("窗口的宽度:"+window.innerWidth)
console.log("窗口的高度:"+window.innerHeight)
})
})
键盘事件
用户每次按下或释放
属性 | 描述 |
---|---|
.keyCode | 键值码 |
方法 | 描述 | 执行时机 |
---|---|---|
keydown() | 触发或函数绑定到指定元素的keydown事件 | 键盘按下时 |
keyup() | 触发或函数绑定到指定元素的keyup事件 | 键盘抬起时 |
keyprees() | 触发或函数绑定到指定元素的keypress事件 | 产生可打印字符时 |
$(function (){
//.keyup() 当键盘抬起的时候
$("[type=password]").keyup(function (event){
$("#events").append("抬起时"+event.keyCode+"<br/>")
}).keydown(function (){
$("#events").append("按下时"+event.keyCode+"<br/>")
}).keypress(function (){
$("#events").append("产生可打印的字符"+event.keyCode+"<br/>")
})
$(document).keydown(function (event){
if (event.keyCode==13){
alert("您按下了回车键")
}else if(event.keyCode==91){
alert("你按下了win键")
}
})
})
表单事件
第八章:jquery操作dom对象
jquery对javascript中的DOM操作进行了封装jquery中的DOM操作
样式操作
设置单个样式:.css("属性名称","属性值")
设置多个样式:.css({"属性名称1":"属性值1","属性名称2":"属性值2"})
获取样式值: .css("属性名称")
添加类样式: .addClass("类样式名称 类样式名称")
移除类样式: .removeClass("类样式名称 类样式名称")
切换类样式: .toggleClass("类样式名称 类样式名称")
判断元素是否包含指定的样式: .hasClass("类样式名称 类样式名称") 返回值boolean
<style>
#p3{
color:red;
font-size: 11px;
}
.addClass{
color: #3facc0;
background-color: #4dc83a;
}
.c{
color: #9999CC;
}
</style>
</head>
<body>
<p id="p1">设置单个样式</p>
<p id="p2">设置多个样式</p>
<p id="p3">获取样式值</p>
<p id="p4">添加类样式</p>
<p id="p5">切换类样式</p>
<button>切换</button>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function (){
<!--设置单个样式:.css("属性名称","属性值")-->
$("#p1").css("background","red");
<!--设置多个样式:.css({"属性名称1":"属性值1","属性名称2":"属性值2"})-->
$("#p2").css({"background":"blue","color":"red"});
<!--获取样式值: .css("属性名称")-->
console.log($("#p3").css("color"));
console.log($("#p3").css("font-size"));
<!--添加类样式: .addClass("类样式名称")-->
$("#p4").addClass("addClass");
<!--移除类样式: .removeClass("类样式名称")-->
$("#p4").removeClass(("addClass"));
<!--切换类样式: .toggleClass("类样式名称")-->
$("button:eq(0)").click(function (){
$("#p5").toggleClass("c");
console.log($("#p5").hasClass("c"));
});
<!--判断元素是否包含指定的样式: .hasClass("类样式名称")-->
console.log($("#p5").hasClass("c"));
})
</script>
</body>
内容及value值操作
获取元素中的html代码 .html();
设置元素中的html代码 .html("<h1>琪琪最美!</h1>")
获取元素中的文本内容 .text()
设置元素中的文本内容 .text("琪琪最美!")
元素失去焦点: .blur()
元素获取焦点: .focus()
获取元素的value属性值 .val()
设置元素的value属性值 .val("设置的属性值")
<body>
<div id="father">
<div id="son">
son
</div>
</div>
<input type="text">
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function (){
// 获取元素中的html代码 .html();
console.log($("#father").html());
// 设置元素中的html代码 .html("<h1>琪琪最美!</h1>")
$("#father").html("<h1>琪琪最美!</h1>")
// 获取元素中的文本内容 .text()
$("h1").text();
// 设置元素中的文本内容 .text("琪琪最美!")
$("h1").text("哦耶");
// 元素失去焦点: .blur()
$("input:eq(0)").blur(function (){
$((this)).css("background","#FFF")
// 获取元素的value属性值 .val()
console.log($(this).val(" "));
})
// 元素获取焦点: .focus()
$("input:eq(0)").focus(function (){
$((this)).css("background","red")
// 设置元素的value属性值 .val("设置的属性值")
console.log($(this).val("请输入琪琪"));
})
// 获取元素的value属性值 .val()
// 设置元素的value属性值 .val("设置的属性值")
})
</script>
</body>
节点操作
获取或创建节点
工厂函数 $("")
通过选择器获取节点: $("selector")
把DOM节点转换为jQuery节点: $("<p>")
使用html字符串创建jQuery节点: $("<p>文字</p>")
元素内部追加子节点
将A节点追加到B节点里 B.append(A)
将A节点追加到B节点里 A.appendTo(B)
将A节点追加到B节点最前 B.prepend(A)
将A节点追加到B节点最前 A.prependTo(B)
元素外部插入同辈节点
将A节点插入到B节点之后 B.after(A)
将A节点插入到B节点之后 A.insertAfter(B)
将A节点插入到B节点之前 B.before(A)
将A节点插入到B节点之前 A.insertBefore(B)
删除节点
删除h1节点 $("h1").remove()
清空h2节点 $("h2").empty()
删除整个节点 $("h2").detach()
替换节点:
将A节点替换为B节点 A.replaceWith(B)
将A节点替换为B节点 B.replaceAll(A)
克隆节点:
克隆节点 $("selector").clone(true/false)
复制节点,参数为true复制事件,false不复制事件
移除元素的属性
removeAttr("属性名称")
nextAll() 获取点击元素之后的所有同级元素
prevAll()获取点击元素之前的所有同级元素
removeClass("cur")移除class="cur" 这个元素(移除css)
addClass("cur")给该元素添加class="cur"
效果:点击哪个框该框就就带有class="cur" 效果 其他框消失
节点属性操作
attr()
prop() //一般用来操作checkbox是否被选中
removerAttr()
获取或创建节点 和 元素内部追加子节点
<body>
<span>琪琪</span>
<div></div>
<ul>
</ul>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function (){
获取或创建节点
// 工厂函数 $("")
// 通过选择器获取节点: $("selector")
console.log($("span").text());
// 把DOM节点转换为jQuery节点: $("<p>")
let h1 = $("<h1>");
h1.html("<s>琪琪真美</s>")
$("div:eq(0)").append(h1)
// 使用html字符串创建jQuery节点: $("<p>文字</p>")
var h2 = $("<h2><s>琪琪3代</s></h2>");
h2.appendTo($("h1"));
元素内部追加子节点
// 将A节点追加到B节点里 B.append(A)
var li = $("<li>");
li.text("新创建的li")
$("ul").append(li)
// 将A节点追加到B节点里 A.appendTo(B)
var li2 = $("<li>");
li2.text("新创建的li2")
li2.appendTo($("ul"))
// 将A节点追加到B节点最前 B.prepend(A)
var li3 = $("<li>");
li3.html("<s>新创建的琪琪3号</s>");
$("ul").prepend(li3);
// 将A节点追加到B节点最前 A.prependTo(B)
var li4 = $("<li>");
li4.html("<s>新创建的琪琪4号</s>");
$("ul").prepend(li4);
})
</script>
</body>
元素外部插入同辈节点
<body>
<h3>琪琪</h3>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function (){
// 元素外部插入同辈节点
// 将A节点插入到B节点之后 B.after(A)
var h4 = $("<h4>琪琪h4</h4>");
$("h3").after(h4);
// 将A节点插入到B节点之后 A.insertAfter(B)
var h5 = $("<h5>琪琪h5</h5>");
h5.insertAfter($("h4"))
// 将A节点插入到B节点之前 B.before(A)
var h6 = $("<h6>琪琪h6</h6>");
$("h3").before(h6)
// 将A节点插入到B节点之前 A.insertBefore(B)
var h1 = $("<h1><s>琪琪h6</s></h1>");
h1.insertBefore($("h3"))
})
</script>
</body>
节点遍历
遍历子元素
方法 | 解释 |
---|---|
.children() | 获取所有子元素 |
.find() | 获取所有子元素 |
遍历同辈元素
方法 | 解释 |
---|---|
.next() | 自己相邻的下一个兄弟元素 |
.prev() | 自己相邻的上一个兄弟元素 |
.siblings() | 除自己意外的所有同辈元素 |
遍历父级元素
方法 | 解释 |
---|---|
.parent() | 获取父级元素 |
.parents() | 获取所有的父级元素 或者 获取指定的元素 |
.closest() | 获取指定祖先及元素 |
其他遍历方法
方法 | 解释 |
---|---|
each() | 为每个匹配元素规定要运行的函数 |
end() | 结束当前链条中的最近的筛选操作,并将匹配元素还原为之前的状态 |
each()案例
<body>
<section>
<img src="images/ad.jpg" alt="美梦成真系列抽奖"/>
<ul>
<li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
<li><a href="#">苹果iPad mini</a></li>
<li><a href="#">三星GALAXY Ⅲ</a></li>
<li><a href="#">苹果iPhone 5</a></li>
</ul>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function (){
//语法:$(selector).each(function(index,element));
//index:选择器的位置 element:当前的元素
var str="";
$("img").click(function (){
$("ul li").each(function (){
str+=$(this).text()+"<br/>"
})
$("section").append(str)
})
})
</script>
</body>
end()案例
<div class="contain">
<h2>祝福冬奥</h2>
<ul class="gameList">
<li> 贝克汉姆:衷心希望北京能够申办成功!</li>
<li> 姚明:北京申冬奥是个非常棒的机会!加油!</li>
<li> 张虹:北京办冬奥,大家的热情定超乎想象!</li>
<li> 肖恩怀特:我爱北京,支持北京申办冬奥会!</li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
/*
* end(): 结束当前链条中的最近的筛选操作,
* 并将匹配元素还原为之前的状态
* */
$(".contain :header").css("background","yellow");
$("ul li").eq(2).css("background","orange").end().last().css("background","#00e5ff");
})
</script>
</body>