1、什么是jquery
jquery是一个javascript的框架，框架又叫引擎， 简单来说就是吧原来javascirpt的很多功能进行封装，原来需要100行才搞定的事情，利用框架就一行代码搞定。本质就是里面封装了很多方法，我们可以直接调用
1、导入jquery
<script type="text/javascript" src="<%=path%>js/jquery-1.12.2.js"></script>
<script type="text/javascript" src="<%=path%>js/register.js"></script>和我们导入外部的js文件一样，直接引用即可。
jquery入门 $ == Jquery
function getInfo() {
var input1 = document.getElementById("account");
alert(input1.value);
//$ == jQuery
var input2 = jQuery("#account");
alert(input2.val());
var input3 = $("#account");
alert(input3.val());
input1.value = "zhangsan";
input3.val("lisi");
}jquery选择器： 就是通过jquery获取我们html元素的一个操作，
标签、标签选择器：
根据标签的名字去获取我们的元素对象
function getInfo2() {
var data = $("input");
alert(data[0].value);
}
ID选择器
function getInfo3() {
var data = $("#pwd");
alert(data);
alert(data[0]);
alert(data.val());
}此处我们发现data 是一个object对象， data[0] 是一个html input的对象。
jquery对象，html对象 相互转换
我们吧jquery对象转成htmlDom对象 就是利用下标访问一下元素
吧htmlDom对象转换成Jquery对象
function getInfo3() {
var data = $("#pwd");
alert(data.val());
alert(data[0]);
var data2 = document.getElementById("pwd");
alert($(data2));
}jquery 对ajax的封装。
在jquery中对ajax的get和post方法进行了重新划分：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath() + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="<%=path%>js/jquery-1.12.2.js"></script>
<script type="text/javascript" src="<%=path%>js/register.js"></script>
<script type="text/javascript">
$(document).ready( function () {
alert("1111");
}); // 等价于 onload
function checkName() {
$.get("<%=path%>servlet/CheckAccount?account=123",
function(data,status){
alert("数据: " + data );
});
$.post(
"<%=path%>servlet/CheckAccount",
{
account:"zhangsan",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
}
);
}
</script>
</head>
<body>
<H1 class="c1">jquery</H1>
账号：<input type="text" id="account" name="account" onblur="checkName()"/>
</body>
</html>jquery事件绑定：
对于我们html的元素来说，提供了很多元素的操作事件，常用的有
单击事件：onclick
html原始事件添加方式：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath() + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="<%=path%>js/jquery-1.12.2.js"></script>
<script type="text/javascript" src="<%=path%>js/register.js"></script>
<script type="text/javascript">
function showInfo() {
alert();
}
</script>
</head>
<body>
<H1 class="c1">jquery</H1>
<button onclick="showInfo()">按钮</button>
</body>
</html>jquery添加单击事件的方式：
jquery提供了动态绑定方法的操作，一般在页面加载的时候执行该代码，页面加载使用 $(document).ready();方法
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath() + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="<%=path%>js/jquery-1.12.2.js"></script>
<script type="text/javascript" src="<%=path%>js/register.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showInfo").click(function () {
alert();
});
});
</script>
</head>
<body>
<H1 class="c1">jquery</H1>
<button id="showInfo">按钮</button>
</body>
</html>对于jquery来说， 我们获取到的html元素会被转换成一个Jquery对象。该对象除了有原来的一些常规的方法，还有部分是对css的封装形成了方法，
hide（）、show()
//show绑定单击事件
$("#show").click(function () {
$("#logo").show();
});
//hide绑定单击事件
$("#hide").click(function () {
$("#logo").hide();
});还有一个常用的方式是CSS方法
$("#toggle").click(function () {
$("#logo").toggle(1000);
var img = $(this);
if(num == 1) {
img.text("显示");
num = 0;
}else {
img.text("隐藏");
num = 1;
}
img.css("color","red");
img.css("font-size","18px");
});jquery操作html元素：
核心方法是val()/ text() / html()
val ：值针对input元素操作，拿到的是元素的value属性的值
text：拿到的该标签包含的文本内容，不包含html元素
html：拿到的是该标签里面所有内容。包含html标签的字符串形式
$("#test").click(function () {
alert($("#infoDiv").val());
alert($("#infoDiv").text());
alert($("#infoDiv").html());
alert($("#account").val());
//$("#infoDiv").text("<span>abc</span>");
//$("#infoDiv").html("<span>abc</span>");
//$("#account").val("张三");
});元素操作方法： append、before、after
之间、之前、之后添加元素标签
使用jquery实现全选，和取消全选
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath() + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="<%=path%>js/jquery-1.12.2.js"></script>
<script type="text/javascript" src="<%=path%>js/register.js"></script>
<script type="text/javascript">
function quanxuan() {
$("input[name='info']").each(function (i) {
$(this).prop("checked","checked");
//this.checked = true;
});
}
function quxiao() {
$("input").each(function (i) {
$(this).removeAttr("checked");
//this.checked = false;
});
}
</script>
</head>
<body>
<table border="1">
<tr>
<td><input name="info" type="checkbox" checked="checked"/></td>
<td>张三</td>
</tr>
<tr>
<td><input name="info" type="checkbox"/></td>
<td>张三</td>
</tr>
<tr>
<td><input name="info" type="checkbox"/></td>
<td>张三</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>张三</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>张三</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>张三</td>
</tr>
<tr>
<td><input type="radio"/></td>
<td>男</td>
</tr>
</table>
<a href="javascript:void(0)" onclick="quanxuan()">全选</a>
<a href="javascript:void(0)" onclick="quxiao()">取消全选</a>
</body>
</html>其实jqeruy就是封装了各种方法给我们调用，里面有一部分方法是必须掌握的，有一部分使用的不多，但是还是用到，所以需要大家会查询API
扫一扫
1379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
