jQuery基础知识

1. $和jquery的关系

$其实是jQuery的别名
一般直接使用$符号

在许多JavaScript库中都会有$作为标记。如果同时使用多个JavaScript库时难免会出现冲突。

2. jQuery两种入口函数

// 入口函数
		$(function(){
			
		})
		
		$(document).ready(function(){
		})1234567

3. jquery的多种选择器

3.1基础选择器

$("div")   $("#box")   $(".box")1

3.2层级选择器

$("ul li")   $("ul>li")1

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");   索引号为偶数的元素12345

4. jquery的css设置语法

选择器.css("属性名","属性值")   单个属性设置

选择器.css({
    "属性名"：”属性值“,
   "属性名"：“属性值”})123456

示例代码

$("div").css("border","1px solid #000");$("#box").css({
    "width":"100px",
    "height":"100px",
    "background-color":"red"})123456

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"); });123

attr() 方法也允许同时设置多个属性。

$("button").click(function(){ $("#runoob").attr("href"："http://www.csdn.com", "title" : "CSDN官网"); });123

prop代码示例

$("button").click(function(){
    var $x = $("div");
    $x.prop("color","FF0000");});1234

6. DOM节点的关系和增加、删除节点

//DOM节点
		parent() 父元素		parents(指定父元素) 父元素集合		find() 后代子节点		siblings() 所有兄弟节点		next() 后边的一个兄弟节点		prev() 后边的一个兄弟节点		nextAll() 后边的所有兄弟节点		prevAll() 前边的所有兄弟节点		addClass("类名") 添加类名		removeClass() 移除类型		toggleClass() 切换类名		
		// jquery中节点增删
		append() 尾部追加		prepend() 头部追加		$("添加的内容").appendTo("父节点")
		remove 删除自身所有子元素
		empty 保留自身12345678910111213141516171819

7. 定时器和清除定时器

setInterval() //设置定时器clearInterval() //清除定时器12

8. jquery的动画函数写法

语法：

hide()隐藏  
show()显示slideUp() 滑上slideDown() 滑下$(selector).animate(styles,speed,easing,callback)styles:产生动画效果的一个或多个 CSS 属性/值。
speed:规定动画的速度。
easing:	可选。规定在动画的不同点中元素的速度。默认值是 "swing"。 ("swing" - 在开头/结尾移动慢，在中间移动快"linear" - 匀速移动)callback:animate 函数执行完之后，要执行的函数。1234567891011

jquery动画的淡入淡出

jQuery 提供了下面几种方法可以实现显示的淡入淡出效果：

fadeIn() //淡入
fadeOut() //淡出
fadeToggle() //淡入淡出
fadeTo() // 实现淡化到指定的透明度

婷婷 jquery js javascript 1049

jQuery