JQuery
1.什么是JQuery
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。可以到http://www.bootcdn.cn/jquery/下载最新的jQuery。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。
2.引入方式
-
使用远程（cdn）
-
说明：
-
远程引入方式，//表示自适应协议
-
min版是代码压缩后的，不带空格换行;是工作版;不压缩的是开发，研究版(常用的压缩工具：Grunt，gulp)
-
使用jQuery一定要注明版本
-
使用方式：
jQuery(document) .ready(function(){
alert(123);
});//$ = jQuery
$(document).ready(function(){
alert(456);
});
$(function(){
alert(456);
}); -
$等于jQuery，代表jQuery对象
-
jQuery(document)是构造jQuery对象的方法
-
大部分方法都返回jQuery对象，所以可以串联操作
-
ready方法在DOM加载后执行，不加载资源（图片，文件等）,可以绑定多个方法
-
3.选择器
jQuery 中所有选择器都以美元符号开头：$()
-
标签选择器
在页面中选取所有元素:
$(“p”)示例： $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); -
id选择器
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器
通过 id 选取元素语法如下：
$("#test")示例： $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); -
类选择器
class选择器 语法如下：
$(".test")示例： $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); -
组合选择器
-
层级选择器
- ‘>’ 选中所有的儿子（不包括孙子）
- ‘+’ 选中紧邻的下一个指定类型的元素
- '~'选中后面所有同辈的兄弟
-
基本选择器（伪类选择器）
-
内容选择器
- has包含指定标签
- contains包含给定文本
- parent包含子元素或文本的元素
-
属性
attr主要针对标签的自定义属性
prop主要针对标签的固有属性 -
可见性
- hidden display是none，type的值是hidden
- visible 元素的visibility: hidden 或 opacity: 0被认为是可见的
-
子元素
- :first-child 第一个孩子必须是指定元素
-
表单
拓展
语法 描述
$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$(“p:first”) 选取第一个
元素
$(“ul li:first”) 选取第一个
- 元素的第一个
- 元素
$(“ul li:first-child”) 选取每个- 元素的第一个
- 元素
$("[href]") 选取带有 href 属性的元素
$(":button") 选取所有 type=“button” 的 元素 和 元素
$(“tr:even”) 选取偶数位置的 元素
jQuery和js的转换
//jQuery=>js对象
$('p')[0].style.color = 'red';
//js对象=>jQuery
var oBj = document.getElementById('bj');
$(oBj).css('font-size','50px');
//jQuer对象不能直接调用js中的属性和方法，只能掉jQuery的方法和属性
//
$('.nav input:eq(0)').click(function(){
$('.d1 input').prop('checked',true);
//在事件函数中,this代表的是js对象，$(this)是jQuery对象
$(this).siblings().prop('checked',false);
})
样式添加
- addClass 添加类名
-removeClass 移除类名
-toggleClass 切换类名
-attr 获取属性和设置属性（一般针对自定义的特性）
-prop 获取属性和设置属性(元素固有属性)
-val 获取输入框的值
-text 标签中的内容
-html
-css
-width
-height
-position
-index
-each 遍历
作业
1.将jQuery的所有方法、属性、选择器都给出一个实例
2.写一个省市县三级联动下拉框，当选择省的时候，自动生成市的下拉框的内容，当选择市的时候，自动生成县下拉框的内容。要求：
- 必须使用ajax请求
- 实现局部刷新
拓展
jQuery 语法
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions )
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
- $(this).hide() - 隐藏当前元素
- $(“p”).hide() - 隐藏所有
元素
- $(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
- $("#test").hide() - 隐藏所有 id=“test” 的元素
文档就绪事件
实例中的所有 jQuery 函数位于一个 document ready 函数中
$(document).ready(function(){
// 开始写 jQuery 代码...
});
简洁版：
$(function(){
// 开始写 jQuery 代码...
});
目的：这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作
jQuery 事件
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法
常见 DOM 事件：
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
hover
页面中指定一个点击事件：
$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
$("p").click(function(){
// 动作触发后执行的代码!!
});
常用的 jQuery 事件方法
click()
click() 方法是当按钮点击事件被触发时会调用一个函数
示例：
$("p").click(function(){
$(this).hide();
});
dblclick()
当双击元素时，会发生 dblclick 事件。
示例：
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
示例：
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件
示例：
$("#p1").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
示例：
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下！");
});
mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件
示例：
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
hover()
hover()方法用于模拟光标悬停事件
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
示例：
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
);
focus()
当元素获得焦点时，发生 focus 事件
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点
示例：
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
blur()
当元素失去焦点时，发生 blur 事件。
示例：
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
jQuery 效果
隐藏和显示
hide() 和 show()
使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法
$("button").click(function(){
$("p").toggle();
});
淡入淡出
jQuery 拥有下面四种 fade 方法：
-
fadeIn()
-
fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素语法: $(selector).fadeIn(speed,callback); $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); });
-
-
fadeOut()
-
fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。语法: $(selector).fadeOut(speed,callback); $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); });
-
-
fadeToggle()
-
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。语法:
$(selector).fadeToggle(speed,callback)$(“button”).click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle(“slow”);
$("#div3").fadeToggle(3000);
});
-
-
fadeTo()
-
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间
语法:
$(selector).fadeTo(speed,opacity,callback);
注意：fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）$("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); });
-
滑动
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
-
slideDown()
-
jQuery slideDown() 方法用于向下滑动元素
语法:
$(selector).slideDown(speed,callback);$("#flip").click(function(){ $("#panel").slideDown(); });
-
-
slideUp()
-
jQuery slideUp() 方法用于向上滑动元素
语法:
$(selector).slideUp(speed,callback);$("#flip").click(function(){ $("#panel").slideUp(); });
-
-
slideToggle()
-
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们
语法：
$(selector).slideToggle(speed,callback);$("#flip").click(function(){ $("#panel").slideToggle(); });
-
jQuery HTML
jQuery 拥有可操作 HTML 元素和属性的强大方法
DOM 操作
DOM = Document Object Model（文档对象模型)
DOM 定义访问 HTML 和 XML 文档的标准：
"W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。"
获得内容
text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
-
text() - 设置或返回所选元素的文本内容
$("#btn1").click(function(){
alert(“Text: " + $(”#test").text());
}); -
html() - 设置或返回所选元素的内容（包括 HTML 标记）
$("#btn2").click(function(){
alert(“HTML: " + $(”#test").html());
}); -
val() - 设置或返回表单字段的值
$("#btn1").click(function(){
alert(“值为: " + $(”#test").val());
});
获取属性
attr()）
jQuery attr() 方法用于获取属性值
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#runoob").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
</body>
</html>
设置内容和属性
-
text() - 设置或返回所选元素的文本内容
-
html() - 设置或返回所选元素的内容（包括 HTML 标记）
-
val() - 设置或返回表单字段的值
-
attr() - attr() 方法也用于设置/改变属性值
$("#btn1").click(function(){
$("#test1").text(“Hello world!”); #text()
});$("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); #html() }); $("#btn3").click(function(){ $("#test3").val("RUNOOB"); #val() }); $("button").click(function(){ $("#runoob").attr("href","http://www.runoob.com/jquery"); });
添加元素
-
append() - 在被选元素的结尾插入内容
$(“p”).append(“追加文本”); -
prepend() - 在被选元素的开头插入内容
$(“p”).prepend(“在开头追加文本”); -
after() - 在被选元素之后插入内容
$(“img”).after(“在后面添加文本”); -
before() - 在被选元素之前插入内容
$(“img”).before(“在前面添加文本”);
删除元素
需删除元素和内容，一般可使用以下两个 jQuery 方法：
-
remove() - 删除被选元素（及其子元素）
$("#div1").remove(); -
empty() - 从被选元素中删除子元素
$("#div1").empty();
获取并设置 CSS 类
jQuery 拥有若干进行 CSS 操作的方法
-
addClass() - 向被选元素添加一个或多个类
<h1>标题 1</h1> <h2>标题 2</h2> <p>这是一个段落。</p> <p>这是另外一个段落。</p> <div>这是一些重要的文本!</div> <br> <button>为元素添加 class</button> -
removeClass() - 从被选元素删除一个或多个类
$(“button”).click(function(){
$(“h1,h2,p”).removeClass(“blue”);
}); -
toggleClass() - 对被选元素进行添加/删除类的切换操作
$(“button”).click(function(){
$(“h1,h2,p”).toggleClass(“blue”);
}); -
css() - 设置或返回样式属性
css() 方法
返回 CSS 属性
语法：css("propertyname");
$("p").css("background-color");
设置 CSS 属性
语法：css("propertyname","value");
$("p").css("background-color","yellow");
设置多个 CSS 属性
语法：css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 遍历
图示解析：
-
元素是
- 的父元素，同时是其中所有内容的祖先。
-
- 元素是
- 元素的父元素，同时是
的子元素
- 左边的
- 元素是 的父元素，
-
的子元素，同时是
的后代。
-
的子元素，同时是
- 元素是
- 的子元素，同时是
-
和
的后代。
-
和
- 两个
- 元素是同胞（拥有相同的父元素）。
- 右边的
- 元素是 的父元素，
-
的子元素，同时是
的后代。
-
的子元素，同时是
- 元素是右边的
- 的子元素，同时是
-
和
的后代。
-
和
遍历 - 祖先
向上遍历 DOM 树：
-
parent()
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历$(document).ready(function(){ $("span").parent(); }); -
parents()
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()$(document).ready(function(){ $("span").parents(); }); -
parentsUntil()
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素$(document).ready(function(){ $("span").parentsUntil("div"); });
遍历 - 后代
向下遍历 DOM 树的 jQuery 方法：
-
children()
children() 方法返回被选元素的所有直接子元素
该方法只会向下一级对 DOM 树进行遍历$(document).ready(function(){ $("div").children(); }); -
find()
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代
$(document).ready(function(){
$(“div”).find(“span”);
});
------------------------------------
返回的所有后代
$(document).ready(function(){
$(“div”).find("*");
});
遍历 - 同胞
在 DOM 树进行水平遍历：
-
siblings()
siblings() 方法返回被选元素的所有同胞元素$(document).ready(function(){ $("h2").siblings(); }); -
next()
next() 方法返回被选元素的下一个同胞元素。
该方法只返回一个元素$(document).ready(function(){ $("h2").next(); }); -
nextAll()
nextAll() 方法返回被选元素的所有跟随的同胞元素$(document).ready(function(){ $("h2").nextAll(); }); -
nextUntil()
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素$(document).ready(function(){ $("h2").nextUntil("h6"); }); -
prev()
类似next（） -
prevAll()
类似nextAll（） -
prevUntil()
类似nextUntil()
遍历- 过滤
您基于其在一组元素中的位置来选择一个特定的元素
-
first()
$(document).ready(function(){
$(“div p”).first();
});
#选取首个元素内部的第一个元素
-
last()
$(document).ready(function(){
$(“div p”).last();
});
#选择最后一个元素中的最后一个元素
-
eq()
eq() 方法返回被选元素中带有指定索引号的元素$(document).ready(function(){ $("p").eq(1); }); #选取第二个 <p> 元素（索引号 1） 从0开始计算您选取匹配或不匹配某项指定标准的元素
-
filter()
#返回带有类名 "url" 的所有 <p> 元素 $(document).ready(function(){ $("p").filter(".url"); }); -
not()
#返回不带有类名 "url" 的所有 <p> 元素 $(document).ready(function(){ $("p").not(".url"); });
jQuery - AJAX 简介
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等
AJAX load() 方法
load() 方法从服务器加载数据，并把返回的数据放入被选元素中
- 语法:
$(selector).load(URL,data,callback);-
必需的 URL 参数规定您希望加载的 URL。
-
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
-
可选的 callback 参数是 load() 方法完成后所执行的函数名称
#把文件 “demo_test.txt” 的内容加载到指定的元素中<script> $(document).ready(function(){ $("button").click(function(){ $("#div1").load("/try/ajax/demo_test.txt"); }); }); </script> </head> <body> <div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div> <button>获取外部内容</button>
-
AJAX get() 和 post() 方法
get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据
$.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据
语法：
$.get(URL,callback);
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
#$.get() 的第一个参数是我们希望请求的 URL（"demo_test.php"）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
$.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据
语法:
$.post(URL,data,callback);
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.php")。
然后我们连同请求（name 和 url）一起发送数据。
1533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
