jquery 中的选择器
id选择器
标签选择器
类选择器
多条件选择器
层次选择器
.val() 方法,小括号中写内容就是设置元素值
什么都不写获取元素值
.css()方法 ,小括号一个样式第一个是属性,第二个是参数,css(“background-color”,“red”);
多个属性用键值对的方式css(“backgroundColor”:“red”;“width”:“300px”);
.html() 设置显示标签以及内容
.text() 设置显示内容
索引选择器
eq(3) gl(3) lt(3)
jQuery操作样式
$("#ul>li").css(“backgronundColor”,“red”);
$("#ul>li").css(“fontSize”,“30px”);
var style = {
“backgroundColor”:“red”,
“fontSize”:“30px”};
$("#ul>li").css(style);
jquery操作类样式
$("#btn1").click(function () {
$("#div").addClass(“cls1”);//添加一个样式
$("#div").addClass(“cls1 cls2”);//添加多个样式
$("#div").removeClass(“cls1”);//移除某个样式
$("#div").removeClass();//移除多个样式}
$(“body”).toggleClass(‘cls’);
$('body").hasClass(“cls”);
链式编程
多行代码合并成一行代码,前提是此行代码返回的对象。对象.方法().方法().方法( )
end() 恢复到断链之前
获得兄弟元素的几个方法
next();
nextAll();
prev();
prevAll();
siblings();
jQuery动画
hide()方法
show() 方法参数可以是一个数字类型或者字符串类型 slow fast normal
hide(1000,function() {
alert(‘隐藏完毕’);});
show(1000,function() {
alert(‘显示完毕’);});
slideUp(1000);
slideDown(1000);
slideToggle(1000);
fadeIn(1000);
fadeOut(1000);
fadeToggle(1000);
fadeTo(1000,0.3);
animate方法
animate(键值对,时间,匿名函数);
animate({“width”:“300px”,“height”:“200px”},1000,function(){})
stop() 停止动画
jQuery中创建元素
$(" ")
var aobj = $(“百度”);
$(“div”).appdend(aobj);
appdend 在元素的末尾添加子元素
prepend 在元素开始添加子元素
after 在元素之后兄弟元素
before 在元素之前兄弟元素
append 方法可以把页面中的元素添加到其他标签中,添加的方式是移动
$(“div”).html("");//清空内容
$(“div”).empty();//清空内容
$(“div”).remove();//删除自己
clone();克隆标签自己
attr(“属性名”,“属性值”);
attr(“index”,1);
attr(“属性值”);获取属性值
获取值
offset().left;
offset ().top;
设置值
offset(“left”:200,“top”:300});
事件绑定
bind(“click”,function(){});
bind({“click”:function(){},“mouseover”:function(){}});
delegate()
参数3个 为父级元素的子元素绑定事件
1.要绑定事件的元素
2.要绑定的事件的名字
3.绑定事件的处理函数
on方法绑定事件
on方法:两个参数:1事件的名字,2函数
on三个参数:1事件的名字 2要绑定事件的元素 3函数 on是父级元素调用,目的:为子集元素去绑定元素
on 推荐使用
解绑事件
off()
off( “click”);
off(“事件1”,“事件2”) 解绑多个事件
off();全部解绑
unbind()
.delegate()
父级元素和子集元素都是通过正常绑定事件,通过off解绑父级元素,子集元素不会解绑
如果子集元素的通过父级元素调用delegate的方式,父级元素使用off,子父的相同事件被解除
事件触发
触发事件的时候在该事件内部调用了其他元素的某个事件方法
$(“div”).click();
$(“div”).trigger(“click”)
$(“div”).triggerHandler(“click”);
事件对象
currentTarget 绑定事件的对象
delegateTarget 代码绑定事件的对象
target 真正触发事件的对象
取消事件冒泡 + 取消默认事件
return false;
var xy = $.noConflict();//让jQuery对象进行释放控制权
插件的封装
$.fn.插件名 = function(){};