一 jquery简介
1 jquery是什么
- jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
- jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
- 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
- jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
- jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
2 什么是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 对象
$(selector).action() //基本语法:
二 寻找元素(重要的选择器和筛选器)
2.1 选择器
2.1.1 基本选择器
$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")
2.1.2层级选择器
$(".outer div") //后代
$(".outer>div") //子代
$(".outer+div") //毗邻
$(".outer~div") //向下找兄弟 找弟弟
2.1.3 基本筛选器
$("li:first") //第一个
$("li:last") //最后一个
$("li:eq(0)")//下标查找
$("li:lt(2)")//小于下标的
$("li:gt(1)")//大于下标的
2.1.4 属性选择器(重要)
$('[id]') //有id属性的的
$('[id="div1"]') //id等于div1的
$('["alex="sb"][id]')
2.1.5 表单选择器
$("[type='text']")
$(":text") //注意只适用于input标签
$("input:checked")
2.2 筛选器
2.2.1 过滤筛选器
$("li").eq(2) //好处免于字符串拼接
$("li").first()
$("ul li").hasclass("test")//察看
2.2.2 查找筛选器
$("div").children()//所有的儿子,自己的不变
$("div").children(".test")//
$("div").find(".test") //所有的为test的后代,自己的不变
$(".test").next() //找下一个弟弟
$(".test").nextAll()//找所有的弟弟
$(".test").nextUntil('div6')//找区间里的弟弟 不包含div6
$("div").prev() //找一个哥哥
$("div").prevAll()//找所有的哥哥
$("div").prevUntil('div6')//找区间里的哥哥 不阿包含div6
$(".test").parent()//找父节点
$(".test").parents()//找到所有的祖先节点们
$(".test").parentUntil('div1') //找到知道div1一下的祖先
$("div").siblings()//找兄弟 上下都找 不包括自己
实例 左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left_menu</title>
<script src="js/jquery-2.2.3.js"></script>
<script>
function show(self){
// console.log($(self).text())
$(self).next().removeClass("hide")
$(self).parent().siblings().children(".con").addClass("hide")
}
</script>
<style>
.menu{
height: 500px;
width: 30%;
background-color: gainsboro;
float: left;
}
.content{
height: 500px;
width: 70%;
background-color: rebeccapurple;
float: left;
}
.title{
line-height: 50px;
background-color: #425a66;
color: forestgreen;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this);">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this);">菜单二</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this);">菜单三</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
</body>
</html>
实例 tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<script src="js/jquery-2.2.3.js"></script>
<script>
function tab(self){
var index=$(self).attr("xxx");
$("#"+index).removeClass("hide").siblings().addClass("hide");
$(self).addClass("current").siblings().removeClass("current");
}
</script>
<style>
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
/*border: 1px solid red;*/
line-height: 40px;
}
.menu li{
display: inline-block;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: darkgray;
color: yellow;
border-top: solid 2px rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
<li xxx="c2" onclick="tab(this);">菜单二</li>
<li xxx="c3" onclick="tab(this);">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
</body>
</html>