本文介绍了jQuery的优势，如适合互联网应用，同时兼容传统JS API。讲解了使用步骤，包括引入库文件和页面加载执行。详细讨论了DOM对象与jQuery对象的区别，以及jQuery的九大选择器。此外，还深入阐述了jQuery封装的DOM操作，包括增删改查的各种方法，并举例说明。最后提到了jQuery中的事件处理和异步交互，如AJAX使用。
jQuery：
流行的js 类库.
市场用得比较多两个框架： jQuery 比较适合做一些互联网 的应用（12306.com,蘑菇街，美丽说，聚美）
extjs 比较适合做后台管理系统（电商（订单管理），银行，电信）
在写jQuery代码时，不光可以使用jQuery的API，还能使用传统JS的API。
1. jQuery的优势：
主要功能：javascript开发人员查找元素、操作DOM、处理事件、执行动画和开发Ajax的操作。
jQuery 优势：(宗旨：write less ，do more 写更少的代码，做更多的事情)
bs 架构：性能
1：轻量级 （js 库非常小）
2：强大的选择器（获取页面上面的dom 元素，操作dom 必须先得到dom）
DOM获取：
var username = document.getElementById("username"); alert(username.value);
jQuery获取：
var $username = $("#username"); alert($username.val());
3：出色的DOM操作的封装
4：可靠的事件处理机制(对事件进行了一个封装)
5：完善的Ajax（底层封装xmlhttprequest）
6：不污染顶级变量（在jquery 里面只有一个对象 jQuery == $）
7:出色的浏览器兼容性
8:链式操作方式($("#ddd").addClass().removeClass())
9:隐式迭代 (显示迭代:迭代一个数组)
显示迭代（for(var i=0;i<array.length;i++){
}）
隐身迭代屏蔽掉for操作
10：行为层与结构层的分离
11：丰富的插件支持，后期扩展非常方便
12：完善的文档
2.使用步骤：
引用第三方js库文件 : <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
页面加载完毕执行：
JS：
window.οnlοad=function(){ }
JQ：
$(document).ready(function(){
})
$(function(){
})
3.DOM对象与JQuery对象：
dom对象：dom对象是浏览器自带对象,dom 对象只能调用dom 里面的属性和方法,不能直接调用jQuery对象里面的属性和方法.
jquery对象：jquery 对象是通过jQuery 包装页面上的DOM对象后 而产生的一个新的对象，jquery 对象是jQuery 独有的，不能直接调
用dom对象里面的属性和方法，jQuery 对象是一个数组。
jQuery 对象与dom 对象时可以相互转换的，转换之后它们可以相互调用。
DOM获取：
var username = document.getElementById("username"); alert(username.value);
DOM对象转换成jQuery对象：$(DOM对象)
var $username = $(username);
jQuery获取 ：var $username = $("#username"); alert($username.val());
jQuery对象转换成DOM对象：
1.jQuery对象是一个数组对象：jQuery对象[索引值] [下标，从0开始]
var username = $username[0]; alert(username.value);
2.jQuery提供了get(index)方法
var username = $username.get(0); alert(username.value);
js对象和jQuery对象的区别:
（1）js对象的三种基本定位方式
（A）通过ID属性：document.getElementById()
（B）通过NAME属性：document.getElementsByName()
（C）通过标签名：document.getElementsByTagName()
（2）jQuery对象的三种基本定位方式
（A）通过ID属性：$("#id属性值")
（B）通过标签名：$("标签名")
（C）通过CLASS属性：$(".样式名")
（3）js对象出错的显示
没有合理的提示信息
例如：alert(document.getElementById("usernameIDD").value)
（4）jQuery对象出错的显示
有合理的提示信息，例如：undefined
例如：alert($("#usernameIDD").val())
4.Jquery九大选择器
目的：通过九类选择器，能定位web页面（HTML/JSP/XML）中的任何标签。
项目中，通常是多种选择器一起使用。
1：基本选择器
//1)查找ID为"div1ID"的元素，并添加样式。-ID选择器
$("#button").click(function(){
$("#div1ID ").css("background","red");
});
//2)查找元素名是div的所有元素-标签选择器
$("div").css("background","green");
//3)选择class为.myClass样式的所有元素-.class选择器
$(".myClass ").css("background","yellow");
//4)查找所有DIV,SPAN,P元素的个数
alert( $("div,span,p").size() );
//5)查找所有ID为div1ID,CLASS为myClass,P元素的个数-组合选择器
alert( $('#div1ID,.myClass,p').size() );
//6)选择所有的元素-*
$("*").css("background","blue");
2：层级选择器
//1)找到表单form里所有的input元素的个数
alert( $("form input").size() );
//2)找到表单form里所有的子级input元素个数
alert( $("form > input").size() );
//3)选择id为one 的同级下一个div元素的value属性值
alert( $("#one + div").val() );
//4)选择id为id的元素后边的所有同级的div兄弟元素个数
alert( $("#id ~ div").size() );
//5) 选择id为id的元素的所有同级的div兄弟元素
$("#button").click(function(){
//只有当前的这个方法返回的是jQuery 对象才能进行链式操作...
$("#id").siblings("div").css("background","blue");
});
3：基本过滤选择器
//1)查找UL中第一个元素的内容
alert( $("ul li:first").text() );
//2)查找UL中最后个元素的内容
alert( $("ul li:last").text() );
//3)选择class不为one的所有div元素
$("div:not('.one')").css("background","green");
查找所有未选中的input为checkbox的元素个数
alert( $(":checkbox:NOT(:checked)").size() );
//4)查找表格的索引值为1、3、5...奇数行个数，索引号从0开始
alert( $("table tr:odd").size() );
//5)查找表格的索引值为2、4、6...偶数行个数，索引号从0开始
alert( $("table tr:even").size() );
//6)查找表格中第二行的内容(选择索引值为1的元素)，从索引号0开始，这是一种祖先后代的变化形式
alert( $("table tr td:eq(1)").text() );
//7)查找索引值大于0的元素个数
alert( $("table tr:gt(0)").size() );
//8)查找索引值比2小的元素个数
alert( $("table tr:lt(2)").size() );
//9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色
$(":header").css("background-color","red").css("color","blue");
//10)选择当前正在执行动画的所有元素
function move(){
$("#mover").slideToggle("slow",move); //递归式
}
move();
$("#button").click(function(){
$(":animated").css("background","red"); // .stop();停止
});
4：内容过滤选择器
//1)查找所有包含文本"John"的div元素的个数
alert( $("div:contains('John')").size() );
//2)选取所有不包含子元素(或者文本元素)的p元素为空的个数
alert( $("p:empty").size() );
//3)选取包含p元素的div元素，并添加一个myClass样式
$("div:has(p)").addClass("myClass");
//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
alert( $("p:parent").size() );
5：可见性过滤选择器
//1)选取所有可见的div元素
$("div:visible").css("background","red");
//2)选取所有不可见的div元素,可以利用jQuery 中的show()方法将它们显示出来
$("div:hidden").css("background","red").show(2000);
//3)选取所有的文本隐藏域, 并打印它们的值
$("#button").click(function(){
// <!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
var $input=$("input:hidden"); //得到一个jquery对象，存的是一个数组。数组里存的是dom对象。
//通过dom来遍历
//显示迭代遍历..
for(var i=0;i<$input.length;i++){
alert($input[i].value); //取到数组里的dom元素
//$($input[i]).val() //变成jquery对象
}
//隐式迭代each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象
$("input:hidden").each(function(index,dom){
alert(index);//索引
alert(dom.value); //dom里的值
})
});
//4)选取id为onediv下所有的div, 并打印它们的值
$("#b4").click(function(){
$("#onediv>div").each(function(index,dom){
alert($(dom).text()); //把dom包装成jq对象，打印对应的文本内容
})
});
6：属性选择器
//1)选取含有属性title的div元素
$("div[title]").css("background","red");
//2)选取属性title值等于“test”的div元素
$("div[title=test]")
//3)选取属性title值不等于“test”的div元素(没有属性title的也将被选中)
$("div[title!=test]")
//4)选取属性title值以“te”开始的div元素
$("div[title^=te]")
//5)选取属性title值以“est”结束的div元素
$("div[title$=est]")
//6)选取属性title值含有“es”的div元素
$("div[title*=es]")
//7)组合属性选择器,首先选取有属性id的div元素，然后在结果中选取属性title值含有“es”的元素
$("div[id][title*=es]")
7：子元素过滤选择器
//1)选取每个class为one的div,父元素下的第1个子元素
$("div[class=one] :nth-child(1)") //：前加空格 从1开始
$("div[class=one] :first-child")
//2)选取每个class为one的div父元素下的最后一个子元素
$("div[class=one] :last-child")
//3)如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
$("div[class=one] :only-child")
8：表单对象属性过滤选择器
//1)对表单内可用input赋值操作
$("input:enabled").val("");
//2)选取对表单内不可用input赋值操作
$("input:disabled").val("");
//3)获取多选框选中的个数
$("input:checked").size()
//4)获取下拉框选中的内容，取title的属性值
$("select>option:selected").each(function(index,dom){
//alert($(dom).text());
var title=$(dom).attr("title");
alert(title);
})
9：表单选择器
$("#form1 :text")
$("#form1 :checkbox")
$("#form1 :hidden")
面试题--find("9类选择器")：查询指定的节点和多重each()迭代
|
//使用jquery弹出奇数的tr标签下的td里的值 var $tr = $("table tr:lt(4):even"); $tr.each(function(){ //tr中查找td标签,$(this)表示tr var $td = $(this).find("td"); $td.each(function(){ //$(this)表示td var txt = $(this).text(); alert(txt); }); }); |
5.DOM操作：jQuery中封装DOM
目的：对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查
（1）DOM简述与分类
（A）DOM是一种W3C官方标准规则，可访问任何标签语言的页面(HTML/JSP/XML)
（B）DOM是跨平台(window/linux/unix)，跨语言(javascript/java)，跨浏览器(ie/firefox/Chrome)的标准规则
（C）我们只需要按照DOM标准规则，针对主流浏览器(ie/firefox/Chrome)编程
（D）JS/jQuery按照DOM的标准规则，既可以操作HTML/JSP，也能操作CSS
（E）DOM标准规则不是JS的专属，其它语言，也能适用，例如:VBScript，Java语言等
（2）jQuery中常用方法
目的：通过方法，能操作web页面（HTML/JSP）中的任何标签
（1）val()： 设置或获取标签的value属性值，前提是该标签有value属性
（2）html()： 设置或获取标签之间的内容 （包括 HTML 标记），不能用运于xml文件
（3）text()： 设置或获取标签之间的文本内容，可以用运于html/jsp和xml文件，(提倡)
（4）css()：加key-value形成的css样式
（5）addClass()：加已经定义好的一个css样式
（6）size()：获取jQuery对象/数组中元素的个数，提倡
（7）length：获取jQuery对象/数组中元素的个数
（3）jQuery常用Method-API，以下方法均由jQuery对象调用
1. 查找节点：
* 元素节点：所有的选择器
var $city=$("#city");
* 文本节点：
text()：获取HTML或XML标签之间的值
* 属性节点：
* attr(name)：获取属性值
* val()：获取value属性的值
* removeAttr()：删除已存在的属性
2.创建节点；
* 元素节点：$(HTML代码)
var $li=$("<li></li>");
$("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本
* 文本节点：
text("")：设置HTML或XML标签之间的值为""空串
$li.text("天津");
* 属性节点：
*attr(name,value)：追加属性.jQuery1.7.2 的版本这个方法不兼容...
$li.attr("id","liId");
*val("")：设置value属性值为""空串，相当于清空
3. 插入节点：
* 插入内部节点：
1.append()：追加到父元素之后
$("#chinese").append($("#beijing"));
var div=$("<div title='name'>name</div>");
$("body").append(div);
2.appendTo():将每个匹配的元素追加到指定的元素中的内部结尾处
$("#beijing").appendTo($("#chinese"));
3.prepend(content):追加到父元素之前
$("#bj").prepend($("#fk"));
4.prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
$("#bj").prependTo($("#fk"));
* 插入外部节点：
1.after()：追加到兄弟元素之后
$("#bj").after($("#p3"));
2.before()：追加到兄弟元素之前
$("#bj").before($("#p3"));
3.insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面
$("#bj").insertAfter($("#p3"));
4.insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
$("#bj").insertBefore($("#p3"));
4.删除节点：
* remove()：删除当前节点以及下面所有的子节点.
$("#city").remove();
* empty()：清空当前节点下面的子节点.
5. 复制节点：
* jQuery的clone(Boolean)：表示是否复制事件。
clone()：只复制样式，不复制行为
clone(true)：既复制样式，又复制行为
$("p").append($("button").clone(true)); //p标签内追加一个button按钮
* js的cloneNode(Boolean)：表示是否复制后代节点。
6. 替换节点：
* replaceWith()：替代原来的节，前面的元素是被替换元素;后面的元素是替换元素
* replaceAll()：就是颠倒了的replaceWith()
7. 样式操作：
.css("","")
.addClass()：增加样式
.removeClass():不传参数:删除所有样式;传递参数:删除指定样式
.toggleClass:切换样式，如果标签有样式就删除，否则增加样式
.hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式
offset()：获取对象的left和top坐标
offset({top:100,left:200})：将对象直接定位到指定的left和top坐标
width()：获取对象的宽
width(300)：设置对象的宽
height()：获取对象的高
height(500)：设置对象的高
show()：显示对象
hide()：隐藏对象
fadeIn()：淡入显示对象
fadeOut()：淡出隐藏对象
slideUp()：向上滑动
slideDown()：向下滑动
slideToggle()：上下切换滑动，速度快
8 遍历节点：
* 子节点：children()
$("ul").children()
* 父节点：parent()
* 上一个兄弟节点：prev()
* 下一个兄弟节点：next()
* 当前节点的兄弟节点：siblings("li")
* find()：通用遍历方法，选获取元素通过find 找到对应的标签的子元素的集合.
9 包裹节点：
* wrap()：分别包裹:将匹配到的元素使用指定标签进行逐个包裹.
$("p").wrap("<font color='red'></font>");
* wrapAll()：一起包裹:将匹配到的元素使用指定标签进行整体包裹.
$("p").wrapAll("<font color='red'></font>")
* wrapInner()：包裹内部:将匹配到的元素使用指定标签进行内部逐个包裹.
$("p").wrapInner("<font color='red'></font>")
6.事件处理：jQuery中的特殊事件
目的：对web页面（HTML/JSP）进行事件触发，完成特殊效果的处理
window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者
ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化
ready和onload同时存在时，二者都会触发执行，ready快于onload
change：当内容改变时触发
focus：焦点获取
select：选中所有的文本值
keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同
mousemove：在指定区域中不断移动触发
mouseover：鼠标移入时触发
mouseout：鼠标移出时触发
submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台
click：单击触发
dblclick：双击触发
blur：失去焦点
bind：绑定事件:$("div").bind("mouseover",function(){ })
unbind()：解绑事件
$("div").unbind();/解绑所有事件
$("div").unbind("mouseover");//解绑指定事件
//鼠标悬停事件
// $("ul>li").mouseover(function(){
// $(this).css("background","red");
//
//
// });
// $("ul>li").mouseout(function(){
// $(this).css("background","white");
// })
//等同于上边两个方法
// $("ul>li").hover(function(){
// $(this).css("background","red");
// },function(){
// $(this).css("background","white");
// })
7.表单提交，异步交互
//在做调试代码的时候我们一般使用alert
//但是alert 它只能打印字符串，或int 类型的数据，不能打印对象里面比较详细的信息...
//浏览器给我们提供了一个对象叫console.info 可以打印对象里面更加详细的信息..console.info(data);
-
get方式
GET - 从指定的资源请求数据
用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
$("#getbutton").bind("click",function(){
$.get("../../getServlet",{},function(data){
//{total:118,rows:[{id:1,title:'左娜'},{id:2,title:'梅斌'},{id:3,title:'酸梅汤'}]}
//json 的字符串它是符合一个javascript 的对象.
var obj=eval("("+data+")"); //不安全
var rows=obj.rows;
for(var i=0;i<rows.length;i++){
alert(rows[i].id);
alert(rows[i].title);
}
})
})
servlet:
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
StringBuffer buffer=new StringBuffer();
buffer.append("{total:118,rows:[{id:1,title:'张三'},{id:2,title:'李四'},{id:3,title:'王五'}]}");
out.println(buffer.toString());
}
getJSON方式
$(function(){
$("#getJSON").click(function(){
$.getJSON("data.json",function(data){
var length=data.length;
alert(length);
});
})
})
data.json://jQuery在解析json 的时候要求key上面需要有双引号.
[
{
"name":"张三",
"desc":"描述："
},
{
"name":"李四",
"desc":"描述："
}
]
getScript异步去加载服务端的一段脚本文件
$(function(){
$("#getScript").click(function(){
$.getScript("../../js/test.js")
})
})
- post方式：
POST - 向指定的资源提交要处理的数据
可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
$("#postbutton").bind("click",function(){
//一般如果有请求参数，就使用post 方法..
$.post("../../postServlet",{},function(data){
//out.println("<xml><province><city>邯郸</city></province></xml>");
alert($(data).find('city').text());
})
})
load：
$("#loadbutton").bind("click",function(){
/**
* 1:如果有参数的时候，则使用post 方式提交，
* 2：如果没有请求参数，则默认使用get 方式提交..
* load 方法它一般都是用于去载入一个静态的页面..
*/
$("div").load("ajax.html");
//$("div").load("../../loadServlet",{username:"高压"},function(){});
})
ajaxload:当用户第一次访问界面的时候我们不需要加载页面上面所有的资源,当用户想看的时候去加载.
<script type="text/javascript">
// JS: window.onscroll=function(){
// }
//jQuery
$(window).scroll(function(){ //滚动事件
var t=document.documentElement.scrollTop;
if(t>0 && t<800){
loadImage("1");
}
if(t>800 && t<1600){
loadImage("2");
}
function loadImage(imageType){
$.ajax({
url:"../../imageServlet",
type:"POST",
data:{
imageType:imageType
},
success:function(data){
var area="#area_"+imageType;
var image="<img src='../../"+data+"'>";
$(area).html(image);
}
})
}
})
</script>
<style type="text/css">
#message{
height:4800px;
}
#message div{
height:800px;
border:30px solid red;
}
</style>
</head>
<body>
<div id="message">
<div id="area_1"> </div>
<div id="area_2"></div>
</div>
</body>
servlet:
String imageType=request.getParameter("imageType");
if("1".equals(imageType)){
out.println("image/1.jpg");
}
if("2".equals(imageType)){
out.println("image/2.jpg");
}
-
Ajax使用:
1.异步提交表单
第一种方式：将表单里面的选项序列化成一个字符串.
var data=$("#form1").serialize();
第二种方式：序列化成一个数组.
var data=$("#form1").serializeArray();
$.ajax({
type:"post",//请求方式
url:"请求地址",
// data:{
// username:$("#username").val(),
// password:$("#password").val(),
// email:$("#email").val(),
// },
data:data,//请求参数
success:function（data）{
alert(data);
}
});
2.ajax使用：
jQuery(function(){
$("#ajaxbutton").bind("click",function(){
var options={
url:"请求地址",
type:"POST",//请求方式，默认get
async:true/flase,//是否为异步，默认是true(异步)
//data:"username='张三'&age=45&...",//提交数据的第一种格式 字符串
//请求数据的第二种格式
data:{
username:"张三"
},
success:function(data){//成功回调函数
//回调函数内容
},
dateType:"",//服务端预期的数据返回类型. text json...
timeout:"3000",//请求超时的时间
cache:true/false,//浏览器缓存请求信息
contentType："application/x-www-form-urlencoded"//发送至服务器信息的MIME类型
error:function(){//请求失败时的一个回调函数.
//可以给用户号的提示.
}
}
$.ajax(options)
})
})
扫一扫
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
