jQuery
1. jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
2. 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
3. jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
4. jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html()
意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法：$(selector).action()
选择器和筛选器
1. 选择器
a.基本选择器 ---$("*") $("#id") $(".class") $("element") $(".class,p,div")b.层级选择器 ---$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")c.基本筛选器 ---$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")d.属性选择器 ---$(‘[id="div1"]‘) $(‘["alex="sb"][id]‘)e.表单选择器 ---$("[type=‘text‘]")----->$(":text") 注意只适用于input标签 : $("input:checked") f.表单属性选择器 ---:enabled :disabled :checked :selected
<body>
<form>
<input type="checkbox" value="123" checked>
<input type="checkbox" value="456" checked>
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3" selected="selected">Trees</option>
<option value="3" selected="selected">Trees</option>
</select>
</form>
<script src="jquery.min.js"></script>
<script>
// console.log($("input:checked").length); // 2
// console.log($("option:selected").length); // 只能默认选中一个,所以只能lenth:1
$("input:checked").each(function(){
console.log($(this).val())
})
</script>
</body>
2.筛选器
1. 过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
2. 查找筛选器
查找子标签： $("div").children(".test") $("div").find(".test")
向下查找兄弟标签： $(".test").next() $(".test").nextAll() $(".test").nextUntil()
向上查找兄弟标签： $("div").prev() $("div").prevAll() $("div").prevUntil()
查找所有兄弟标签： $("div").siblings()
查找父标签： $(".test").parent() $(".test").parents() $(".test").parentUntil()
操作元素
1.事件
a. 页面载入
ready(fn) // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})
b. 事件绑定
//语法: 标签对象.事件(函数)
eg: $("p").click(function(){})
c. 事件委派
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<hr>
<button id="add_li">Add_li</button>
<button id="off">off</button>
<script src="jquery.min.js"></script>
<script>
$("ul li").click(function(){
alert(123)
});
$("#add_li").click(function(){
var $ele=$("<li>");
$ele.text(Math.round(Math.random()*10));
$("ul").append($ele)
});
// $("ul").on("click","li",function(){
// alert(456)
// })
$("#off").click(function(){
$("ul li").off()
})
</script>
2. 属性操作
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("#c1").css({"color":"red","fontSize":"35px"})
3. each循环
jquery支持两种循环方式：
方式一
格式：$.each(obj,fn)
li=[10,20,30,40];
dic={name:"yuan",sex:"male"};
$.each(li,function(i,x){
console.log(i,x)
});
方式二
格式：$("").each(fn)
$("tr").each(function(){
console.log($(this).html())
})
其中,$(this)代指当前循环标签。
4. 文档节点处理
//创建一个标签对象
$("<p>")
//内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
//删除
$("").empty()
$("").remove([expr])
//复制
$("").clone([Even[,deepEven]])
5. 动画效果
a. 显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$("#hide").click(function () {
$("p").hide(1000);
});
$("#show").click(function () {
$("p").show(1000);
});
//用于切换被选元素的 hide() 与 show() 方法。
$("#toggle").click(function () {
$("p").toggle();
});
})
</script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">切换</button>
</body>
</html>
b. 滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#slideDown").click(function(){
$("#content").slideDown(1000);
});
$("#slideUp").click(function(){
$("#content").slideUp(1000);
});
$("#slideToggle").click(function(){
$("#content").slideToggle(1000);
})
});
</script>
<style>
#content{
text-align: center;
background-color: lightblue;
border:solid 1px red;
display: none;
padding: 50px;
}
</style>
</head>
<body>
<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">toggle</div>
<div id="content">helloworld</div>
</body>
</html>
c. 淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#in").click(function(){
$("#id1").fadeIn(1000);
});
$("#out").click(function(){
$("#id1").fadeOut(1000);
});
$("#toggle").click(function(){
$("#id1").fadeToggle(1000);
});
$("#fadeto").click(function(){
$("#id1").fadeTo(1000,0.4);
});
});
</script>
</head>
<body>
<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadetoggle</button>
<button id="fadeto">fadeto</button>
<div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
</body>
</html>
d. 回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
</head>
<body>
<button>hide</button>
<p>helloworld helloworld helloworld</p>
<script>
$("button").click(function(){
$("p").hide(1000,function(){
alert($(this).html())
})
})
</script>
</body>
</html>
e. 拖动面板
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;color: white;">
标题
</div>
<div style="height: 300px;">
内容
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function(){
// 页面加载完成之后自动执行
$(‘#title‘).mouseover(function(){
$(this).css(‘cursor‘,‘move‘);
}).mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
// 原始鼠标横纵坐标位置
var ord_x = _event.clientX;
var ord_y = _event.clientY;
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$(this).on(‘mousemove‘, function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y);
$(this).parent().css(‘left‘,x+‘px‘);
$(this).parent().css(‘top‘,y+‘px‘);
})
}).mouseup(function(){
$(this).off(‘mousemove‘);
});
})
</script>
</body>
</html>
f. 轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.1.1.js"></script>
<title>Title</title>
<style>
.outer{
width: 790px;
height: 340px;
margin: 80px auto;
position: relative;
}
.img li{
position: absolute;
list-style: none;
top: 0;
left: 0;
display: none;
}
.num{
position: absolute;
bottom: 18px;
left: 270px;
list-style: none;
}
.num li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-left: 4px;
}
.btn{
position: absolute;
top:50%;
width: 30px;
height: 60px;
background-color: lightgrey;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.7;
margin-top: -30px;
display: none;
}
.left{
left: 0;
}
.right{
right: 0;
}
.outer:hover .btn{
display: block;
}
.num .active{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li style="display: block"><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
<li><a href=""><img src="img/6.jpg" alt=""></a></li>
</ul>
<ul class="num">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
var i=0;
// 通过jquery自动创建按钮标签
var img_num=$(".img li").length;
for(var j=0;j<img_num;j++){
$(".num").append("<li></li>")
}
$(".num li").eq(0).addClass("active");
// 手动轮播
$(".num li").mouseover(function () {
i=$(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)
});
// 自动轮播
var c=setInterval(GO_R,1500);
function GO_R() {
if(i==img_num-1){
i=-1
}
i++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
}
function GO_L() {
if(i==0){
i=img_num
}
i--;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); // fadeIn,fadeOut单独另开启的线程
}
$(".outer").hover(function () {
clearInterval(c)
},function () {
c=setInterval(GO_R,1500)
});
// button 加定播
$(".right").click(GO_R);
$(".left").click(GO_L)
</script>
</body>
</html>
操作元素
时间： 2024-08-07 03:56:41