JQuery
JQuery简介
- JQuery是一个快速，简洁的JavaScript的库
- JQuery是对JavaScript的封装
- 常用的代码
- 常用的方法
- ...等
- 它提供了一个更简洁的操作js方式
- 优化了HTML文档
- 优化了对事件的处理
- 提供动画效果操作
- 优化了与Ajax交互的方式
特性
- 轻量级
- 提供了大量的选择器
- 与浏览器的兼容性特别好
- 链式编程
JQuery使用方式
- 官网走这边
- 生产者版 -- 适用于项目发布时使用
- 开发者版 -- 适用于开发项目时使用
- 相对于生产者版，开发版更大，更占用空间
- 导入JQuery
<script type="text/javascript" src="../js/jquery.js"></script>
JQuery中的全局对象
- 在JQuery中，JQuery本身就是它的全局变量
- 无论在操作哪个功能，都需要使用这个JQuery全局对象
- JQuery的别名：" $ "
JQuery中常用的的选择器
- id选择器
- 可以根据指定的id获取标签对象
- 使用方式：" # "表示id选择器
- 标签选择器
- 可以根据指定的标签名称获取多个标签的对象
- 使用方式：无符号 eg：[ alent($("input")) ]
- 类选择器
- 可以根据指定的Class属性获取多个标签对象
- 使用方式：" . " + class类名
- 通配符
- 表示获取所有标签对象 -- 整个HTML文件中，包括不显示的
- 使用方式： " * "
- 组合选择器
- 可以指定获取DOM树中指定的标签节点对象
- 使用方式：" ， "分割
- 继承选择器
- 可以指定获取某一标签下的指定标签对象
- 使用方式：" " -- eg：[ alent($(form input)) ]
- 父标签和标签下指定标签之间用空格分隔
- 过滤选择器
- 可以根据指定的过滤条件，选择指定哪一个标签
- 使用方式： "标签 : 过滤条件"
- API中带冒号的
- 取出所有与给定选择器不匹配的元素
- 使用方法：" : not"
- 获取所有索引值偶数的值
- 使用方法：" : even"
- 获取所有索引值奇数的值
- 使用方法：" : odd"
- 更多的...找API（@^#_#^@）
- 属性选择器
- 可以匹配给定的属性是哪个特定值的元素
- 使用方法："[]"，eg：alert($input[type = text])
- API中带中括号的
- 表单选择器
- 通常情况下，表单选择器是针对form标签的
- 可以使用表单选择器，在表单中筛选、过滤出指定类型的标签对象
JQuery中的DOM编程
- JavaScript与JQuery互转
- JavaScript转JQuery
- var var_js = document.getElementById("input")
- var var_jq = $(var_js)
- JQuery转JavaScript
- var var_js = var_jq[0]
- var car_js = var_jq.get(0)
- 常用属性
- text()--设置/获取文本
- html()--设置/获取HTML文本
- val()--获取标签对象中的属性值
- attr()--设置/获取标签中的属性值
- prop()--设置/获取标签中的属性值
- 常用方法
- 追加--append()
- 删除全部子节点 -- empty()
- 获取当前对象所有的子元素 -- children()
- 获得指定标签对象的下一个节点 -- $(this).next()
- 获得指定标签对象的上一个节点 -- $(this).prev()
- 将指定的"内容"前置到指定的标签对象中-- prepend()
- 将指定的标签对象添加到另一个对象之前 -- before()
- 对事件处理的方式
- 便携式
- 事件源
- 绑定式
- 关键字
- on -- 将点击事件与事件处理进行绑定$("#aaa"on("chick".function(){}))
- off -- 将指定的时间与时间处理进行解绑
JQuery中的动画效果
- JQuery对页面元素进行显示的效果处理
- 常用方法
- 显示隐藏的元素 -- show()
- 隐藏显示的元素 -- hidden()
- 显示指定元素， 从上到下 -- slideDown()
- 隐藏指定元素，从下到上 -- slideUp()
- 淡入 -- fadeIn()
- 淡出 -- fadeOut()
- 请查看>>>>API{@$^_^$@}点了没反应，没想到吧
JQuery常用工具方法
- 在JQuery库中封装了很多工具方法
- 可以快速实现相应功能
- 可以使用$来进行访问
- 常用工具方法
- 去除两端空格 -- $.trim(str)
- 判断是否是数组 -- isArray(Object)
- 判断对象是否为函数 -- isFunction(Object)
- 循环遍历数组或集合 -- each()
- 接收一个JSON字符串，返回一个解析的对象 -- parseJSON(json)