爱站程序员基地jQuery概念
jQuery是一个快速、简洁而且功能丰富的JavaScript库。宗旨：write less，do more，写更少的代码，做更多的事
jQuery和原生JavaScript的区别:
例如：
- 通过ID获取一个HTML元素JavaScript: var obj = document.getElementById(\”idname\”);
- jquery: var obj = $(\”idname\”);
- JavaScript：document.getElementById(\”id\”).style.display = \”none\”;
- JavaScript：document.getElementById(\”id\”).style.width = \”200px\”;
jQuery符号
– – – $ 符号
$ === jQuery
jQuery将所有的功能全部封装在一个全局变量jQuery中，而$是一个合法的变量名，他是jQuery的别名。
绝大多数时候，我们直接使用$
如果$符号变量占用，只能使用jQuery这个变量
[code]$(\'div\').addClass(\'div\');//<div class=\'div\'></div>jQuery(\'div\').addClass(\'div\');//两种形式是一样的
页面就绪函数
[code]//JavaScriptwindow.onload = function(){}//jQuery//原始格式$(document).ready(function(){ });//缩写形式$().ready(function(){ });//再缩写$(function(){ });
小案例：
-
[code]$(function(){$(\'button\').click(function(){$(\'p\').slideToggle();//点击按钮，下拉显示或上升隐藏});});
项目：照片墙案列
[code]$(function(){$(\'a\').click(function(){var Index = $(this).index();//当前索引//eq()根据索引，进行隐式迭代//css({\'属性名\':\'属性值\'})样式设置//siblings()除了当前的，其他所有的兄弟节点$(\'img\').eq(Index).css({\'opacity\':\'1\'}).siblings().css({\'opacity\':\'0\'});//链式结构语法});});
- html() 可以插入值 还可以解析html标签
- css() 可以添加css样式，可以改变css样式
- text() 可以插入文本但是不可以解析标签
[code]$(function(){var alinks = $(\'a\');//alinks是对象for(var i = alinks.length-1;i>=0;i--){//原生js//alinks[i].style.background=\'red\';//alinks[i].style.color=\'#fff\';//alinks[i].style.border=\'5px solid yellow\';//jQuery//eq()隐式迭代 获取每个jQuery对象alinks.eq(i).css({background:\'red\',color:\'#fff\',border:\'5px solid yellow\'}).html(\'<em>七彩云南\'+i+\'</em>\');//.text(\'云南旅游\'+i);}});
jQuery选择器
选择器是jQuery的核心 $(\”\”)
JavaScript：document.getElementById(\”dom-id\”);
jQuery：$(\”#dom-id\”);
返回的对象都是jQuery对象
类似数组，每一个元素都是引用了DOM节点的对象
基本选择器 $(\”选择器\”)
- #id 根据给定的id匹配一个元素 优先级最高，效率最高
- element 根据给定的元素标签名匹配所有元素 效率相对较差，建议使用
- .class 根据给定的css类名匹配元素 效率相对较差，建议使用id选择器是唯一的id
- 标签选择器可以获取一组标签
- 类型选择器可以根据选择不同，我可以选择相同返回一组。
- 尽量将id留给行为层js操作。 但是id优先级高于类选择器优先级
多项选择器
$(\”selector1,selector2,selector3\”)
将每一个选择器匹配到的元素合并到一起后返回
层级选择器
$(\”obj ele\”) 子孙后代选择器在给定的祖先元素下匹配所有的后代元素
$(\”obj>ele\”) 子选择器在给定的父元素下匹配所有的子元素 子选择器的效率相对较高
$(\”prev+next\”) 兄弟选择器匹配所有紧接在prev元素后面的一个next元素
$(\”prev~next\”) 匹配prev元素之后的所有的next元素
总结：兄弟选择器重点必须是同一级，兄弟关系，用的不特别多！
子选择器和直接子选择器相对较多！
属性选择器
[属性名] 属性名选择器
[属性名=属性值] 匹配该属性名=属性值的ele元素
[属性名！=属性值] 匹配不满足该属性名=属性值的所有ele元素
[属性名^=属性值] 匹配属性名的属性值中以。。。为开头的所有元素
[属性名$=属性值] 匹配属性名的属性值中以。。。结尾的所有元素
[属性名*=属性值] 匹配属性名的属性值中包含。。。的所有元素
[属性1][属性2][属性3] 联合属性选择器
过滤器
child
- ：first-child 第一个孩子
- ：last-child 最后一个孩子
- ：nth-child(n|even|odd) 第几个孩子
- ：nth-last-child(n|even|odd) 倒数第几个孩子
- ：only-child 独生子
总结：
1、 父元素下的直接子元素必须是某个元素，而且必须是指定第几个孩子
2、下标从1开始，而不是从0开始
type
- ：first-of-type 相一父元素下同类型中第一个孩子
- ：last-of-type 同类型中最后一个孩子
- ：nth-of-type(n|even|odd)
- ：nth-last-of-type(n|even|odd)
- ：only-of-type 同类型中唯一一个孩子
过滤器参数
- n 匹配元素的序号 必须是整数 从1开始
- even 匹配所有偶数元素
- odd 匹配所有的奇数元素
- formula 使用特殊公式（an+b）进行操作
表单元素
:input
可以选择<input> <textarea> <select>和<button>
:text
匹配所有的单行文本框，和input[type=\’text\’]一样
其他的input的type
:password/:radio/:checkbox/:image/:reset/:button/:file
表单状态
:enabled
匹配所有可用元素
:disabled
匹配所有不可用元素
:checked
匹配所有选中的被选中元素（复选框、单选框 select中的option）
:selected
匹配所有选中的option元素
查找和过滤
- find(expr | object | element) 搜索所有和指定表达式匹配的元素
- children() 取得一个包含的元素集合中每一个元素的（其父元素下的）所有子元素的元素集合
- parent() 取得一个包含的元素集合中唯一父元素的元素集合
- next()下一个 prev()上一个 取得一个包含匹配元素集合中每一个元素紧邻的后面（前面）的元素的元素集合
- eq(index | -index) 获取当前链式操作中的第N个jQuery对象（按索引匹配）
- 如果eq后面输入的是正数，那么从索引0开始数
- 如果eq后面输入的是负数，那么从-1开始数，就是倒数第几个
