jQery

jQuery
jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，使用 jQuery 将极大的提高编写 javascript 代码的效率,帮助开发者节省了大量的工作,让写出来的代码更加优雅, 更加健壮，“如虎添翼”. 同时网络上丰富的 jQuery 插件也让我们的工作变成了"有了 jQuery,一切 soeasy."–因为我们已经站在巨人的肩膀上了。
jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多 JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery已经成为最流行的 javascript 框架，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。
一、jQuery 的下载和安装

1. 官网
   http://jquery.com/ 下载
2. 版本
   jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下载 1.X)
   （1）完整版 : jquery-2.1.4.js -->学习版本(学习源码 想高手学习是最好学习方法)
   （2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)
3. 优点
   （1）提供了强大的功能函数
   （2）解决浏览器兼容性问题
   （3）实现丰富的 UI 和插件
   （4）纠正错误的脚本知识
   太多了! 等待我们一一去发现…
4. 安装
   在页面引入即可
   四、jQuery选择器
   和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。 只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以 jQuery 包装集的形式返回。
   jQuery 选择器按照功能主要分为"选择"和"过滤"。 并且是配合使用的，具体分类如下。基础选择器掌握即可 ,其他用到再查阅。
5. 基础选择器 Basics（掌握即可） 选择器 名称 举例 id选择器 #id $("#testDiv")选择id为testDiv的元素 元素名称选择器 element $(“div”)选择所有div元素 类选择器 .class $(".blue")选择所有class=blue的元素 选择所有元素 * $("*")选择页面所有元素 组合选择器 selector1, selector2, selectorN $("#testDiv,span,.blue")同时选中这几个选择器匹配的元素

id选择器1 span中的内容

元素选择器

样式选择器

dom：innerHTML="…"，innerText="…"
jquery： .html("…")，.text("…")
2. 层次选择器Hierarchy 选择器 名称 举例 后代选择器 ancestor descendant $("#parent div")选择id为parent的元素的所有div元素 子代选择器 parent > child $("#parent>div")选择id为parent的直接div子元素 相邻选择器 prev + next $(".blue + img")选择css类为blue的下一个img元素 同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素

层次择器

父选择器

子选择器

选择器2

选择器2中的div

var child = KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲parent>div'); c…(this).text()); }); console.log("=====相邻选择器="); var pre_next = $(".gray + img"); console.log(pre_next.length); console.log("=====同辈选择器,其后，（弟弟）="); var pre_siblings = $(".grayimg");console.log(pr{e}_{s}iblings.length);</script></html>3.表单选择器Formsj/x选择器名称举例表单选择器:input查找所有的input元素：$(":input")；注意：会匹配所有的input、textarea、select和button元素。 文本框选择器 :text 查找所有文本框：$(":text")密码框选择器:password查找所有密码框：$(":password") 单选按钮选择器 :radio 查找所有单选按钮：$(":radio")复选框选择器:checkbox查找所有复选框：$(":checkbox") 提交按钮选择器 :submit 查找所有提交按钮：$(":submit")图像域选择器:image查找所有图像域：$(":image") 重置按钮选择器 :reset 查找所有重置按钮：$(":reset")按钮选择器:button查找所有按钮：$(":button") 文件域选择器 :file 查找所有文件域：$(":file")

姓名:
密码:
年龄:小屁孩 你懂得
爱好:篮球 爬床 代码
来自: 请选择 北京 上海
简介:
头像:
提交 重置
五、jQuery DOM操作
jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。
常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式；动画操作等。注意：以下的操作方式只适用于jQuery对象。

1. 操作元素的属性
   获取属性 方法 说明 举例 attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined。 attr(‘checked’) attr(‘name’) prop(属性名称) 获取具有true和false两个属性的属性值 prop(‘checked’)

aa bb

bind()方法绑多个事件

点击查看名言