JAVASCRIPT类库,简称js,作用是为了简化javascript的开发,他预定义了很多对象(属性和方法)和函数,特点是兼容了个大浏览器!
JQUERY其实就是一个js文件,分类: jQuery - Web版本(最主要); jQuery UI(User Interface) - 集成UI内容; jQuery Mobile - 移动版本(WebApp);QUnit - 用于测试。
版本 : 1.4.2版本 - 企业开发使用 ; 1.8.3版本 - 企业使用最新 ; 1.11.3版本 - 目前jQuery最新 ;2.x.x版本 - 不再支持IE浏览器(8以前)。
特点: HTML代码(结构) - 标签;HTML内容 - 浏览器运行页面后显示的。
如何使用jQuery:1.在HTML页面中引入jQuery文件2.使用jQuery的选择器定位(获取)页面元素3.利用jQuery的API方法完成需求
基本内容:$(selector) - jQuery的工厂函数--- 该函数返回jQuery对象,jQuery的约定 - jQuery对象前增加"$"符号。
DOM对象与jQuery对象:
DOM对象 - 通过DOM获取的元素,称之为DOM对象;jQuery对象 - 通过jQuery包装DOM后产生的对象, jQuery对象的底层还是DOM对象。
DOM对象与jQuery对象的转换:
1.DOM对象转换为jQuery对象:$(DOM对象).
2. jQuery对象转换为DOM对象:1.jQuery对象是数组对象 - 角标2. jQuery对象提供get(index)方法.
注意 - DOM对象与jQuery对象之间不能相互调用.
jQuery事件: jQuery将DOM的事件封装成对应的方法.
选择器 - 是jQuery的根基
1.基本选择器
2.层级选择器
3.过滤选择器 - 在选择器前,具有":"符号
4. 基本过滤选择器
5. 子元素过滤选择器
6. 内容过滤选择器
7. 可见性过滤选择器
8. 属性过滤选择器
9. 表单对象属性过滤选择器
10. 表单选择器
下面就是几个例子的展示:
(备注:上述案列运行前,请先下载jquery文件,或者可以去jquery官网下载!)
基本选择器:
</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<title>基本选择器</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
<style>
div {
width : 150px;
height : 150px;
border : solid 1px black;
background : pink;
float : left;
margin-right : 10px;
}
.mini {
width : 100px;
height : 100px;
border : solid 1px black;
background : blue;
float : left;
margin-right : 10px;
}
</style>
</head>
<body>
<button id="btn1">id选择器</button>
<button id="btn2">元素选择器</button>
<button id="btn3">class选择器</button>
<button id="btn4">*选择器</button>
<button id="btn5">复合选择器</button>
<br><br>
<div id="d1">这是id为d1的div元素.</div>
<div class="mini"></div>
<div></div>
<div></div>
<div></div>
<script>
// 1 获取btn1按钮,绑定onclick事件
$("#btn1").click(function(event){
/*
* 改变背景颜色
* * 操作CSS的background-color的属性
* * jQuery操作CSS
* * css(name,value)方法
* * name - CSS的属性名称
* * value - CSS的属性值
*/
$("#d1").css("background","red");
});
// 2 元素选择器
$("#btn2").click(function(){
/*
* JS定义的数组
* * 遍历数组,获取每一个元素
* * 遍历的过程中,改变每一个元素
* jQuery数组对象
* * 批处理
*/
$("div").css("background","red");
/*
var $divs = $("div");
// 遍历数组
for(var i=0;i<$divs.length;i++){
// 获取每一个元素
var div = $divs[i];
div.className;
}*/
});
$("#btn3").click(function(){
$(".mini").css("background","red");
});
$("#btn4").click(function(){
$("*").css("background","red");
});
$("#btn5").click(function(){
// 多个选择器并列使用,中间使用","分隔
$("#d1,.mini").css("background","red");
});
</script>
</body>
</html>
基本过滤选择器:
<!DOCTYPE html>
<html>
<head>
<title>基本过滤选择器</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
<style>
div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}
.mini {width : 50px;height : 50px;border : solid 1px black;background : yellow;float : left;margin-right : 10px;}
</style>
</head>
<body>
<h3>基本过滤选择器</h3>
<h1>基本过滤选择器</h1>
<button id="btn1">:first</button>
<button id="btn2">:last</button>
<button id="btn3">:even</button>
<button id="btn4">:odd</button>
<button id="btn5">:gt</button>
<button id="btn6">:lt</button>
<button id="btn7">:eq</button>
<button id="btn8">:not</button>
<button id="btn9">:header</button>
<button id="btn10">:animated</button>
<br><br>
<div id="d1"></div>
<div id="one"></div>
<div class="mini"></div>
<div></div>
<div></div>
<script>
$("#btn1").click(function(){
$("div:first").css("background","green");
});
$("#btn2").click(function(){
$("div:last").css("background","green");
});
$("#btn3").click(function(){
$("div:even").css("background","green");
});
$("#btn4").click(function(){
$("div:odd").css("background","green");
});
$("#btn5").click(function(){
$("div:gt(1)").css("background","green");
});
$("#btn6").click(function(){
$("div:lt(1)").css("background","green");
});
$("#btn7").click(function(){
$("div:eq(1)").css("background","green");
});
$("#btn8").click(function(){
$("div:not('.mini')").css("background","green");
});
$("#btn9").click(function(){
$(":header").css("background","green");
});
// 让第一个div上下滑动
function move(){
$("#d1").slideToggle(500,function(){
move();
});
}
move();
$("#btn10").click(function(){
$(":animated").css("background","green");
});
</script>
</body>
</html>
子元素过滤选择器:
<!DOCTYPE html>
<html>
<head>
<title>子元素过滤选择器</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
<style>
div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}
.mini {width : 50px;height : 50px;border : solid 1px black;background : yellow;float : left;margin-right : 10px;}
</style>
</head>
<body>
<button id="btn1">:nth-child</button>
<button id="btn2">:first-child</button>
<button id="btn3">:last-child</button>
<button id="btn4">:only-child</button>
<br><br>
<div>
<div class="mini"></div>
</div>
<div>
<div class="mini"></div>
<div class="mini"></div>
</div>
<div>
<div class="mini"></div>
<div class="mini"></div>
</div>
<div></div>
<div></div>
<script>
// 1. 获取div元素的子元素是第二个
$("#btn1").click(function(){
// :nth-child选择器 是从1开始
$("div:nth-child(2)").css("background","red");
});
// 2. 获取div元素的第一个子元素
$("#btn2").click(function(){
$("div:first-child").css("background","red");
});
// 3. 获取div元素的最后一个子元素
$("#btn3").click(function(){
$("div:last-child").css("background","red");
});
// 4. 如果哪个div元素只有一个子元素,那么选中
$("#btn4").click(function(){
$("div:only-child").css("background","red");
});
// 子元素过滤选择器 - 层级+基本过滤选择器
</script>
</body>
</html>
内容过滤选择器:
<!DOCTYPE html>
<html>
<head>
<title>内容过滤选择器</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
<style>
div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}
.mini {width : 50px;height : 50px;border : solid 1px black;background : yellow;float : left;margin-right : 10px;}
</style>
</head>
<body>
<button id="btn1">:contains</button>
<button id="btn2">:empty</button>
<button id="btn3">:parent</button>
<button id="btn4">:has</button>
<br><br>
<div>这是第一个div元素.class为div111</div>
<div>这是第二个div元素.class为div11
<div class="mini"></div>
</div>
<div>这是第三个div元素.class为div
<div class="mini"></div>
</div>
<div>这是第四个div元素.class为div1</div>
<div></div>
<script>
$("#btn1").click(function(){
// 文本包含"div11"的div元素
$("div:contains('div11')").css("background","green");
});
$("#btn2").click(function(){
// 不包含任何文本内容或子元素的div元素
$("div:empty").css("background","green");
});
$("#btn3").click(function(){
// 包含任何文本内容或子元素的div元素
$("div:parent").css("background","green");
});
$("#btn4").click(function(){
// 包含class为mini的div元素的父div元素
$("div:has('.mini')").css("background","green");
});
</script>
</body>
</html>
可见性过滤选择器:
<!DOCTYPE html>
<html>
<head>
<title>可见性过滤选择器</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
<style>
div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}
.one {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;display : none;}
</style>
</head>
<body>
<button id="btn1">可见</button>
<button id="btn2">不可见</button>
<br><br>
<div></div>
<div></div>
<div class="one"></div>
<div></div>
<div></div>
<script>
$("#btn1").click(function(){
$("div:visible").css("background","green");
});
$("#btn2").click(function(){
$("div:hidden").show(3000).css("background","green");
});
</script>
</body>
</html>
属性过滤选择器:
<!DOCTYPE html>
<html>
<head>
<title>属性过滤选择器</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
<style>
div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}
</style>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
<button id="btn5">按钮5</button>
<button id="btn6">按钮6</button>
<button id="btn7">按钮7</button>
<br><br>
<div id="div1" name="div1" title="text1"></div>
<div id="div11" name="div2" title="text11"></div>
<div name="div3" title="text1"></div>
<div id="div13" name="div4"></div>
<div id="div14" name="div5"></div>
<script>
$("#btn1").click(function(){
// 包含属性title的div元素
$("div[title]").css("background","green");
});
$("#btn2").click(function(){
// 包含属性title=text1的div元素
$("div[title=text1]").css("background","green");
});
$("#btn3").click(function(){
// 包含属性title!=text1的div元素(包含没有该属性的div元素)
$("div[title!=text1]").css("background","green");
});
$("#btn4").click(function(){
// 包含属性title值是以text开始的div元素
$("div[title^=text]").css("background","green");
});
$("#btn5").click(function(){
// 包含属性title值是以t1结束的div元素
$("div[title$=t1]").css("background","green");
});
$("#btn6").click(function(){
// 包含属性title值包含t1的div元素
$("div[title*=t1]").css("background","green");
});
$("#btn7").click(function(){
// 包含属性title值是以t1结束的,包含id属性的div元素
// 多个属性过滤选择器并列使用
$("div[title$=t1][id]").css("background","green");
});
</script>
</body>
</html>
表单对象属性过滤选择器:
<!DOCTYPE html>
<html>
<head>
<title>表单对象属性过滤选择器</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
<style>
div {width : 150px;height : 150px;border : solid 1px black;background : blue;float : left;margin-right : 10px;}
</style>
</head>
<body>
<button id="btn1">:enabled</button>
<button id="btn2">:disabled</button>
<button id="btn3">:checked</button>
<button id="btn4">:selected</button>
<br><br>
<input type="text" value="这是可用元素"><br>
<input type="text" disabled="disabled" value="这是不可用元素"><br><br>
<input type="radio" name="love" checked="checked" value="html">HTML
<input type="radio" name="love" value="css">CSS
<input type="radio" name="love" value="javascript">JAVASCRIPT
<br><br>
<select id="city">
<option value="">-请选择-</option>
<option value="bj" selected="selected">-北京-</option>
<option value="tj">-天津-</option>
<option value="sh">-上海-</option>
<option value="nj">-南京-</option>
<option value="cq">-重庆-</option>
</select>
<script>
// 1. 改变页面中可用元素的value属性值
$("#btn1").click(function(){
/*
* val()方法 - 获取|设置指定元素的value属性值
* * 获取 - val()
* * 设置 - val(value)
*/
$("input:enabled").val("xxx");
});
// 2. 改变页面中不可用元素的value属性值
$("#btn2").click(function(){
$("input:disabled").val("yyy");
});
// 3. 打印被选中的单选框的value属性值
$("#btn3").click(function(){
console.log($("input[name=love]:checked").val());
// DOM
var loves = document.getElementsByName("love");
for(var i=0;i<loves.length;i++){
var love = loves[i];
if(love.checked){
console.log(love.value);
}
}
});
// 4. 获取下拉列表被选中的选项的value属性值
$("#btn4").click(function(){
console.log($("#city>option:selected").val());
// DOM
// 1. 获取select标签
// 2. 根据select获取所有option标签
// 3. 遍历所有option标签
// 4. 判断哪个被选中
// 5. 输出结果
});
</script>
</body>
</html>
本人第一次发微博,如果各位大神读完后,有任何建议,望积极提出,给小弟一些参考。