1.3jQuery代码的编辑
1.3.1配置jQuery环境
- 获取最新版:www.jquery.com
- 类库型说明:生产版(min.js)、开发版
- 环境配置:jquery.js放置到一个公共的位置,页面引入该文件即可使用
<script src="jquery-1.10.2.min.js"></script>
$(function(){
alert("hello jquery");
})
网页加载完成时会弹出hello jquery
- 也可以使用cdn网络引用jQuery框架
1.3.2编写简单的jQuery代码
$(document).ready(function(){
});
- 类似于window.οnlοad=function(){};
- 区别:
- 执行时机:
- onload需要等待网页全加载完在执行,ready()只要页面框架加载完成即可
- 编写次数:
- onload在一个网页中只能出现一次,ready()可以写无数次,切都被执行
- 简写支持:
- onload不支持
- ready()支持($(function(){}))
- 执行时机:
1.3.3jQuery代码风格
- 链式风格
- $(this)表示当点击的元素
- $(this).addClass(“add”) 当前点击元素增加.add样式
- $(this).addClass(“add”).next() 当前点击元素后边的一个元素
- show() 显示
- parent().siblings().children(“a”) 当前元素的父元素的兄弟元素的孩子中为a的
- removeClass(“add”)删除当前元素的class里的add
- next.hide():隐藏当前元素的下一个元素
- 学会给jQuery写注释
- 举例:体验jQuery选择器的强大
- $("#talbe>tbody>tr:has(td:has(:checkbox:enabled))").css(“background”,“red”);//选择id为table的表中的tbody中里tr里有td没被禁用的,设置其css样式背景色为红色。
- 举例:体验jQuery选择器的强大