jQuery教程、笔记

最新推荐文章于 2022-06-20 20:47:58 发布

带你去学习

最新推荐文章于 2022-06-20 20:47:58 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： jQuery 前端

本文链接：https://blog.csdn.net/zhou870498/article/details/79957963

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

一、概述

John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作。
使用:

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>

二、jQuery的功能(API)

选择器
过滤器
事件
效果
Ajax

三、jQuery的作用

操作DOM对象
动态操作样式css
数据访问
控制响应事件等

四、jQuery的优点

①写少代码,做多事情【write less do more】
②免费、开源且轻量级的js库，容量很小
③兼容市面上主流浏览器
④能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
⑤文档手册很全，很详细
⑥成熟的插件可供选择
⑦出错后，有一定的提示信息

五、jQuery和JavaScript对比使用

（1）js对象转成jQuery对象：
语法：$(js对象)---->jQuery对象
var inputElement = document.getElementById("inputID");//js对象
var $input = $(inputElement);//jquery对象
var txt = $input.val();
（2）jQuery对象转成js对象：
语法1：jQuery对象[下标]
语法2：jQuery对象.get(下标)
例如：
var $div = $("#divID");//jquery对象
var divElement = $div[0];//js对象(方式一)
var divElement = $div.get(0);//js对象(方式二)
var txt = divElement.innerHTML;
（3）js对象和jQuery对象的定位区别
①js对象的三种基本定位方式
（A）通过ID属性：document.getElementById()
（B）通过NAME属性：document.getElementsByName()
（C）通过标签名：document.getElementsByTagName()
②jQuery对象的三种基本定位方式
（A）通过ID属性：$("#id属性值")
（B）通过标签名：$("标签名")
（C）通过CLASS属性：$(".样式名")
③js对象出错的显示没有合理的提示信息，jQuery对象出错的显示有合理的提示信息

六、jQuery的九类选择器

① 基本选择器
//1)查找ID为"div1ID"的元素个数
alert( $("#div1ID").size() );
//2)查找DIV元素的个数
alert( $("div").size() );
//3)查找所有样式是"myClass"的元素的个数
alert( $(".myClass").size() );
//4)查找所有DIV,SPAN,P元素的个数
alert( $("div,span,p").size() );
//5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
alert( $('#div1ID,.myClass,p').size() );
② 层次选择器
//1)找到表单form里所有的input元素的个数
alert( $("form input").size() );
//2)找到表单form里所有的子级input元素个数
alert( $("form > input").size() );
//3)找到表单form同级第一个input元素的value属性值
alert( $("form + input").val() );
//4)找到所有与表单form同级的input元素个数
alert( $("form ~ input").size() );
③ 增强基本选择器
//1)查找UL中第一个元素的内容
alert( $("ul li:first").text() );
//2)查找UL中最后个元素的内容
alert( $("ul li:last").text() );
//4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始
alert( $("table tr:odd").size() );
//5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始
alert( $("table tr:even").size() );
//6)查找表格中第二行的内容，从索引号0开始，这是一种祖先后代的变化形式
alert( $("table tr td:eq(1)").text() );
//7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
alert( $("table tr:gt(0)").size() );
//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
alert( $("table tr:lt(2)").size() );
//9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色
$(":header").css("background-color","red").css("color","blue");
//10)查找所有未选中的input为checkbox的元素个数
alert( $(":checkbox:NOT(:checked)").size() );
④内容选择器
//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() );
⑤可见性选择器
//1)查找隐藏的tr元素的个数
alert( $("table tr:hidden").size() );
//2)查找所有可见的tr元素的个数
alert( $("table tr:visible").size() );
⑥属性选择器
//1)查找所有含有id属性的div元素个数
alert( $('div[id]').size() );
//2)查找所有name属性是newsletter的input元素，并将其选中
$("input[name='newsletter']").attr("checked","checked");
//3)查找所有name属性不是newsletter的input元素，并将其选中
$("input[name!='newsletter']").attr("checked","true");
//4)查找所有name属性以'news'开头的input元素，并将其选中
$("input[name^='news']").attr("checked","checked");
//5)查找所有name属性以'letter'结尾的input元素，并将其选中
$("input[name$='letter']").attr("checked","checked");
//6)查找所有name属性包含'news'的input元素，并将其选中
$("input[name*='news']").attr("checked","checked");
//7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中
$("input[id][name$='letter']").attr("checked","true");
⑦子元素选择器
//1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始
$("ul li:first-child").each(function(){
alert( $(this).text() );
});
//2)迭代每个ul中最后1个li元素中的内容,索引从1开始
$("ul li:last-child").each(function(){
alert( $(this).text() );
});
//4)迭代每个ul中第2个li元素中的内容,索引从1开始
$("ul li:nth-child(2)").each(function(){
alert( $(this).text() );
});
//3)在ul中查找是唯一子元素的li元素的内容
$("ul li:only-child").each(function(){
alert( $(this).text() );
});
⑧表单选择器
//1)查找所有input元素的个数
alert( $("input").size() );
//找input标签和select/textarea/button
alert( $(":input").size() );
//2)查找所有文本框的个数
alert( $(":text").size() );
//3)查找所有密码框的个数
alert( $(":password").size() );
//4)查找所有单选按钮的个数
alert( $(":radio").size() );
//5)查找所有复选框的个数
alert( $(":checkbox").size() );
//6)查找所有提交按钮的个数
alert( $(":submit").size() );
//7)匹配所有图像域的个数
alert( $(":images").size() );
//8)查找所有重置按钮的个数
alert( $(":reset").size() );
//9)查找所有普通按钮的个数
alert( $(":button").size() );
//10)查找所有文件域的个数
alert( $(":file").size() );
//11)查找所有input元素为隐藏域的个数
alert( $(":input:hidden").size() );
⑨表单对象属性选择器
//1)查找所有可用的input元素的个数
alert( $("input:enabled").size() );
//2)查找所有不可用的input元素的个数
alert( $("input:disabled").size() );
//3)查找所有选中的复选框元素的个数
alert( $(":checkbox:checked").size() );
//4)查找所有未选中的复选框元素的个数
alert( $(":checkbox:NOT(:checked)").size() );
//5)查找所有选中的选项元素的个数
alert( $("select option:selected").size() );
alert( $("#provinceID option:NOT(:selected)").size() );

七、jQuery中常用方法和事件

目的：对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查
①常用方法API：
val() 获取value属性的值
val("") 设置value属性值为""空串，相当于清空
html() 获取标签之间的内容，不能用运于xml文件
text() 获取标签之间的内容，可以用运于html/jsp和xml文件
text("") 设置HTML或XML标签之间的值为""空串
css() 加key-value形成的css样式
size() 获取jQuery对象/数组中元素的个数，提倡
each() 是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象
append() 追加到父元素之后
prepend() 追加到父元素之前
after() 追加到兄弟元素之后
before() 追加到兄弟元素之前
attr(name) 获取属性值
attr(name,value)给符合条件的标签添加key-value属性对
$("<div id='xxID'>HTML代码</div>") 创建元素，属性，文本
remove() 删除自已及其后代节点
clone() 只复制样式，不复制行为
clone(true) 既复制样式，又复制行为
replaceWith() 替代原来的节点
removeAttr() 删除已存在的属性
addClass() 加已经定义好的一个css样式
removeClass() 删除已存在的样式
hasClass() 判断标签是否有指定的样式，true表示有样式，false表示无样式
toggleClass() 如果标签有样式就删除，否则增加样式
offset() 获取对象的left和top坐标
offset({top:100,left:200}) 将对象直接定位到指定的left和top坐标
width() 获取对象的宽
width(300) 设置对象的宽
height() 获取对象的高
height(500) 设置对象的高
children() 只查询子节点，不含后代节点
next() 下一下兄弟节点
prev() 上一下兄弟节点
siblings() 上下兄弟节点
show() 显示对象
hide() 隐藏对象
fadeIn() 淡入显示对象
fadeOut() 淡出隐藏对象
slideUp() 向上滑动
slideDown() 向下滑动
slideToggle() 上下切换滑动，速度快点
例子：
//使用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);
});
});
③常用事件API
目的：对web页面（HTML/JSP）进行事件触发，完成特殊效果的处理
window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者
ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，常用$(函数)简化
ready和onload同时存在时，二者都会触发执行，ready快于onload
change：         当内容改变时触发
focus：焦点获取
select：         focus选中所有的文本值
mousemove：在指定区域中不断移动触发
mouseover：鼠标移入时触发
mouseout：鼠标移出时触发
submit：         在提交表单时触发，true表示提交到后台，false表示不提交到后台
click：单击触发
dblclick：         双击触发
blur：焦点失去
keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同

八、jQuery常用AJAX-API

①$.ajax方式
$.ajax({
type:"POST",
url:"http://localhost:8080/STS/rest/user",
cache: false,
async : false,
data:{uid:obj.attr("userid")},
dataType:"json",//返回的数据类型
success:function(data){
$( '#serverResponse').html(data);
},
error:function(data){
alert("失败");
}
});
②get和post方式
$.get(url,sendData,function(backData,textStatus,ajax){... ...})
$.post(url,sendData,function(backData,textStatus,ajax){... ...})
③jQuery对象.serialize()
作用：自动生成JSON格式的文本
注意：为每个jQuery对象设置一个name属性，因为name属性会被认为请求参数名
注意：必须用<form>标签元素
<script type="text/javascript">
$(":button").click(function(){
var username = $(":text:first").val();
var password = $(":text:last").val();
username = $.trim(username);
password = $.trim(password);
var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();
/*手工书写JSON文本
var sendData = {
"user.username":username,
"user.password":password
};
*/
/*工具生成JSON文本*/
var sendData = $("form").serialize();
$.post(url,sendData,function(backData,textStatus,ajax){
var tip = backData.tip;
var $img = $("<img src='" + tip + "' height='18px' widht='18px'/>")
//清空span节点中的内容
$("span").text("");
$("span").append( $img );
});
});
</script>
③load方式（取得服务端当前时间）
简单形式：jQuery对象.load(url)
复杂形式：jQuery对象.load(url,sendData,function(backData,textStatus,ajax){... ...})
sendData = {"user.name":"jack","user.pass":"123"};
以JSON格式文本方式发送，使用POST方式发送，服务端能收到数据
注意：对于load方法而言，如果请求体无参数发送的话，load方法采用GET方式提交
<script type="text/javascript">
$(":button").click(function(){
var url = "${pageContext.request.contextPath}/loadTimeRequest?time"+new Date().getTime();
var sendData = null;
$.load(url,sendData,function(a,b,ajax){
var jsonJAVA = ajax.responseText;
var jsonJS = eval("("+jsonJAVA+")");
var strTime = jsonJS.strTime;
$("span:first").html(strTime).css("color","red");
$("span:last").html(strTime).css("color","blue");
});
//$("span").load(url);
});
</script>
load()方法参数解释：
参数一：url发送到哪里去
参数二： sendData发送请求体中的数据，符合JSON格式，例如：{key:value,key:value}
参数三：function处理函数，类似于传统方式ajax.onreadystatechange = 处理函数
其中参数三为function处理函数最多可以接收三个参数，含义如下：
第一个参数：服务端返回的数据，例如：backData
第二个参数：服务端状态码的文本描述，例如：success、error、
第三个参数：ajax异步对象，即XMLHttpRequest对象
以上所有参数的名字可以任意，但必须按顺序书写，尽量做到见名知意
④jQuery解析XML
<?xml version="1.0" encoding="UTF-8"?>
<root>
<city>广州</city>
<city>中山</city>
<city>深圳</city>
</root>
<script type="text/javascript">
$(":button").click(function(){
var url = "${pageContext.request.contextPath}/03_city.xml";
var sendData = null;
$.get(url,sendData,function(backData,textStatus,ajax){
/*
//将xml文件转成jquery对象，目的是用jquery api解析xml文件
var $xml = $(backData);
var $city = $xml.find("city");
$city.each(function(){
//获取每一个city节点
var city = $(this).text();
alert(city);
});
*/
var xml = ajax.responseXML;
var $xml = $(xml);
var $city = $xml.find("city");
$city.each(function(){
//获取每一个city节点
var city = $(this).text();
alert(city);
});
});
});
</script>