JQuery的概述
-
JQuery
- jQuery是一款快速的，简洁的JS框架（JS代码库），是继Prototype之后一款优秀的JS框架，
- jQuery的设计宗旨是"write less,do more"，写的更少，而做的更多，
- jQuery封装了JS的常用功能。
-
JQuery可以更好的完成如下的操作
- 简化优化了对dom的操作
- 简化优化了ajax的实现
- 提供了丰富的事件处理
- 提供了简单的动画效果
- 提供了非常丰富的插件机制，市场上有非常多的jQuery的插件，比如表单校验插件，日期插件，树形结构的插件
-
JQuery的官网
-
JQuery的常用版本
- 1.x; 1.8.3 支撑老版本IE浏览器
- 2.x;
- 3.x;
JQuery 查询的意思 更加方便的查询和控制页面的控件
1.1.1 上面说到的框架与库的区别
库的英文是Library (lib),框架英文 Framework
库是将代码集合成一个产品,供程序员去调用
-
面向对象的代码组成形成的库是类库,面向过程代码组成的库叫做函数库,在函数库中可以直接使用函数叫做库函数
- 特点:灵活,需要就调用,不需要的地方自己实现
-
框架是为解决一类问题而开发的产品
- 框架的用户一般只需要使用框架提供的类和函数,就可以实现全部功能
- 特点:一条龙服务,使用框架的时候,必须要使用框架的全部代码,即使用不到你也不能挑三拣四,必须按照规则来,不灵活
jQuery定位 官方说框架(重量级),java看来,他其实就是一个js代码库(轻量级)
jquery提高你的工作效率,并不是提高代码的运行效率
-
JQuery的语法特点
- 快速获取文档的元素
- 提供漂亮页面动态效果
- 创建AJAX异步加载网页
- 提供js语法的增强--元素遍历 数组处理
- 增强了事件处理--消除了浏览器兼容问题
- 更改网页的内容 --文本,插入或者翻转网页的图像
1.2 jQuery入门案例
是在页面加载完成之后执行指定的事件即onload事件
- 第一种方式
<body onload="alert('页面加载完成了!');" >
</body>
- 第二种方式
<script type="text/javascript">
window.onload = function() {
alert("页面加载完成了！1");
}
</script>
- 第三种方式
<script type="text/javascript">
$(function(){
alert("页面加载完成了！jQuery!");
});
</script>
-
使用步骤
- 导包 在项目放入jq的jar包
- 页面中引用
- <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
- 调用jQuery方法 $(匿名函数);
-
jQuery所有的操作基本上以$开头--说明这段代码其实使用的是jQuery的方法
- $(匿名函数);可以在页面加载完成之后执行这段匿名函数,替代window.onload事件
-
JQ与直接BOM的区别
- jQuery可以把我们的代码合并执行
- window.onload 多次编写会被后面的方法覆盖
1.3 jQuery对象与dom对象的转换
- jQuery对象可以调用jQuery的方法，jQuery对象不可以调用dom的方法，
- dom对象可以调用dom的方法，dom对象不可以调用jQuery的方法，
- jQuery对象和dom对象都只能调用自己的方法，都只能访问自己的属性。
为了方便使用所以jQuery对象与dom对象之间需要互相转换。
- 方法其实是有归属感 j-Query方法归属于jQuery对象,dom方法归属于dom对象
- dom对象->jquery对象 $(dom对象)
//获取div标签的dom对象
var domDiv01 = document.getElementById("div01");
alert(domDiv01.innerHTML);
alert($(domDiv01).html());//将dom对象转换成jQuery对象
- jQuery对象->dom对象 jQuery对象[0] 或者 jQuery对象.get(0)
//获取div标签的jQuery对象
var jQueryDiv01 = $("#div01");
alert(jQueryDiv01.html());
alert(jQueryDiv01.get(0).innerHTML);//将jQuery对象转换成dom对象
1.3.1 核心方法
- $();核心方法 -- 方法名是jQuery-- 为了方便简写成$
- 方法可以传很多类型的参数(类似于java中的重载)
- $(function(){}) 页面加载完成之后执行匿名函数中的代码
- $("#div01") 使用选择器直接获得jQuery页面中元素对象
- $(dom对象) 将Dom对象转化成jQuery对象
- 将一个html对象转化成jQuery对象
1.4 JQuery的常用选择器
1.4.1我们比较熟悉的选择器
- 先写一个网页先
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的常用选择器</title>
<style type="text/css">
div {
height: 100px;
width: 300px;
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
</script>
</head>
<body>
<div id="div01">小熊先生的个人主页</div>
<br />
<div class="div02">小熊的手札</div>
<br />
<div>小熊的火锅</div>
<br />
<div name="div04">小熊的烤肉</div>
<br />
<a name="div04">小熊的皮皮虾</a>
</body>
</html>
JQ的选择与JS非常的类似就是语法有些不同
- id选择器
var div01 = $("#div01");
alert(div01.html());
- 类选择器
var classList = $(".div02");
- 元素选择器
var divList = $("div");
alert(divList.size());
- 组合选择器
var elementList = $("div,a");
alert(elementList.size());
- 属性选择器
var nameList = $("[name=div04]");
alert(nameList.size());
- 标签属性选择器
var aNameList = $("a[name=div04]");
alert(aNameList.html());
- 注意:
- 只有id选择器返回的jQuery对象,因为id一般是唯一的,其他返回的都是集合
- [name=div04]不是赋值,而是比较运算符
- 如果通过选择器返回的集合只有一个元素,直接调用方法,操作属性就可以
1.4.1一些比较特殊的选择器
- 我们依旧先编写一个网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的常用选择器</title>
<style type="text/css">
div {
height: 100px;
width: 300px;
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
});
</script>
</head>
<body>
<div style="display: none;">小火龙</div>
<br />
<br />
<div>杰尼龟</div>
<br />
<br />
<div>皮卡丘</div>
<br />
<br />
<input type="checkbox" name="hobbies" value="xiaozhi" checked="checked"/>
<input type="checkbox" name="hobbies" value="xiaoxia" checked="checked" />
<input type="checkbox" name="hobbies" value="tom" />
<input type="checkbox" name="hobbies" value="xiaogang" />
<br />
<br />
</body>
</html>
- 获取不可见标签 : hidden
var hiddenList = $("div:hidden");
- 获取可见标签 : visible
var visibleList = $("div:visible");
- 获取选中的复选框或者单选按钮 input : checked
var checkedList = $("input:checked");
- 说明：其实JQ的选择器还有很多，具体可以看看手册会会用了有例子很简单的。
- 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的常用选择器</title>
<style type="text/css">
div {
height: 100px;
width: 300px;
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
//获取隐藏域标签
/* var list = $("input:hidden");
alert(list.size());
alert(list[0].value);*/
//获取单选按钮选中标签方式一
/*var list = $("input[type=radio]:checked");
alert(list.size());
alert(list[0].value);
*/
//获取单选按钮选中标签方式二
/*var list = $(".radio:checked");
alert(list.size());
alert(list[0].value);*/
//获取选中的下拉框
var list = $("select option:checked");
alert(list.size());
alert(list[0].value);
});
</script>
</head>
<body>
<div style="display: none;">小熊先生</div>
<br />
<div>小熊先生不开心</div>
<br />
<div>小熊先生很委屈</div>
<br />
<input type="checkbox" name="hobbies" value="java" checked="checked"/>
<input type="checkbox" name="hobbies" value="android" checked="checked" />
<input type="checkbox" name="hobbies" value="php" />
<input type="checkbox" name="hobbies" value="python" />
<br />
<input type="hidden" name="option" value="add" />
<input type="radio" class="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" class="radio" name="sex" value="女" />女
<br />
<select id="province">
<option>--选择省--</option>
<option value="henan" selected="selected">河南省</option>
<option value="niaoling">辽宁省</option>
<optionvalue="shangdong">山东省</option>
</select>
<br />
</body>
</html>
