Jquery入门
1.什么是jquery
jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率。
2.如何使用jquery
首先要引入jquery
<script src=jquery.js></script>
3.jquery的入口函数
$(document).ready(function() { 这里写要执行的函数 })
下面这个是js的入口函数 windows.onload = function(){ }
4.jquery和dom的转换
var btn = document.getElementById(#btn)
dom var $btn1 = $(btn) //把dom转换为jquery var
$btn = $(#btn) //jquery
var btn1 = $btn[0] // 把jquery转换为dom
5.jquery的一般选择器
ID选择器使用# 如 $(#btn) 选择id为btn的元素
类选择器使用. 如 $(.btn) 选择classname为btn的元素
6.jquery的层级选择器
标签选择器 $(li) 选择所有的li标签 多个选择器中间用逗号隔开
后代选择器 包含子子孙孙 $(ul li) 表示ul标签后面的所有li标签
子代选择器,只包含儿子 $(ul>li) 表示ul标签下的第一层li标签
* | $(*) | 所有元素 |
---|---|---|
#id | $(#lastname) | id=lastname 的元素 |
.class | $(.intro) | class=intro 的所有元素 |
.class,.class | $(.intro,.demo) | class 为 intro 或 demo 的所有元素 |
element | $(p) | 所有p元素 |
el1,el2,el3 | $(h1,div,p) | 所有h1,div,p元素 |
:first | $(p:first) | 第一个p元素 |
:last | $(p:last) | 最后一个p元素 |
:even | $(tr:even) | 所有偶数元素 |
:odd | $(tr:odd) | 所有奇数元素 |
:first-child | $(p:first-child) | 属于其父元素的第一个子元素的所有元素 |
:first-of-type | $(p:first-of-type) | 属于其父元素的第一个元素的所有元素 |
:last-child | $(p:last-child) | 属于其父元素的最后一个子元素的所有元素 |
:last-of-type | $(p:last-of-type) | 属于其父元素的最后一个元素的所有元素 |
:nth-child(n) | $(p:nth-child(2)) | 属于其父元素的第二个子元素的所有元素 |
:nth-last-child(n) | $(p:nth-last-child(2)) | 属于其父元素的第二个子元素的所有元素,从最后一个子元素开始计数 |
:nth-of-type(n) | $(p:nth-of-type(2)) | 属于其父元素的第二个元素的所有元素 |
:nth-last-of-type(n) | $(p:nth-last-of-type(2)) | 属于其父元素的第二个元素的所有元素,从最后一个子元素开始计数 |
:only-child | $(p:only-child) | 属于其父元素的唯一子元素的所有元素 |
:only-of-type | $(p:only-of-type) | 属于其父元素的特定类型的唯一子元素的所有元素 |
parent > child | $(div > p) | 元素的直接子元素的所有元素 |
parent descendant | $(div p) | 元素的后代的所有元素 |
element + next | $(div + p) | 每个元素相邻的下一个元素 |
element ~ siblings | $(div ~ p) | 元素同级的所有元素 |
:eq(index) | $(ul li:eq(3)) | 列表中的第四个元素(index 值从 0 开始) |
:gt(no) | $(ul li:gt(3)) | 列举 index 大于 3 的元素 |
:lt(no) | $(ul li:lt(3)) | 列举 index 小于 3 的元素 |
:not(selector) | $(input:not(:empty)) | 所有不为空的输入元素 |
:header | $(:header) | 所有标题元素 |
:animated | $(:animated) | 所有动画元素 |
:focus | $(:focus) | 当前具有焦点的元素 |
:contains(text) | $(:contains(’Hello’)) | 所有包含文本 Hello 的元素 |
:has(selector) | $(div:has(p)) | 所有包含有元素在其内的元素 |
:empty | $(:empty) | 所有空元素 |
:parent | $(:parent) | 所有是另一个元素的父元素的元素 |
:hidden | $(p:hidden) | 所有隐藏的元素 |
:visible | $(table:visible) | 所有可见的表格 |
:root | $(:root) | 文档的根元素 |
:lang(language) | $(p:lang(de)) | 所有带有以 de 开头的 lang 属性值的元素 |
[attribute] | $([href]) | 所有带有 href 属性的元素 |
[attribute=value] | $([href=’default.htm’]) | 所有带有 href 属性且值等于 default.htm 的元素 |
[attribute!=value] | $([href!=’default.htm’]) | 所有带有 href 属性且值不等于 default.htm 元素 |
[attribute$=value] | $([href$=’.jpg’]) | 所有带有 href 属性且值以 .jpg 结尾的元素 |
[attribute=value] | $([title=’Tomorrow’]) | 所有带有 title 属性且值等于 ‘Tomorrow’ 或者以‘Tomorrow’ 后跟连接符作为开头的字符串 |
[attribute^=value] | $([title^=’Tom’]) | 所有带有 title 属性且值以 Tom 开头的元素 |
[attribute~=value] | $([title~=’hello’]) | 所有带有 title 属性且值包含单词 hello 的元素 |
[attribute*=value] | $([title*=’hello’]) | 所有带有 title 属性且值包含字符串 hello 的元素 |
:input | $(:input) | 所有 input 元素 |
:text | $(:text) | 所有带有 type=text 的 input 元素 |
:password | $(:password) | 所有带有 type=password 的 input 元素 |
:radio | $(:radio) | 所有带有 type=radio 的 input 元素 |
:checkbox | $(:checkbox) | 所有带有 type=checkbox 的 input 元素 |
:submit | $(:submit) | 所有带有 type=submit 的 input 元素 |
:reset | $(:reset) | 所有带有 type=reset 的 input 元素 |
:button | $(:button) | 所有带有 type=button 的 input 元素 |
:image | $(:image) | 所有带有 type=image 的 input 元素 |
:file | $(:file) | 所有带有 type=file 的 input 元素 |
:enabled | $(:enabled) | 所有启用的 input 元素 |
:disabled | $(:disabled) | 所有禁用的 input 元素 |
:selected | $(:selected) | 所有选定的 input 元素 |
:checked | $(:checked) | 所有选中的 input 元素 |
Jquery入门
http://www.jcwit.com/article/228/