1.JQuery简介
jQuery 是一个 JavaScript 函数库；
功能强悍；
jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器；
2.Jquery 的引入
1）使用传统的js方法来获取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</script>
<script type="text/javascript">
function getContent(){
var content=document.getElementById("content").value;
alert(content);
}
</script>
</head>
<body>
<input type="text" id="content">
<input type="button" value="点我获取内容" onclick="getContent()">
</body>
</html>2）使用传统的jQuery方法来获取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
<script type="text/javascript">
function getContent(){
//var content=document.getElementById("content").value;
var content=$("#content").val();
alert(content+"我是jQuery方法");
}
</script>
</head>
<body>
<input type="text" id="content">
<input type="button" value="点我获取内容" onclick="getContent()">
</body>
</html>3）使用注册的方式使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//需要在初始化的时候调用
function init(){
//在点击按钮的时候调用
document.getElementById("buttonaction").onclick=function(){
var content=document.getElementById("content").value;
alert(content);
}
}
</script>
</head>
<body onload="init()">
<input type="text" id="content">
<input type="button" value="点我获取内容" id="buttonaction">
</body>
</html>4）使用JQuery的方式在文档加载的时候使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
<script type="text/javascript">
//在文档加载的完毕调用方法
$(document).ready(function(){
$("#buttonaction").click(function(){
alert($("#content").val()+"采用jquery的文档加载的方式");
});
});
</script>
</head>
<body onload="init()">
<input type="text" id="content">
<input type="button" value="点我获取内容" id="buttonaction">
</body>
</html>3.Jquery 选择器
我们可以通过 Jquery 选择器能从网页文档中找到我们需要的 DOM 节点；
Jquery 选择器基本的有3种：基本选择器、属性选择器、其他选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 基本选择器
// $("#a1").css("background-color","red"); // 根据id
// $(".c1").css("background-color","red"); // 根据class类别
// $("a").css("background-color","red"); // 根据标签元素
// 属性选择器
// $("[href]").css("background-color","red"); //属性是href的
// $("[href='#']").css("background-color","red"); //属性 href="#"
// $("[href$='com']").css("background-color","red"); //属性是以 .com结尾的
// 其他选择器
// $("p.c1").css("background-color","red"); //表示p下面的class是c1的
// $("ul li:first").css("background-color","red"); //表示ul下面的第一个 li
$("ul li:last").css("background-color","red"); //表示ul下面的最后一个 li
});
</script>
<style type="text/css">
.c1{
font-size: 40px;
}
</style>
</head>
<body >
<p class="c1">Jquery选择器</p>
<ul>
<li id="i1"><a id="a1" class="c1" href="http://www.java1234.com" >Java知识分享网</a></li>
<li><a id="a2" class="c1" href="http://www.youkuaiyun.com">优快云</a></li>
<li><a href="http://www.iteye.com">iteye</a></li>
<li><a href="http://www.cnblogs.com">博客园</a></li>
<li><a class="c1" href="#">百度</a></li>
<li><a href="http://www.google.com">谷歌</a></li>
</ul>
</body>
</html>4.Jquery 操作DOM
话不多说，看例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 第一部分：操作DOM节点
// 1，查找节点
/* var li2=$("ul li:eq(1)");
var li2_txt=li2.text();
alert(li2_txt); //比尔盖茨
*/
// 2，创建节点
/* var li1=$("<li title='这是马化腾'>马化腾</li>");
var li2=$("<li title='这是李彦宏'>李彦宏</li>");
var li22=$("ul li:eq(1)");
$("ul").append(li1); //在尾部添加
li2.insertAfter(li22); //先得到li22 然后再把新建的节点添加进去
*/
// 3，删除节点
// $("ul li:eq(1)").remove();
// 第二部分：操作DOM属性
// 1.获取属性
/* var li2=$("ul li:eq(1)"); //得到第二行
var li2_attr=li2.attr("title"); //得到他的title属性的值
alert(li2_attr); */
// 2.设置属性
// $("ul li:eq(1)").attr("title","你懂的");
// 3.删除属性
// $("ul li:eq(1)").removeAttr("title");
// 第三部分：操作DOM节点样式
// 1.获取样式class
/* var li2=$("ul li:eq(1)");
var li2_class=li2.attr("class");
alert(li2_class); */
// 2.设置样式
// $("ul li:eq(1)").attr("class","lc2");
// 3.追加样式
// $("ul li:eq(1)").addClass("lc3");
// 4.移除样式
// $("ul li:eq(1)").removeClass("lc");
// 第四部分：设置和获取HTML，文本和值
// 1.获取html
/* var l1_html=$("ul li:eq(0)").html();
alert(l1_html); */
// 设置html
// $("ul li:eq(0)").html("<font color=red>哈哈</font>");
// 2.获取文本
/* var l1_text=$("ul li:eq(0)").text();
alert(l1_text); */
// 设置文本
// $("ul li:eq(0)").text("呵呵");
//3.获取值
function getUserName(){
var userName=$("#userName").val();
alert(userName);
}
// 设置值
function setUserName(){
$("#userName").val("我是设置的值");
}
// 第五部分： 遍历节点
// 1.children()
/* var b=$("body").children();
alert(b.length);
var u=$("ul").children();
alert(u.length);
for(var i=0;i<u.length;i++){
// alert(u[i].innerHTML); 这种方法是原生的方法，所以不能用jquery中的html去获取
alert($(u[i]).html()); //此时就变成了jquery的 方法
} */
//2. next()
/* var l=$("ul li:eq(1)").next();//第二个节点的后一个节点
alert(l.html()); //后一个节点的文本
*/
// 3.prev()
/* var l=$("ul li:eq(1)").prev();
alert(l.html()); */
// 第六部分： CSS-DOM操作
// 1.获取css样式中的值
/* var c=$("#jq").css("color");
alert(c); //red
*/
// 2.设置css样式
$("#jq").css("color","blue");
});
</script>
</head>
<style type="text/css">
.lc{
background-color: red;
}
.lc2{
background-color: blue;
}
.lc3{
font-weight: bold;
}
</style>
<body >
<p>你最喜欢的名人是？</p>
<ul>
<li title="这是乔布斯"><font color="green">乔布斯</font></li>
<li title="这是比尔盖茨" class="lc">比尔盖茨</li>
<li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
</ul>
<input type="text" id="userName"/>
<input type="button" value="获取数据" onclick="getUserName()"/>
<input type="button" value="设置数据" onclick="setUserName()"/>
<p id="jq" style="color: red">Jquery测试</p>
</body>
</html>5.Jquery事件操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// alert("文档加载完毕");
$("#zs").click(function(){
$("#p1").html("<font color=red>张三被点了</font>");
});
$("#zs").dblclick(function(){
$("#p1").html("<font color=red>张三被双击了</font>");
});
$("#t1").focus(function(){
$("#t1").val("获取焦点");
});
$("#t1").blur(function(){
$("#t1").val("失去焦点");
});
$("#d1").mouseover(function(){
$("#d1").html("鼠标移入");
});
$("#d1").mouseout(function(){
$("#d1").html("鼠标移出");
});
});
</script>
</head>
<body>
<input type="button" id="zs" value="张三"/>
<p id="p1"></p>
<input type="text" id="t1"/>
<hr/>
<div id="d1" style="border: 1px solid red;width: 100px;height: 100px;"></div>
</body>
</html>6.Jquery动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
$("#p1").show();
});
$("#b2").click(function(){
$("#p1").hide();
});
$("#b3").click(function(){
$("#d1").fadeOut();
});
$("#b4").click(function(){
$("#d1").fadeIn();
});
$("#b5").click(function(){
// $("#d1").fadeToggle();
// $("#d1").fadeToggle("slow");
$("#d1").fadeToggle(10000);
});
$("#b6").click(function(){
$("#d1").fadeTo("slow",0.1);
$("#d2").fadeTo("slow",0.5);
$("#d3").fadeTo("slow",0.9);
});
$("#b7").click(function(){
$("#d4").slideDown("slow");
});
$("#b8").click(function(){
$("#d4").slideUp("slow");
});
$("#b9").click(function(){
$("#d5").animate({left:'500px'},'slow');
});
$("#b10").click(function(){
$("#d5").animate({
left:'500px',
opacity:0.5,
height:'150px',
width:'150px'
},'slow');
});
$("#b11").click(function(){
$("#d5").animate({
left:'500px',
opacity:0.5,
height:'+=150px',
width:'+=150px'
},'slow');
});
$("#b12").click(function(){
$("#p2").show(function(){
alert("我出来了！");//所谓的回调函数就是在show()被调用出来了之后，才继续调用的alert("我出来了！")。
});
});
$("#b13").click(function(){
$("#d6").animate({left:'500px'},'slow');
});
$("#b14").click(function(){
$("#d6").stop();
});
});
</script>
</head>
<body>
<input type="button" value="出来" id="b1"/>
<input type="button" value="滚" id="b2"/>
<p id="p1">出来了</p>
<hr/>
<input type="button" value="淡出" id="b3"/>
<input type="button" value="淡入" id="b4"/>
<input type="button" value="淡入淡出开关" id="b5"/>
<input type="button" value="透明度" id="b6"/>
<div id="d1" style="width: 100px;height: 100px;background-color: red;margin: 10px;"></div>
<div id="d2" style="width: 100px;height: 100px;background-color: green;margin: 10px;"></div>
<div id="d3" style="width: 100px;height: 100px;background-color: blue;margin: 10px;"></div>
<hr/>
<input type="button" value="向下滑动" id="b7"/>
<input type="button" value="向上滑动" id="b8"/>
<div id="d4" style="background-color: gray;display: none;height: 100px;width: 500px;">
<p>test</p>
<p>我是用来测试的</p>
</div>
<hr/>
<input type="button" value="向左移动" id="b9"/>
<input type="button" value="动画效果2" id="b10"/>
<input type="button" value="动画效果3" id="b11"/>
<!-- <div id="d5" style="width: 100px;height: 100px;background-color: red;margin: 10px;position: absolute;"></div> -->
<hr/>
<input type="button" value="回调事件" id="b12"/>
<p id="p2" style="display: none;">点我了</p>
<hr/>
<input type="button" value="向左移动" id="b13"/>
<input type="button" value="停止" id="b14"/>
<div id="d6" style="width: 100px;height: 100px;background-color: red;margin: 10px;position: absolute;"></div>
</body>
</html>7.Jquery 和Ajax
两个方法的具体实例：
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*
1.
远程请求，把请求的数据载入到 DOM 里；
load( url , [,data] , [,callback])
Url：请求地址
Data:请求参数
Callback:请
.
求完成后的回调方法
*/
$("#b1").click(function(){
$("#d1").load("/HeadFirstJquery/ajax?action=load",{name:"张三",age:14},function(){
alert("执行完成");
});
});
/*
Ajax 请求后台；
$.post(URL,data,callback);
Url：请求地址
Data:请求参数
Callback:请求完成后的回调方法
*/
$("#b2").click(function(){
$.post("/HeadFirstJquery/ajax?action=post",{id:1},function(data,textStatus){
alert("请求状态："+textStatus);
alert("返回数据："+data);
data=eval("("+data+")");
$("#name").val(data.name);
$("#age").val(data.age);
});
});
});
</script>
</head>
<body>
<input id="b1" type="button" value="Load加载"/>
<div id="d1"></div>
<hr/>
<input id="b2" type="button" value="Post/Get加载"/><br/>
姓名：<input type="text" id="name"/><br/>
年龄：<input type="text" id="age"/>
</body>
</html>用来处理的servlet(需要配置文件):AjaxServlet
package com.java1234.web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String action=request.getParameter("action");
if("load".equals(action)){
this.load(request, response);
}else if("post".equals(action)){
this.post(request, response);
}
}
private void load(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String name=request.getParameter("name");
String age=request.getParameter("age");
System.out.println("name:"+name);
System.out.println("age:"+age);
PrintWriter out=response.getWriter();
out.println("jquery Ajax你好");
out.flush();
out.close();
}
private void post(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String id=request.getParameter("id");
System.out.println("id:"+id);
PrintWriter out=response.getWriter();
out.println("{name:'张三',age:14}");
out.flush();
out.close();
}
}
以上基本就是JQuery的一个总体的简单介绍。
扫一扫
4883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
