Java系列课程第三十七天 （jQuery）

Day37 jQuery

1.jQuery介绍
(1)、JavaScript与jQuery比较
js: 1、入口函数只有一个，window.onload
2、浏览器兼容性：非常令人头疼，比如textContent虽然作为标准方法但是只支持IE8+以上的浏览器
3、DOM错综复杂，实现简单的效果很麻烦
4、代码容错性差，出错后导致后面的代码不执行
jQuery: 1、市场占有率稳步上升，代码比较少，功能强大
2、DOM比较强大，事件处理，完全解决了浏览器的兼容性问题
3、ajax操作（比较好）
(2)、什么是jQuery
1、jQuery是一个JavaScript函数库。
2、jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
3、jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和HTML DOM 遍历和修改。
(3)、为什么使用jQuery
1、目前网络上有大量开源的 JS 库, 但是 jQuery 是目前最流行的 JS 库，而且提供了大量的扩展。
2、很多大公司都在使用 jQuery， 例如:Google、Microsoft、IBM、Netflix。
3、目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!
2.jQuery安装
1、从 jquery.com 下载 jQuery 库
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的

3. jQuery语法 (1)、基础语法 1、美元符号定义 jQuery 2、选择符（selector）"查询"和"查找" HTML 元素 3、jQuery 的 action() 执行对元素的操作。 (2)、实例 1、您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中： $(document).ready(function(){ // 开始写 jQuery 代码... } ); 2、简洁写法（与以上写法效果相同）: $(function(){ // 开始写 jQuery 代码... }) (3)、1.3.3了解jQuery的$符号 $是什么 其实$就是一个函数：$();参数不一样，功能不一样 $常用的几种情况： $(function() {});//参数是function，说明是入口函数 $(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素 $(“div”);//查找所有的div元素 $(document).ready(funciton(){})//将document转换成jQuery对象 (4)、jQuery 入口函数与 JavaScript 入口函数的区别 jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。 JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。  4.JQuery选择器 (1)、什么是jQuery选择器 1、jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 2、jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。 3、jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 4、jQuery 中所有选择器都以美元符号开头：$()。 (2)、基本选择器  (3)、层级选择器  (4)、过滤选择器  (5)、筛选选择器（方法）  5.jQuery事件 (1)、什么是事件 1、页面对不同访问者的响应叫做事件。 2、实例：在元素上移动鼠标、选取单选按钮、点击元素 (1)、事件语法 1、单击事件 $("p").click(function(){ // 动作触发后执行的代码!! }); 2、双击事件 $("p").dblclick(function(){ $(this).hide(); }) 3、鼠标进入 $("#p1").mouseenter(function(){ alert('您的鼠标移到了 id="p1" 的元素上!'); }); 4、鼠标离开 $("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); }); 5、获取焦点 $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); 6、失去焦点 $("input").blur(function(){ $(this).css("background-color","#ffffff"); });

jQuery效果与事件

1、jQuery css() 方法
(1)、jQuery css() 方法是什么
css() 方法设置或返回被选元素的一个或多个样式属性。
(2)、返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css(“propertyname”);
$(“p”).css(“background-color”);
(3)、设置CSS属性
如需设置指定的 CSS 属性，请使用如下语法：
css(“propertyname”,“value”);
$(“p”).css(“background-color”,“yellow”);
(4)、设置多个CSS属性
如需设置多个 CSS 属性，请使用如下语法：
css({“propertyname”:“value”,“propertyname”:“value”,…});
$(“p”).css({“background-color”:“yellow”,“font-size”:“200%”});
演示示例：jQuery CSS方法
课堂练习：元素的宽、高、文字颜色、背景图发生变化
2、jQuery css类
(1)、addClass()
向被选元素添加一个或多个类
.important { font-weight:bold; font-size:xx-large; }
.blue { color:blue; }
$(“button”).click(function(){
$(“h1,p”).addClass(“blue”);
$(“div”).addClass(“important”);
});
(2)、removeClass()
从被选元素删除一个或多个类
$(“button”).click(function(){ $(“h1,h2,p”).removeClass(“blue”); });
(3)、toggleClass()
对被选元素进行添加/删除类的切换操作
$(“button”).click(function(){ $(“h1,h2,p”).toggleClass(“blue”); });
(4)、eq()
方法返回带有被选元素的指定索引号的元素，索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。
$(selector).eq(index)
(5)、index()
index() 方法返回指定元素相对于其他同级元素的 index 位置。
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ion(){ alert((this).index());
});
(6)、not()
Not() 方法返回指定元素之外的元素。
$(“input”).not(".in1")
3、jQuery动画
(1)、jQuery隐藏显示
可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
$("#hide").click(function(){
$(“p”).hide();
});
$("#show").click(function(){
$(“p”).show();
});
可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$(“button”).click(function(){ $(“p”).toggle(); });
(2)、jQuery淡入淡出
fadeIn() 用于淡入已隐藏的元素， fadeOut() 方法用于淡出可见元素。
$(“button”).click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn(“slow”);
$("#div3").fadeOut(3000);
});
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
$(“button”).click(function(){ ("#div2").fadeToggle(“fast”);});
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$(“button”).click(function(){ $("#div1").fadeTo(“slow”,0.15);});
(3)、jQuery滑动
slideDown() 方法用于向下滑动元素， slideUp() 方法用于向上滑动元素。
$("#flip").click(function(){ $("#div1").slideDown(); $("#div1").slideUp();});
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
$("#flip").click(function(){ $("#panel").slideToggle(); });
(4)、jQuery自定义动画
animate() 方法用于创建自定义动画。可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。
$(“button”).click(function(){
$(“div”).animate({
left:‘250px’, opacity:‘0.5’, height:‘150px’, width:‘150px’
}); });
(5)、stop方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前，适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
$("#stop").click(function(){ $("#panel").stop(); });
(6)、回调函数
在当前动画 100% 完成之后执行。
$(“button”).click(function(){
$(“p”).hide(“slow”,function(){
alert(“段落现在被隐藏了”);
}); });
4、jQuery 事件机制
(1)、注册事件
bind() 、on() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。
$(“p”).bind(“click”,function(){
    alert(“这个段落被点击了。”);
}“dbClick”,function(){
    alert(“这个段落被双击了。”);
});
$(“p”).on(“click”,function(){ alert(“段落被点击了。”); });
(2)、委托事件
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
KaTeX parse error: Expected '}', got 'EOF' at end of input: …unction(){     (“p”).css(“background-color”,“pink”);
});
(3)、事件对象event
event对象有以下属性
type：事件类型，比如click。
which：触发该事件的鼠标按钮或键盘的键。
target：事件发生的初始对象。
data：传入事件对象的数据。
pageX：事件发生时，鼠标位置的水平坐标（相对于页面左上角）。
pageY：事件发生时，鼠标位置的垂直坐标（相对于页面左上角
$(“button”).click(function(event){
console.log(evet);
});
(4)、each()方法
each() 方法为每个匹配元素规定要运行的函数。
$(“button”).click(function(){
KaTeX parse error: Expected '}', got 'EOF' at end of input: …tion(){ alert((this).text())
});
});