jQuery基础知识

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() // 实现淡化到指定的透明度

本文地址：https://blog.csdn.net/Web_chicken/article/details/109564207