1. $和jquery的关系
- $其实是jQuery的别名
- 一般直接使用$符号
在许多JavaScript库中都会有$作为标记。如果同时使用多个JavaScript库时难免会出现冲突。
2. jQuery两种入口函数
// 入口函数
$(function(){
})
$(document).ready(function(){
})
3. jquery的多种选择器
3.1基础选择器
$("div") $("#box") $(".box")
3.2层级选择器
$("ul li") $("ul>li")
3.3筛选选择器
$("ul li:first").css("color","red"); 选择第一个
$("ul li:last").css("color","red"); 选择最后一个
$("ul li:eq(2)").css("color","red"); 选择指定的 eq里面的是索引号 从0开始
$("ul li:odd").css("color","red"); 索引号为奇数的元素
$("ul li:even").css("color","red"); 索引号为偶数的元素
4. jquery的css设置语法
选择器.css("属性名","属性值") 单个属性设置
选择器.css({
"属性名":”属性值“,
"属性名":“属性值”
})
示例代码
$("div").css("border","1px solid #000");
$("#box").css({
"width":"100px",
"height":"100px",
"background-color":"red"
})
5. jquery的内容和属性设置的多种语法
5.1 设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
5.2 设置属性 - attr() -prop()
prop() 方法用于设置/改变元素固有属性值
attr() 方法也用于设置/改变自定义属性值。
下面的例子演示如何改变(设置)链接中 href 属性的值:
$("button").click(function(){
$("#runoob").attr("href","http://www.csdn.com");
});
attr() 方法也允许同时设置多个属性。
$("button").click(function(){
$("#runoob").attr("href":"http://www.csdn.com", "title" : "CSDN官网");
});
prop代码示例
$("button").click(function(){
var $x = $("div");
$x.prop("color","FF0000");
});
6. DOM节点的关系和增加、删除节点
//DOM节点
parent() 父元素
parents(指定父元素) 父元素集合
find() 后代子节点
siblings() 所有兄弟节点
next() 后边的一个兄弟节点
prev() 后边的一个兄弟节点
nextAll() 后边的所有兄弟节点
prevAll() 前边的所有兄弟节点
addClass("类名") 添加类名
removeClass() 移除类型
toggleClass() 切换类名
// jquery中节点增删
append() 尾部追加
prepend() 头部追加
$("添加的内容").appendTo("父节点")
remove 删除自身所有子元素
empty 保留自身
7. 定时器和清除定时器
setInterval() //设置定时器
clearInterval() //清除定时器
8. jquery的动画函数写法
hide()隐藏
show()显示
slideUp() 滑上
slideDown() 滑下
$(selector).animate(styles,speed,easing,callback)
styles:产生动画效果的一个或多个 CSS 属性/值。
speed:规定动画的速度。
easing: 可选。规定在动画的不同点中元素的速度。默认值是 "swing"。 ("swing" - 在开头/结尾移动慢,在中间移动快
"linear" - 匀速移动)
callback:animate 函数执行完之后,要执行的函数。
jquery动画的淡入淡出
jQuery 提供了下面几种方法可以实现显示的淡入淡出效果:
fadeIn() //淡入
fadeOut() //淡出
fadeToggle() //淡入淡出
fadeTo() // 实现淡化到指定的透明度