JQuery基础

1、概念
jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操做。css

$(document).ready(function(){写JQuery语句});
JS写在body中的时候全部语句写在上面里html

2、选择器
一、基本选择器
id:$("#div1")
class:$(".div1")
标签:$("p")
并列:$("#div1,#div2") 用,隔开
后代:$("#div1 p") 用空格隔开
二、过滤选择器
首个:$("#div1:first")
尾个:$("#div1:last")
任意一个:$("#div1:eq(索引)")或$("#div1").eq(索引)
大于:$("#div1:gt(索引)")
小于:$("#div1:lt(索引)")
排除:$("#div1:not(选择器)")
奇数索引:$("#div1:odd")
偶数索引:$("#div1:even")浏览器

属性名过滤:$(".div[aaa]")
属性值过滤:$(".div[aaa=2]")或$(".div[aaa!=2]")app

内容过滤:
文字 $("#div1:contains("字符串")")
子元素:$("#div1:has("选择器")")函数

3、事件
一、基本事件
JS中的事件去掉on
二、复合事件
hover(function(){},function(){}); 至关于移入和移除事件
toggle(function(){},function(){},function(){},...);点击时依次循环
三、事件冒泡
JQuery中执行完本次事件后,若是父级有事件,会接着执行父级事件
阻止事件冒泡:return false;this

4、DOM操做
一、操做属性
获取属性 var s=$(this).attr("属性名");
设置属性 $(this).attr("属性名","属性值");
删除属性 $(this).removeAttr("属性名");
二、操做样式
(1)操做内联样式
设置样式 $(this).css("属性名","属性值").css("属性名","属性值")...;
获取样式 $(this).css("属性名") 或者 $(this).offset spa

//返回偏移坐标:
$(selector).offset()
//设置偏移坐标:
$(selector).offset({top:value,left:value})
//使用函数设置偏移坐标:
$(selector).offset(function(index,currentoffset))

(2)操做样式表的class
添加class $(this).addclass("class名");
移除clsss $(this).removeclass("class名");
添加与移除交替 $(this).toggleclass("class名");
三、操做相关元素
(1)查找
父辈parent() 前辈parents(选择器)
子级children() 后代find(选择器)
哥 prev() prevAll(选择器)
弟 next() nextAll(选择器)
(2)操做
复制 clone()
新建 $("HTML字符串") 或者 var s="HTML字符串";
移除内部所有元素 empty()
移除元素自己 remove()
添加到内部 appen(JQuery对象)
添加到平级下面 after()
添加到平级上面 before()

四、操做内容
(1)表单元素
取值var ss=$("选择器").val();
赋值:$("选择器").val("值");
(2)非表单元素
取值var ss=$("选择器").html(); var ss=$("选择器").text();
赋值$("选择器").html("内容"); $("选择器").text("内容");
五、将来元素
(1) 对象.live("事件名",function(){})
(2) 动态添加到网页中的对象的事件不会执行,当写上将来元素才执行。code

相关文章
相关标签/搜索