jquery 基础教程[温故而知新二]

子曰：“温故而知新，可以为师矣。”孔子说：“温习旧知识从而得知新的理解与体会，凭借这一点就可以成为老师了。“ 尤其是咱们搞程序的人，不管是不是全栈工程师，都是集十八般武艺于一身。不过有时候有些知识如果有很久没用了的话，就会忘记，甚至是忘的你一点都想不起来，尤其是一些基础的东西。所以我才打算写个"温故而知新"的系列博文出来，一来是这些基础的东西我比较健忘，以后方便自己翻阅；二来是希望可以帮助到一些刚入门的朋友。这个系列记录的所有知识点都是最最最(重要的事情说三遍)基础的知识。大部分都是我学习的时候所积累的笔记。

温故而知新系列都是一些基础知识，大神可以直接跳过。

v写在前面

如果十八般武艺都融会贯通，如果什么兵器你都耍得有模有样，那么这篇博文你大可以跳过了。只是在忘记的时候，可以拿出来温习温习。

v基本概念

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

简单点一句话概括： Jquery不是一门独立的语言，是javascript的一个类库或框架

v各种选择器

1.基本选择器：

$("div")标记选择器
$(".div")类别选择器
$("#div")id选择器
$("*")通用选择器
$("div,.nav,#box")组合选择器

2.层次选择器：

$("div p")后代选择器 div里面所有的p
$("div>p")子选择器 div里面的下一级p
$("div+p")兄弟选择器下一个兄弟元素，div后面的p
$("div~p")div后面所有的兄弟元素，div后面所有的p

3.简单选择器：

$("div:first")找到第一个div
$("div:last")找到最后一个div
$("div:eq(index)")找到索引位置的div

4.内容选择器：

$("div:contains(文本内容)")找到包含文本内容的div

5.可见性选择器：

$("div:visible")找到所有显示的div元素
$("div:hidden")找到所有隐藏的div元素

6.属性选择器：

$("div[align]")具有align这个属性的div
$("div[align=right]")具有align这个属性且属性值是right的div

7.表单选择器：

$("div:input")找到div内所有的表单元素
$("div:checkbox")找到div内所有的复选框
$("div:radio")找到div内所有的表单选框
$("div:password")找到div内所有的密码框
$("div:text")找到div内所有的文本框
$("div:selected")找到div内所有被选中的下拉列表框

v过滤选择

first()找到第一个元素
last()找到最后一个元素
eq()找到索引值的元素
filter("条件")筛选
find()查找后代元素 =$("div p")
next()下一个兄弟元素 =$("div+p")
nextAll()后面所有的兄弟元素 =$("div~p")
prev()前一个元素
parent()父元素
not()除了...之外的

vJquery操作

1.操作属性：

对象.attr("属性名") 获取属性的值
对象.attr("属性名","属性值") 设置属性的值 ps:值得一提的是对于部分(radion等)表单元素设置属性值使用prop
对象.removeAttr("属性名") 移除属性

2.操作样式：

addClass()添加样式
removeClass()删除样式
toggleClass()切换样式
对象.css({"属性名":"属性值","属性名":"属性值"})

3.操作内容：

html()获取/改变非表单元素的其他标签的内容
text()获取/改变非表单元素的其他标签的文本内容
val（）获取/改变表单元素的value值

4.操作宽高：

width()获取/改变元素的宽
height()获取/改变元素的高

5.Jquery事件：

js的事件去掉on就是jquery的事件

vJquery DOM

1.DOM操作：

$("父对象").append("子对象")在父对象里向后追加子对象
$("父对象").prepend("子对象")在父对象里向前追加子对象
$("父对象").before("子对象")在父对象前面添加子对象
$("父对象").after("子对象")在父对象后面添加子对象

vJquery 其它

1.位置：

length() 获取元素的个数/长度
size()获取元素的个数/长度
index()获取同辈元素的索引位置，返回值是数值，从0开始
get()获取索引位置的元素，将jq的对象转成js对象

v博客总结

关于jquery 入门教程就写到这里，只是为了希望帮助到一些入门的朋友，或者一些像我这样健忘的人朋友恢复记忆。

作　　者：请叫我头头哥

出　　处：http://www.cnblogs.com/toutou/

关于作者：专注于微软平台的项目开发。如有问题或建议，请多多赐教！

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我

声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！