● 什么是jQuery?
○ 1、Jquery是一个javaScript函数库
○ 2、Jquery是一个轻量级的javaScript库
○ 3、jQuery库,包含HTML元素选取,HTML元素操作、css操作、HTML事件函数,JS特效HTML DOM 遍历和修改
● jQuery 入口函数与 JavaScript 入口函数的区别
○ 1、执行时机不同,jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
○ 2、执行次数不同,jQuery 的入口函数可以执行n次,且不会被覆盖,JavaScript 的 window.onload 事件只能执行一次,后面的会覆盖前面的
● jQuery语法
○ 1、美元符号定义jQuery
○ 2、选择符(selector)“查询"和"查找” HTML 元素
○ 3、jQuery 的 action() 执行对元素的操作。
○ $()常用的几种情况
○ $(function(){}) 参数是function说明是入口函数
○ $(‘’)参数是字符串,是 一个选择器
○
(
)
传
D
O
M
对象,返回的是
J
Q
u
e
r
y
对象●
j
Q
u
e
r
y
选择器○
(
1
)
、什么是
j
Q
u
e
r
y
选择器■
1
、
j
Q
u
e
r
y
选择器允许您对
H
T
M
L
元素组或单个元素进行操作。■
2
、
j
Q
u
e
r
y
选择器是
j
Q
u
e
r
y
为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:
j
Q
u
e
r
y
选择器返回的是
j
Q
u
e
r
y
对象。■
3
、
j
Q
u
e
r
y
选择器基于元素的
i
d
、类、类型、属性、属性值等
"
查找
"
(或选择)
H
T
M
L
元素。它基于已经存在的
C
S
S
选择器,除此之外,它还有一些自定义的选择器。■
4
、
j
Q
u
e
r
y
中所有选择器都以美元符号开头:
()传DOM对象,返回的是JQuery对象 ● jQuery选择器 ○ (1)、什么是jQuery选择器 ■ 1、jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 ■ 2、jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。 ■ 3、jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。 ■ 4、jQuery 中所有选择器都以美元符号开头:
()传DOM对象,返回的是JQuery对象●jQuery选择器○(1)、什么是jQuery选择器■1、jQuery选择器允许您对HTML元素组或单个元素进行操作。■2、jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。■3、jQuery选择器基于元素的id、类、类型、属性、属性值等"查找"(或选择)HTML元素。它基于已经存在的CSS选择器,除此之外,它还有一些自定义的选择器。■4、jQuery中所有选择器都以美元符号开头:()。
○ DOM对象转jq对象,$()传DOM对象,返回的是JQuery对象
○ JQuery对象转DOM对象,选择JQuery对象数组中的第几项就是DOM对象。
○ jQuery选择器的用法和css选择器用法一样。
○ 过滤选择器
■ :eq(index)
● $(“li:eq(2)”) 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。
● $(“li:lt(3)”) 获取到的li元素中,选择索引号为小于3的元素,索引号index从0开始。
■ :odd
● $(“li:odd”) 获取到的li元素中,选择索引号为奇数的元素,索引号index从0开始。
■ :even
● $(“li:even”) 获取到的li元素中,选择索引号为偶数的元素,索引号index从0开始。
○ 筛选选择器(方法)
用法 说明
总结:筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
● jQuery事件
$("p").click(function(){
// 动作触发后执行的代码!!
});
● jQuery css() 方法 传一个值返回,传两个设置属性
○ 返回属性
css("propertyname");
$("p").css("background-color");
设置属性
css("propertyname","value");
$("p").css("background-color","yellow");
设置多个属性值
css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery css类
● addClass()
● 向被选元素添加一个或多个类
.important { font-weight:bold; font-size:xx-large; }
.blue { color:blue; }
$("button").click(function(){
$("h1,p").addClass("blue");
$("div").addClass("important");
});
● removeClass()
● 从被选元素删除一个或多个类
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
● toggleClass()
● 对被选元素进行添加/删除类的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
● eq()
● 方法返回带有被选元素的指定索引号的元素,索引号从 0 开头,所以第一个元素的索引号是 0(不是 1)。
$(selector).eq(index)
● index()
● index() 方法返回指定元素相对于其他同级元素的 index 位置。
$("li").click(function(){
alert($(this).index());
});
● not()
● Not() 方法返回指定元素之外的元素。
$("input").not(".in1")
● jQuery动画
● jQuery隐藏显示
● 使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
● 可以使用 toggle() 方法来切换 hide() 和 show() 方法。
//使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
$('.hideBtn').click(function () {
$('li').hide();
})
$('.showBtn').click(function () {
$('li').show();
})
//可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$('.cutBtn').click(function () {
$('li').toggle();
})
● jQuery淡入淡出
● fadeIn() 用于淡入已隐藏的元素, fadeOut() 方法用于淡出可见元素。
● fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
//jQuery淡入淡出
//fadeIn() 用于淡入已隐藏的元素, fadeOut() 方法用于淡出可见元素。
$('.fadeInBtn').click(function () {
$('li').fadeIn();
})
$('.fadeOutBtn').click(function () {
$('li').fadeOut();
})
//fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
$('.cutBtn').click(function () {
// $('li').toggle();
$('li').fadeToggle();
})
fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
});
● jQuery滑动
● slideDown() 方法用于向下滑动元素, slideUp() 方法用于向上滑动元素。
$("#flip").click(function(){
$("#div1").slideDown();
$("#div1").slideUp();
});
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
$("#flip").click(function(){
$("#panel").slideToggle();
});
● jQuery自定义动画
● animate() 方法用于创建自定义动画。可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
},speed,callback函数;
});
● stop方法
● jQuery stop() 方法用于停止动画或效果,在它们完成之前,适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
$("#stop").click(function(){
$("#panel").stop();
});
● 回调函数
● 在当前动画 100% 完成之后执行。
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
● jQuery 事件机制
● 动态绑定 on(),bind(),delegate()
● 注册事件
○ bind() 、on() 方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。
$("p").bind("click",function(){
alert("这个段落被点击了。");
});
$("p").bind("dbClick",function(){
alert("这个段落被双击了。");
});
//动态绑定,在事件后面加上事件源
//注意两个对象要有父类和后代的关系
$("ul").on("click",'li',function(){
alert("li被点击了。");
});
● 委托事件
● delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数
//动态绑定元素,要绑定的元素要写在事件前面
$("div").delegate("p","click",function(){
$("p").css("background-color","pink");
});
● each()方法
● each() 方法为每个匹配元素规定要运行的函数。
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
● jQuery 对HTML的设置与捕获
● jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
● (1)、html()
● html() - 设置或返回所选元素的内容(包括 HTML 标记)。传值就是设置不传值就是返回内容
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
● (2)、text()
● text() - 设置或返回所选元素的文本内容 传值就是设置不传值就是返回内容
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
● (3) 、val()
● val() - 设置或返回表单字段的值 应用场景密码框
$("#btn1").click(function(){
alert("值为: " + $("#test").val());
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
● (4) 、text()、html() 以及 val() 的回调函数
● 上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return"旧文本: " + origText + "新文本: Hello world! (index: " + i + ")";
});
});
● 5) 、attr()、prop()
● attr() 、prop()方法用于获取和返回属性值。 attr()可以设置自定义属性
$("button").click(function(){
alert($("#runoob").attr("href"));
});
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});
● 具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr();.attr不仅可以返回(设置)元素的原生属性,还可以返回(设置)自定义属性。
● jQuery 对HTML的页面尺寸操作
○ (1) width() 和 height() 方法
○ width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
○ height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
$("button").click(function(){
"div 的宽度是: " + $("#div1").width() + "</br>";
"div 的高度是: " + $("#div1").height(20);
});
● (2) 、innerWidth() 和 innerHeight() 方法
○ innerWidth() 方法返回元素的宽度(包括内边距)。
○ innerHeight() 方法返回元素的高度(包括内边距)。
$("button").click(function(){
"div 宽度,包含内边距: " + $("#div1").innerWidth();
"div 高度,包含内边距: " + $("#div1").innerHeight();
});
● (3) 、outerWidth() 和 outerHeight() 方法
○ outerWidth() 方法返回元素的宽度(包括内边距和边框)。
○ outerHeight() 方法返回元素的高度(包括内边距和边框)。
$("button").click(function(){
txt+="div 宽度,包含内边距和边框: " + $("#div1").outerWidth()
txt+="div 高度,包含内边距和边框: " + $("#div1").outerHeight();
});
● (4) 、scrollTop() 和 scrollLeft() 方法
○ scrollTop() 方法设置或者返回滚动条被卷去的元素的高度
○ scrollLeft() 方法设置或者返回滚动条被卷去的元素的宽度
$("button").click(function(){alert($("div").scrollTop()); });
● jQuery添加元素和删除元素
○ (1) 、append()方法
○ append() 方法在被选元素的结尾插入内容(仍然在该元素的内部)
$("ol").append("<li>追加列表项</li>");
● (2) 、prepend() 方法
○ prepend() 方法在被选元素的开头插入内容。
$("ol").prepend("<li>追加列表项</li>");
● (3) 、after() 和 before() 方法
○ jQuery after() 方法在被选元素之后插入内容。
○ jQuery before() 方法在被选元素之前插入内容。
$("img").before("<b>之前</b>");
$("img").after("<i>之后</i>");
● 4) 、删除元素/内容
○ remove() - 删除被选元素(及其子元素)
○ empty() - 从被选元素中删除子元素
○ empty()仅仅删除元素的文本,占有位置,不显示在页面,但是DOM节点并没有删除
○ remove()把整个dom节点删除掉,,不占有位置