jQuery基本学习内容
一.使用jQuery:
1.导入jQuery包
2.入口函数
$(function(){
});
二.jQuery选择器
1.基本选择器
-
$("#id/class/标签名")
-
$(“p,div,#id,.class”)并集选择器
-
$(“div.redclass”)交集选择器 (div标签和redclass的交集)
2.层次选择器
-
$(“ul>li”)子代选择器
-
$(“ul li”)后代选择器
3.过滤选择器
-
$(“li:eq(2)”)li数组中索引号为2的元素
-
$(“li:odd”)索引号为奇数的li元素
-
$(“li:even”)索引号为偶数的li元素
4.筛选选择器
-
$(“ul”).children(“li”) ul元素的子代元素li
-
$(“ul”).find(“li”) ul元素的后代元素li
-
$("#first").siblings(“li”) 查找兄弟元素,不包括自己
-
$("#first").parent() 查找父级元素
-
$(“li”).next() 下一个元素
-
$(“li”).prev() 上一个元素
三.方法
1.dom操作:通过id查找对象,返回一个对象
document.getElementById(id); 通过标签名查找对象,返回一个或者多个document.getElementsByTagName(name); 通过类名查找对象,返回一个或者多个对象
document.getElementsByClassName(names);
2. jQuery查找对象
jQuery("#id,.class,标签名");
$("#id,.class,标签名");
3.基本操作
- .click()单击
- .ready()加载
- .css( ‘propert’,‘value’)设置元素的单个样式
- .css({‘propert1’,‘value1’
‘propert2’,‘value2’}); 设置元素的多个样式 - .mouseenter();鼠标进入
- .mouseleave();鼠标离开
- .text(‘some text’)设置文本内容
- .val()获取表单的value值
- .val(text)设置表单的value值
- .hasClass(‘classname’)判断是否存在classname**
- .addClass(‘class_name’)添加类
- .removeClass(‘class name’)删除类
- obj.addClass(‘class_name’)给对象添加class_name样式
- obj.removeClass(‘class name’)给对象删除class_name样式
- obj.hasClass(‘className’)判断对象是否有class_name样式,返回true或false
- .index(selector/element)获取某个元素的索引号
- .eq(index)通过索引号获取某个元素
- .show(speed,callback)显示
- .hide(speed,callback)隐藏,其参数与show一致
- .slideUp()滑入(隐藏),参数与show一致
- .slideDown()滑出 (显示),参数与show一致
- .slideToggle()切换滑入滑出效果,参数与show一致
- //callback:动画效果执行完成后的回调函数
- .fadeIn(speed,callback)淡入(隐藏),参数与show一致
- .fadeOut(speed,callback)淡出 (显示),参数与show一致
- .fadeToggle(speed,callback)切换淡入淡出效果参数,与show一致
- .fadeTo(speed,opacity,callback):使用渐进的方式实现透明度
- .stop()
4.动画
-
animate({params}, speed,callback)自定义动画
-
params{}样式队
-
speed:slow/narmal/fast/500
-
opacity:透明度0-1(0.5)
-
fadeTo(speed,opacity,callback):使用渐进的方式实现透明度
层次动画 //单击显示图片 $("#btn1").click(function(){ $("div>img:first").show(1000,function f1(){ $(this).next().show(1000,f1); }); }); //单击隐藏图片 $("#btn2").click(function(){ $("div>img:last").hide(1000,function f1(){ $(this).prev().hide(1000,f1); }); });
5.删除
empty();删除所有子节点
remove();删除所有子节点和自己
$(“div”).remove();//将div也删除
删除div中的p
$(“div”).children(“p”).remove();
6.复制
//单击按钮把p标签div1复制到div2
//
(
"
.
d
i
v
1
p
"
)
.
a
p
p
e
n
d
T
o
(
(".div1 p").appendTo(
(".div1p").appendTo((".div2"));//剪切
(
"
.
d
i
v
1
p
"
)
.
c
l
o
n
e
(
)
.
a
p
p
e
n
d
T
o
(
(".div1 p").clone().appendTo(
(".div1p").clone().appendTo((".div2"));//复制
//
(
"
.
d
i
v
2
"
)
.
a
p
p
e
n
d
(
(".div2").append(
(".div2").append((".div1 p"));//剪切
7.添加
单击按钮在div中添加a标签
//1.append(‘Some text’)像元素内部追加内容
//元素.append(‘内容’)
//2.appendTo(‘selector’)将内容主动添加到元素内部
//内容.appendTo(‘元素’)
//3.prepend(‘Some text’)像元素最前一行追加内容
//4.prependTo(‘selector’)像元素最后一行追加内容
//5.before(‘内容’)像元素之前追加内容;
//6.after(‘内容’)像元素之后追加内容;
8.事件绑定
//链式编程,对象不停的调用方法
对象.方法().方法.方法().方法
// bind方法注册事件
//事件源.bind(事件名称,事件处理程序)
bind链式编程
bind键值对
//使用绑定事件,如果先创建子元素,再为这个元素绑定事件,那么后面添加的子元素没有绑定这个事件。
//使用bind绑定事件,如果先创建子元素,再为这个元素绑定事件,那么后面 添加的子元素没有绑定这个事件。
解绑事件
//解绑原则:被什么方法绑定,就要使用像对应的方法解绑
//如果使用.click方法绑定事件,就要使用unbind解绑。
//父元素.delegat(‘子元素’,‘事件名称’,事件处理程序);为父元素下面的所有子元素绑定事件
//使用delegate绑定事件,如果先创建子元素,再为这个元素绑定事件,那么后面添加的子元素都有绑定这个事件。
//解绑事件undelegate
$("#btn1").click(function(){
//解绑div所有子元素的所有事件
$("#dv").undelegate();
//解绑div的p中所有事件
$("#dv").undelegate(“p”,"");
//解绑div的p的click事件
$("#dv").undelegate(“p”,“click”);
//解绑div的p的click 和mouseenter事件
$("#dv").undelegate(“p”,“click mouseenter”);
});
//元素.on(“事件名称”,“事件处理程序”):on注册简单事件
//使用on绑定事件,如果先创建子元素,再为这个元素绑定事件,那么后面 添加的子元素都有绑定这个事件
//解绑事件off
$("#btn1").click(function(){
//解绑父元素和子元素的所有事件
$("#dv").off();
//解绑父元素和子元素的click事件
$("#dv").off(“click”);
//解绑p标签的所有事件
$("#dv").off("",“p”);
//解绑子元素所有事件
$("#dv").off("",“p”);
//解绑p的click 和mouseenter事件
$("#dv").off(“click mouseenter”,“p”);
});
9.元素卷曲值
//单击按钮使dv高度和宽度为原来的两倍
// $("#dv").css(‘width’,w2=“px”);
$("#dv").css(‘height’,h2=“px”);
// $("#dv").width(w2+“px”);
$("#dv").height(h2+“px”);
//width(数值)/height(数值),可以设置元素的宽度和高度
//scrollLeft:向左面卷曲的值scrolltop:向上面卷曲的值
//scrollWidth:元素内容中实际的宽度scrollHeight:元素内容中实际的高度