一、jQuery基础
jQuery语法
基础语法:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
jQuery入口函数:
$(document).ready(function(){
//执行代码
});
或者
$(function(){
//执行代码
});
jQuery用法
ready()方法
<!-- 为页面加载事件绑定 -->
<script>
$(document).ready(function(){
alert("我是jQuery示例")
});
</script>
addClass()、css方法
addClass()方法为元素添加样式
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
css方法设置元素样式
$(this).css({"background":"black"});
show()、hide()方法
设置元素的显示和隐藏
$(this).children("div").show(); 显示
$(this).children("div").hide(); 隐藏
next()方法/链式操作
对一个对象进行多重操作,并将操作结果返回给该对象。
$("h2").css("background-color","#12c2e9").next().css("display","block");
DOM对象和jQuery对象
DOM对象是我们用传统的方法(javascript)获得的对象。
jQuery对象是用jQuery类库的选择器获得的对象。
var domObj = document.getElementById("id"); //DOM对象
var obj=("#id"); //jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法,如下:
$("#foo").html(); 获得ID为foo的元素内的HTML代码。
二、jQuery选择器
一、基本选择器:
1.标签和ID选择器:
#id
h1 标签
2.类选择器:
.class 类
3.并集选择器:
.intro,dt,dd 并集
4.全局选择器:
*全局
二、层次选择器:
.textRight p 后代选择器
.textRight>p 子选择器
h1+p 相邻选择器
h1~p 同辈元素选择器
三、属性选择器:
#news a[class] a标签带有class属性
a[class=‘hot‘] class为hot
a[class!=‘hot‘] class不为hot
a[href^=‘www‘] 以www开头
a[href$=‘html‘] 以html结尾
a[href*=‘k2‘] 包含"k2"的元素
四、过滤选择器:
:eq(index) 选取索引等于index的元素从0开始
:gt(index) 选取索引大于index的元素从0开始
:It(index) 选取索引小于index的元素从0开始
:header 选取所有标题元素,如h1~h6
:focus 选取当前获取焦点的元素
:animated 选择所有动画
$(".contain :header").css({"background":"#fff"}); //标题元素
$(".contain li:first").css({"font-size":"16px"}); //第一个
$(".contain li:last").css("border","none"); //最后一个元素
$(".contain li:even").css("background","#f0f0f0"); //偶数元素
$(".contain li:odd").css("background","#cccccc"); //奇数元素
$(".contain li:lt(2)").css({"color":"red"}); //小于某个索引值
$(".contain li:gt(3)").css({"color":"green"}); //大于某个索引值