jQuery
初始jQuety
1.jquery的引用: 就是一个js文件,直接引入js外部样式 <script src="jquery库文件" type="text/javascript"></script>
2.jquery语法结构: $(selector).action() selector:选择器 action():方法
选择器 例:$(document).ready() $(".className") $("#idName") $("div")
3.常见API方法:
a:.css("styleName","value")添加单个样式 .css({"styleName":"value","styleName":"value"...})添加多个样式
b:.html(value)更改或获取元素文本内容
c:.addClass("className")引用现有类样式
d:.show() 显示元素块
e:.hide() 隐藏元素块
4.javascript 和 jquery的互相转换:
a:js 转 jquery 格式: var $obj = $(js对象)
b:jquery 转 js对象 格式: var obj = $(js对象)[下标]5
5.jquery 中 this的运用: 一般jquery中事件操作自己时会用到 只会使用$(this) this代表的是js对象;
jQuery选择器
1.基本选择器
a:标签选择器:$("tagName")
b:类选择器:$(".className")
c:ID选择器:$("#idName")
d:全局选择器:$("*")
e:并集选择器:$("tagName,.className,#idName")
2.层次选择器
a:后代选择器:$("body div")
b:子选择器:$("body>div")
c:相邻元素选择器:$("div+img")
d:同辈元素选择器:$("div~img")
3.属性选择器
a:选取包含指定属性的元素:$("[attribute]")
b:选取包含指定属性是指定值的元素:$("[attribute=value]")
c:选取包含指定属性不是指定值的元素:$("[attribute!=value]")
d:选取包含指定属性以指定值结尾的元素:$("[attribute$=value]")
e:选取包含指定属性以指定值开始的元素:$("[attribute^=value]")
f:选取包含指定属性包含指定值的元素:$("[attribute*=value]")
g:复合属性选择器:$("p[name=first].className#idName") ***不包含空格的写法,要满足多个条件,如果有空格就是后代选择器了***
4.基本过滤选择器
a:选取第一个元素 : $("div:first")
b:选最最后一个元素 : $("div:last")
c:选取除去某个元素以外的元素 : $("div:not(.class)") 注意:括号里填元素
d:选取索引是偶数的所有元素 : $("div:even")
e:选取索引是基数的所有元素 : $("div:odd")
f:选取指定索引号的元素 : $("div:eq(0)")
g:选取大于指定索引号的元素 : $("div:gt(0)")
h:选取小于指定索引号的元素 : $("div:lt(0)")
i:选取所有标题元素 : $(":header") 例如:h1~h6
j:选取当前获取焦点的元素 : $(":focus")
k:选择所有动画元素 : $(":animated")
5.可见性选择器
a:选取所有可见的元素 : $(":visible")
b:选取所有隐藏的元素 : $(":hidden")
6.内容选择器
a: 选取包含指定文本内容的所有元素 : $(":contains(text)")
b: 选取所有不包含子元素和文本的元素 : $(":empty")
c: 选取包含指定元素的元素 : $(":has(selector)")
d: 匹配含有子元素或者文本的元素 : $(":parent")
7.子元素选择器
a: 选取所有后代的第几个子元素 : $("div:nth-child(index)")
b: 选取所有后代的第一个子元素 : $("div:first-child") 区别: :first 只选取第一个子元素
c: 选取所有后代的最后的子元素 : $("div:last-child") 区别: :last 只为第一个子元素匹配
d: 选取只包含一个子元素的元素 : $("ul:only-child") 如果ul中包含第二个子元素 ,那它不会被选中
8.表单选择器
a:选中所有的表单元素 $("::input")
b:选中所有的文本表单元素 $(":text")
... ... 剩下的同理.查阅API帮助文档
9.表单对象属性选择器
a:可用的表单元素 $(":enabled")
b:不可用的表单元素 $(":disabled")
c:被选中的表单元素 $(":checked")
d:匹配所有选中的option元素 : $(":selected")
阶段小结:
a:<转义字符>:
用处:字符串中,用到了某些特殊含义的字符作为字符串的一部分时
java中 : 用 例如:
xml中 : 用 & 例如:< >
html中 : 和 xml 一样
jQuery : 用 \ 例如:\#a
b:<选择器的书写规范>:
选择器的书写规范很严格,多一个和少一个空格的效果都不一样,都会影响实际的选择
---多一个空格 代表后代 少一个空格 代表并且---
前言:jQuery操作DOM时分为三类:DOM-core(核心),HTML-DOM和CSS-DOM
1.样式操作 a:设置和获取 : 设置 css() 单个添加用, 多个添加用{: , :} 前面有提到 获取 css(name) 返回value值 b:添加和移除 : 添加 addClass("className") 移除 removeClass("className")。
c:切换样式 : toggleClass("className")
d:判断是否包含样式 : hasClass("className") 返回值:布尔
2.HTML 代码操作
a:获取和更改HTML代码 : html() 无参,返回值是HTML代码 html("content") 有参,更改HTML代码
b:获取和更改标签内容 : text() 无参,返回值是text文本内容 text("content") 有参,更改text文本内容
c:获取和更改属性值 : val() 无参,获取属性值 val("value") 有参,设置value值
3.节点的操作
a:查找节点: $(selector) 各种选择器,之前已经学习过了
b:创建节点: 语法:$(html) 例:var $newNode = $("<p></p>");
c:插入节点:
c.a:父子添加:
c.a.1 加到最后Father.append(Son) 或 Son.appendTo(Father)
c.a.2 加到首位Father.prepend(Son) 或 Son.prependTo(Father)
c.b:同辈添加:
c.b.1 加到旧元素后面 old.after(new) 或 new.insertAfter(old)
c.b.2 加到旧元素之前 old.before(new) 或 new.insertBefore(old)
d:删除节点: 语法:remove() 例子:删除A元素 A.remove() 语法:empty() 例子:清空A的所有子节点 A.empty()
e:替换节点: 语法:replaceWith() 例子:用B替换A A.replaceWith(B) 语法:replaceAll() 例子:B替换所有的A B.replaceALL(A)
f:复制节点: 语法:clone() 例子:克隆A节点 A.clone(boolean) 返回一个新节点 传参:true 复制所有包括事件 false 不克隆事件
4.属性的操作:
a:获取属性值: 语法:attr("attrName") 例如:var value=attr("href")
b:设置属性值: 语法:单个attr("attrName","value"),多个attr({"attrName":"value","attrName":"value"})
c:删除属性 : 语法:removeAttr("attrName")
5.遍历子元素
a:查询子元素 : children() 无参,返回所有的子元素集合 有参,填选择器,找指定标签的子元素
b:查询后代元素 : find(selector) 找到后代中的某个或某些-指定元素
6.遍历同辈元素
a:查找弟弟 : next() 直系弟弟元素
b:查找哥哥 : prev() 直系哥哥元素
c:查找所有兄弟 : siblings() 包括哥哥们和弟弟们
7.遍历前辈元素
a:查找父亲 : parent() 父元素
b:查找祖先元素 : parents() 所有祖先元素,直到html根元素
8.其他遍历方法
a:显示迭代 : each() 方法 区别于 隐式迭代
b:end() 方法 结束链式操作改变的元素集,返回最近的上一个元素集状态,样式操作不影响
9.CSS-DOM 操作
a:设置或返回匹配元素的样式属性 : css()
b:返回匹配元素的高度属性 : height()
c:返回匹配元素的宽度属性 : width()
d:返回匹配元素的top和left坐标 : offset()
e:返回最近的已定位祖先元素 : offsetParent()
f:返回第一个匹配元素相对于父元素的位置 : position()
g:设置或返回匹配元素相对滚动条顶部的偏移 : scrollTop()
h:设置或返回匹配元素相对滚动条左侧的偏移 : scrollLeft()。
jQuery中的事件