引入jQuery文件
例如:
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
jQuery文件可以去jQuery官网上进行下载。
jQuery第一段程序
<script type="text/javascript">
$(document).ready(function() {
alert("Hello World");
});
</script>
刷新页面会出现Hello World
的弹框。
-
$(document).ready(function() {//jQuery代码});
即为Jquery代码的开端,所有的代码都在其中进行编写,其简写为$(function() {//jQuery代码});
- 相当于
window.onload = function() {//JS代码}
jQuery代码风格
- 对于同一对象不超过3个操作的,可以写一行,如:
$("li").show().unbind("click");
- 对于同一对象有很多操作的,可以每行写一个操作,如:
$(this).removeClass("mouseout")
.addClass("mouseover")
.stop()
.fadeTo("fast", 0.6)
.click(function() {
//其他代码
}); - 对于多个对象但少量操作的,可以每个对象写一行,若涉及子元素,则应考虑缩进,如:
$(this).addClass("highlight")
.children("li").show().end()
.siblings().removeClass("highlight")
.children("li").hide();
jQuery对象与DOM对象
- DOM对象:Document Object Model的简写,称为“文档对象模型”
- jQuery对象:指通过jQuery包装DOM对象所产生的对象
- 两者之间转换(以$开头的变量指的是jQuery对象)
var $variable = jQuery对象;
var ariable = DOM对象;
//jQuery对象转DOM对象,根据索引
var $adiv = $("#myDiv");
var adiv1 = $adiv[0];
//或
var adiv2 = $adiv.get(0);
//DOM对象转jQuery对象,使用$()包括起来DOM对象即可
var adiv = document.getElementById("mydiv");
var $adiv = $(adiv);
jQuery选择器
- 基本选择器
-
$("li")
选定所有的li标签 -
$("#mydiv")
选定id为mydiv的标签 -
$(".mydiv")
选定class为mydiv的所有标签 -
$("div,span,li")
选定所有的div、span、li标签 -
$("*")
选定所有的元素
-
- 层次选择器
-
$("div span")
选定所有div标签中的span标签 -
$("div > span")
选定所有div标签下的子标签span,不包括孙子标签 -
$("#mydiv + div")
选定id为mydiv标签相邻的div标签,等价于$("#mydiv").next("div")
-
$("#mydiv ~ div")
选定id为mydiv标签下同辈的所有div标签,等价于$("#mydiv").nextAll("div")
-
- 过滤选择器
-
$("div:first")
选定所有div标签中的第一个div标签 -
$("div:last")
选定所有div标签中的最后一个div标签 -
$("div:not(#mydiv)")
选定所有id不是mydiv的div标签 -
$("div:even")
选定索引为偶数的所有div标签,索引从0开始 -
$("div:odd")
选定索引为奇数的所有div标签,索引从0开始 -
$("div:eq(1)")
选定索引为1的div标签 -
$("div:gt(1)")
选定索引大于1的所有div标签 -
$("div:lt(3)")
选定索引小于3的所有div标签 -
$(":header")
选定所有的标题标签,如:<h1>
-
$(":animated")
选定当前正在执行动画的所有标签 -
$(":focus")
选定当前获取焦点的所有标签
-
- XX选择器(未完待续)
- 选择器使用时的注意事项
- 对于特殊字符,. # () [] 这些字符应使用\进行转义
- 注意选择器的空格问题
网友评论