JavaWeb之JQuery

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)