jQuery讲解.doc

jQuery入门 jQuery基本代码： $(document).ready(function(){ }) 或 $().ready(function(){ }) 或 $(function(){ }) 表格对象的奇偶行： $(“tr:even”) :表格的偶数行2,4,6,8,10 $(“tr:odd”) :表格的奇数行1,3,5,7,9 获取DOM对象的方法： document.getElementById(“id”) document.getElementsByName(“name”) document.getElementsByTagName(“TagName”) jQuery对象： 通过ID获取对象的代码：$(“#id”) 等价于DOM对象的代码： Document.getElementById(id) jQuery对象和DOM对象的相互转化 jQuery对象转换为DOM对象：[index]或.get(index) 如：var cr = $jq[0] 或 var cr = $jq.get(0) DOM对象转换为jQuery对象 如：var $jq = $(cr) 注意：jQuery对象不能使用DOM对象的方法 DOM对象不能使用jQuery对象的方法 CSS样式： 按选择器划分 类选择器：样式名称以小圆点.开头 标签选择器：以标签名命名 ID选择器：样式名称以#开头 按书写位置划分 行内样式：写在每个标签中的style属性里 内嵌样式：写在head标签中的style标签里 外部样式：外部css文件 addClass方法：动态给jQuery对象添加一个类样式 removeClass方法：动态移除jQuery对象上的某个类样式 课后练习： 第一章 1、注册页面中单击注册按钮时，如果没有勾选同意协议的复选框，则弹出请同意会员协议条款的提示框，否则跳转到注册成功页面 2、实现双色行效果，且当鼠标滑入某个单元格时实现高亮显示。 jQuery选择器 什么是jQuery选择器：一串具有特殊含义的字符串。把DOM对象包装为jQuery对象。 选择器的特性 简化代码编写 隐式迭代 无需判断对象是否存在：不产生异常 基本选择器： 根据id选择元素：$(#id) 根据标签名选择元素：$(标签名) 根据class选择元素：$(.class) 选择所有的元素：$(*) 根据多种选择器选择元素：$(selector1,selector2...) 1、选择ID为one的元素：$(#one) 2、选择class为mini的所有元素：$(.mini) 3、选择元素名为div的所有元素：$(div) 4、选择所有元素：$(*) 5、选择所有的span元素和id为two的元素：$(span,#two) 层次选择器： 选择所有的子孙后代：$(选择器1 选择器2) 选择所有的儿子：$(选择器1选择器2) 选择下一个兄弟元素：$(选择器1+选择器2) 选择后面所有的兄弟元素：$(选择器1~选择器2) 1、选择body内的所有的div：$(body div) 选择div内的所有class为mini的元素：$(div .mini) 2、在body内，选择子元素是div的：$(bodydiv) 选择div内的id为three的子元素：$(div#three) 3、选择class为one的下一个div元素：$(.one+div) 选择id为two的下一个class为mini的元素：$(#two+.mini) 4、选择id为two的后面所有的div元素：$(#two~div) 选择id为one的后面所有的class为mini的元素：$(#one~.mini) 过滤器： 选择第一个元素：:first 选择最后一个元素：:last 选择去掉指定的选择器的元素：:not(选择器) 选择索引值为偶数的元素：:even 选择索引值为奇数的元素：:odd 选择等于某个索引值的元素：:eq(index) 选择大于某个索引值的元素：:gt(index) 选择小于某个索引值的元素：:lt(index) 选择所有的header元素：:header 选择所有正在执行动画的元素：:animated 内容过滤器： 匹配包含某个文本的元素：:contains(text) 匹配不含有子元素或文本的元素：:empty 匹配含有指定的选择器的元素：:has(选择器) 匹配含有子元素或文本的元素：:parent 可见性过滤器： 匹配所有可见的元素：:visible 匹配所有不可见的元素：:hidden 表单选择器： 选择所有的表单元素（input、textarea、select、button