博客转移到个人站点:http://www.wangchengmeng.club/2018/02/01/%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8BJquery/
欢迎来吐槽
Jquery的使用
1、引用的两种方式
1、直接下载库,导入到你的工程中
2、使用cdn
<!--利用百度的CDN 使用Jquery-->
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
Jquery的语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()
美元符号定义 jQuery
选择符(selector)"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪事件
$(document).ready(function(){
// 开始写 jQuery 代码...
});
**这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
简洁的写法:
$(function(){
// 开始写 jQuery 代码...
});
jQuery 选择器
jQuery 中所有选择器都以美元符号开头:$()
1、元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
$("p")
实例1:点击button后所有<p>都隐藏
$(document).ready(function(){
$("button")click(function(){
$("p").hide();
});
});
2、ID选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
通过 id 选取元素语法如下:
$("#test") 选取 id为text的标签
实例2、点击button,id为test的<p>隐藏
$(document).ready(function(){
$("button").click(function(){
$("p#test").hide();
});
});
3、.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下:
$(".test")
实例3:点击button隐藏class为test的<p>
$(document).ready(function(){
$("button").click(function(){
$("p.test").hide();
});
});
4.更多语法:
$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$("p:first") 选取第一个 <p> 元素
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 选取带有 href 属性的元素 在线实例
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a>
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素
jQuery 事件
1、什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
2、jQuery 事件方法语法
1、点击事件 click()
$("button").click(function(){
//操作
});
2、双击事件 dblclick()
$("button").dblclick(function(){
$(this).hide();
}); //双击button隐藏button
3、鼠标进入 mouseenter()
$("p#pi").mouseenter(function(){
//鼠标移动到了<p>id为pi上
});
4、鼠标离开 mouseleave()
$("p.pi").mouseleave(function(){
//鼠标离开了<p>class为pi的标签
});
5、按下鼠标 mousedown()
$("p : first").mousedown(function(){
//鼠标在第一个<p>标签按下了
});
6、松开鼠标 mouseup()
$("p").mouseup(function(){
//鼠标松开了
});
*7、鼠标经过 hover()
$("p").hover(function(){
//鼠标进入
},function(){
//鼠标离开
});
8、获得焦点 focus()
$("input").focus(function(){
//获得了焦点
});
9、失去焦点 blur()
$("input").blur(function(){
//失去焦点
});
3、jQuery 效果
1、jQuery 效果 - 显示和隐藏
$(function(){
$("button#hide").click(function () {
$("p.hide_show").hide();
});
$("button#show").click(function () {
$("p.hide_show").show();
});
});
显示和隐藏 设置时间 和回调函数
$(function(){
$("button#hide").click(function () {
$("p.hide_show").hide(2000,function () {
alert("已经隐藏");
});
});
$("button#show").click(function () {
$("p.hide_show").show(3000,function () {
alert("显示完毕");
});
});
});
toggle() 切换hide() show()
//toggle 函数 切换 hide() show()
$(function () {
$("button#toggle").click(function(){
$("p.hide_show").toggle(3000,function(){
alert("执行完毕的回调");
});
});
});
2、jQuery 效果 - 淡入淡出
//淡入淡出的效果
$(function () {
$("button#fade_out").click(function () {
$("div#fade_1").fadeOut();
$("div#fade_2").fadeOut("slow");
$("div#fade_3").fadeOut(2000,function () {
alert("fadeOut完毕");
});
});
});
$(function () {
$("button#fade_in").click(function(){
$("div#fade_3").fadeIn();
$("div#fade_2").fadeIn("slow");
$("div#fade_1").fadeIn(2000,function () {
alert("fadeIn完毕");
});
});
});
fadeToggle() 切换 fadeIn() fadeOut()
$(function () {
$("button#fade_toggle").click(function () {
$("div#fade_1").fadeToggle();
$("div#fade_2").fadeToggle();
$("div#fade_3").fadeToggle();
});
});
fadeTo() 指定淡入的透明度
$(function () {
$("button#fade_to").click(function(){
$("div#fade_3").fadeTo("slow",0.15);
$("div#fade_2").fadeTo("slow",0.5);
$("div#fade_1").fadeTo("slow",0.8);
});
});
3、jQuery 效果 - 滑动
//滑动
$(document).ready(function () {
$("div#flip_down").click(function(){
$("div#panel").slideDown("slow");
});
});
$(document).ready(function () {
$("div#flip_up").click(function () {
$("div#panel").slideUp("slow");
});
});
//切换 slideDwon() slideUp()
$(document).ready(function () {
$("div#flip_toggle").click(function () {
$("div#panel").slideToggle("slow");
});
});、
4、动画 animate
//动画
$(document).ready(function () {
$("button#animate").click(function () {
$("div#translate").animate({
left:200,
width:100,
height:200,
opacity:0.3
},2000,function () {
alert("动画执行完毕");
});
});
});
animate(param,speed,callback);
第一个参数是必须的,通过改变css样式去实现动画效果
第二个参数是执行时间
第三个是执行完毕后的回调函数
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
动画队列:
//队列动画 依次往下执行
$(document).ready(function () {
$("button#animate_queue").click(function () {
var div = $("div#translate");
div.animate({
height:300,
width:100,
opacity:0.3
},"slow");
div.animate({
height:100,
width:300,
opacity:0.5
},"slow");
div.animate({
height:100,
width:100,
opacity:1
},"slow");
});
});
5、jQuery 停止动画
//在动画执行完毕前 停止动画
$(document).ready(function () {
$("button#animate_stop").click(function () {
$("div#translate").stop();
});
});
4、jQuery - 链(Chaining)
有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。
提示: 这样的话,浏览器就不必多次查找相同的元素。
如需链接一个动作,您只需简单地把该动作追加到之前的动作上。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
5、jQuery - 获取内容和属性
1、获得内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值 value属性的值
//获取标签内容
$(document).ready(function () {
$("button#get_text").click(function () {
alert("text==:"+$("p#text").text());
});
});
$(document).ready(function () {
$("button#get_html").click(function () {
alert("text==:"+$("p#text").html());
});
});
2、获取属性 jQuery attr() 方法用于获取属性值。
$("button").click(function(){
alert($("#runoob").attr("href"));
});
获取id为rouoop中href属性的值
3、设置内容 - text()、html() 以及 val()
//设置内容
$(function () {
$("button#set_text").click(function () {
$("p#empty_text").text("我是被设置的文本");
});
});
//动态使用标签
$(function () {
$("button#set_html").click(function () {
$("p#empty_text").html("<b>hello world</b>");
});
});
4、text()、html() 以及 val() 的回调函数
//回调函数
$(function () {
$("button#text_callback").click(function () {
$("p#text").text(function (i, originText) {
return "origin:" + originText + ";新文本:" + "我是新添加的文本" + i;
});
});
});
$(function () {
$("button#html-callback").click(function () {
$("p#text").text(function (i, originText) {
return "origin:" + originText + ";新文本:" + "我是新添加的<b>hello</b>文本" + i;
});
});
});
设置属性:
//设置属性
$(document).ready(function () {
$("button#set_attr").click(function () {
$("a#jump2link").attr("href","https://www.baidu.com");
});
});
设置多个属性用,好分割开
attr() 的回调函数
$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
6、jQuery - 添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
append()在尾部添加元素 prepend()在头部添加元素
//添加元素
$(function () {
$("button#append_text").click(function () {
$("p#text_label").append("<b>在尾部添加的文本</b>");
});
});
$(function () {
$("button#append_list").click(function () {
$("ol#list").append("<li><b>添加到尾部的列表项</b></li>");
});
});
添加多个标签
function appendText()
{
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
after() 和 before() 方法
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
7、jQuery - 删除元素
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素(不包括备选元素)
删除指定的元素
$("p").remove(".italic"); //删除指定<p>class为italic的元素
8、jQuery - 获取并设置 CSS 类
1、jQuery 操作 CSS
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
1、addClass()给被选的元素添加一个class选择器,可以一次添加多个
2、removeClass()给被选元素删除一个class选择器
$(function () {
$("button.remove_class").click(function () {
$("h2#add_blue").removeClass("blue");
$("h3#add_red").removeClass("red");
});
});
3、toggleClass() 切换 addClass() removeClass()
$(function () {
$("button.toggle_class").click(function () {
$("h2,h3").toggleClass("red");
});
});
4、jQuery css() 方法
//css()
$(document).ready(function () {
$("button.get_css").click(function () {
var css = $("h2#add_blue").css("font-size");
alert("css_属性:"+css);
});
});
//设置css属性
$(document).ready(function () {
$("button.set_css").click(function () {
$("h2#add_blue").css("background-color","red");
});
});
//设置多个css{"":"","":""}
$("p").css({"background-color":"yellow","font-size":"200%"});
9、jQuery 尺寸
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth() 方法返回元素的宽度(包括内边距)。 +左右pandding
innerHeight() 方法返回元素的高度(包括内边距)。 +上下padding
outerWidth() 方法返回元素的宽度(包括内边距和边框)。 +左右padding+border
outerHeight() 方法返回元素的高度(包括内边距和边框)。 +上下padding+border
//使用width() height() 测量元素的宽高、
$(document).ready(function () {
$("button#measure_size").click(function () {
var txt = "";
txt+= "width:"+$("div#measure").width()+"</br>";
txt+= "height:"+$("div#measure").height()+"</br>";
txt+="inner_width:"+$("div#measure").innerWidth()+"</br>";
txt+="inner_height:"+$("div#measure").innerHeight()+"</br>";
txt+="out_width:"+$("div#measure").outerWidth()+"</br>";
txt+="out_height:"+$("div#measure").outerHeight();
$("div#measure").html(txt);
});
});
10、jQuery 遍历
它们用于向上遍历 DOM 树:
parent() 被选元素 上一级父元素
parents() 被选元素 所有的上级元素
parents("指定元素") 被选元素指定的上级元素
parentsUntil("指定元素") 被选元素和指定元素之间的父元素
//遍历上级标签
$(document).ready(function () {
$("span.child").parents("div.grad_parent").css({
"border":"1 solid red",
"background":"blue"
});
$("span.child").parentsUntil("div.parent").css({
"background":"red"
});
});
下面是两个用于向下遍历 DOM 树的 jQuery 方法:
children() children() 方法返回被选元素的所有 直接 子元素。
$(document).ready(function(){
$("div").children("p.1"); //过滤div直接子元素,返回<p>class属性为1的元素
});
find() 方法返回被选元素的 后代 元素,一路向下 直到 最后一个后代。
$(document).ready(function(){
$("div").find("span"); //返回div元素下所有的span子元素
});
$(document).ready(function(){
$("div").find("*"); //返回div元素下所有的子元素
});
jQuery 遍历 - 同胞(siblings)
在 DOM 树进行水平遍历:
siblings() 返回被选元素的所有同胞(拥有同一个父亲)元素。 siblings("p")过滤
next() 返回被选元素的下一个同胞元素。
nextAll() 返回被选元素的所有跟随的同胞元素。
nextUntil() 回介于两个给定参数之间的所有跟随的同胞元素
$(document).ready(function(){
$("h2").nextUntil("h6"); //h2 -- h6 之间
});
//下面与next相反
prev()
prevAll()
prevUntil()
first() 方法返回被选元素的首个元素。
$(document).ready(function(){
$("div p").first(); //返回收个 div+p元素
});
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。 索引从0开始
$(document).ready(function(){
$("p").eq(1); //返回索引为1的p元素 也就是第二个
});
filter() 匹配的元素会被返回。
$(document).ready(function(){
$("p").filter(".url"); //返回p元素中 class为url的所有元素
});
not() 方法返回不匹配标准的所有元素。 与filter相反
11、jQuery - AJAX
1、jQuery - AJAX load() 方法
语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
$("div#ajax").load("aaa.txt");
$("div#ajax").load("aaa.txt #p1"); //加载aaa.txt文档中 id为p1的标签到被选中元素
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
responseTxt - 包含调用成功时返回的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
2、jQuery - AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
GET POST区别
get()方法:通过 HTTP GET 请求从服务器上请求数据。
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
jQuery noConflict() 方法 释放 $ 标识符的控制,这样其他脚本就可以使用它了。
var jq = $.noConflict(); //替换$符号
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});