JQuery基础知识第一篇

JQuery= js+query 意思为js查找

		jQuery的宗旨是：write less,do more.

jQuery的下载？

		官网地址：https://jquery.com/
		版本：
		1x : 兼容IE 6 7 8 等低版本的浏览器，官网不再提供更新
		2x: 不兼容IE 6 7 8等低版本 浏览器，官网不再更新。
		3x: 不兼容IE 6 7 8 等低版本浏览器，官网主要更新维护的版本。
	各版本的下载地址：https://code.jquery.com/

Query的入口函数

		1 $(function(){
				...//此处是页面DOM加载完成的入口
		});
		2 $((document).ready(function()){
				...//此处是页面DOM加载完成的入口
		});

jQjuery的顶级对象 $

		$ = jQuery($是jQuery的别称. 注意，这里的Q要大写)
		$(function(){
		}); = jQuery(function(){
		});

jQuery对象和DOM对象

	DOM对象是原生js获取而来的对象.
	例如: 
	var mydiv = document.querySelector('标签名') 获取某一个标签的DOM对象. 这里的mydiv就是DOM对象.
	jQuery对象就是用jQuery方法获取的对象.
	 $('标签名'). 通过这种方式获取的对象就是jQuery对象.
	 jQuery对象的本质是:利用$对DOM对象进行包装然后产生了一个新的对象,这个新的对象是以伪数组的形式存储的.	
	   jQuery对象和DOM对象是可以相互转换的:
	   		DOM对象转jQuery对象:
	   		$(DOM对象名) 注意,这里是没有引号的,因为括号里面放的就是一个对象了.
	   		jQuery对象转DOM对象的两种方式:
	   		1	$('标签名')[数字] 注意,因为jQuery对象底层是以伪数组的形式存储的,因此可以用数组获取元素的方式获取具体的某一个对象,同时也完成了DOM对象的转换.
	   		2  $('标签名').get(数字) 使用get方法获取和转换对象.

jQuery选择器

jQuery基础选择器

$(" .test") 选择class = test 的标签.id和标签类似,这里不再详细描述.

jQuery层级选择器

$(“ul>li”) 子代选择器.使用>号,获取亲儿子层级的元素,注意,这里并不会获取孙子层级的元素.
$(“ul li”) 后代选择器.使用空格,获取ul下的所有li元素,包括孙子等.结果会以伪 数组的形式保存结果.

jQuery隐式迭代

例如: $(“div”).css(“background”,“red”);
这便是隐式迭代,jQuery会把所有匹配到的div标签都进行遍历,给每一个元素都添加css这个方法.

jQuery筛选选择器

$(function(){
$(“ul li”)
})
//这样的选择会选择所有的,如果我们想单独对某一
//个标签进行设置的话可以采用

$(function(){
$(“ul li:first”) //对第一个标签进行设置
})

$(function(){
$(“ul li:last”) //对最后一个标签进行设置
})

$(function(){
$(“ul li:eq(2)”) //对指定索引号的标签进行置,
//注意,因为遍历的结果是伪数组,因此索引是从0开始的
})

$(function(){
$(“ul li:odd”) //对指定索引号是奇数的标签进行置,
})

$(function(){
$(“ul li:even”) //对指定索引号是偶数的标签进行置
})

jQuery方法筛选选择器

$(" .test").father()筛选类名为test的上一级元素
常用的筛选方法.

jQuery下拉菜单

思路: 鼠标经过某一个元素时触发事件,离开此元素时又触发事件.
代码如下:
$(function(){
//鼠标经过
KaTeX parse error: Expected '}', got 'EOF' at end of input: …nction(){ //(this) 表示jQuery当前的元素 注意,this不要加引号
//children(“ul”) 亲儿子有很多 指定标签名为ul的亲儿子
// show()显示元素 hide()隐藏元素
$(this).children(“ul”).show();
})
//鼠标离开
$(.nav>li).mouseout(function(){
$(this).children(“ul”).hide();
})
})

jQuery 排他思想

问题:点击其中一个按钮,这个按钮会变颜色,其他兄弟的按钮颜色会去掉.

思路: 绑定button的鼠标点击事件,当点击时设置颜色,利用隐式迭代和排他思想对其余兄弟初始化颜色.
代码如下:
$(function(){
//隐式迭代 给所有按钮都绑定了点击事件
$(“button”).click(function(){
// 当前元素的变色
$(this).css(“background”,“red”)
// 其余兄弟去掉颜色,隐式迭代
$(this).siblings(“button”).css(“background”,"")
})
})

jQuery 样式操作

1 使用css样式

① 参数只写属性名,则是返回属性值
	$(this).css("color");
 ②  参数属性名,属性值,逗号分隔,设一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号.
 $(this).css("color","red");
 ③ 参数可以是对象形式,方便设置多组样式,属性名和属性值用冒号隔开,属性可以不用加引号.
 $(this).css({"color":"white","font-size":"20px"});
 // 如果属性名是复合属性,则采用驼峰命名法.例如:
 background-color  这里要写成 backgroundColor

2 设置类样式方法
作用等同于以前的class List,可以操作类样式,注意操作类样式里面的参数不要加点.
① 添加类
$(“div”).addClass(“类名”)
② 删除类
$(“div”).removeClass(“类名”)
③ 切换类
$(“div”).toggleClass(“类名”) //添加类和删除类交替进行
3 类操作与className区别
原生JS中className会覆盖原先里面的类名.
jQuery里面类操作只是对指定类进行操作,不影响原先的类名.

jQuery 效果

显示隐藏

show() //显示
hide() //隐藏
toggle()//切换

滑动

slideDown() //下拉
slideUp() //上拉
slideToggle() //切换

淡入淡出

fadeln() //淡入
fadeOut() //淡出
fadeToggle() //切换
fadeTo() // 可以对动画的持续时间 透明度 完成时调用函数等进行设置

自定义动画

animate() //自定义动画

显示隐藏

这些参数都加了中括号 表示可以省略
show([speed],[easing],[fn])
//speed:显示速度:“slow” “normal”,“fast"或者1000,表示1000毫秒也就是1秒
//easing:指定切换效果 默认是"swing”,可用参数"linear" :匀速
//fn : 回调函数,在动画完成时执行的函数,每个元素执行一次.

hide([speed],[easing],[fn])
同上
toggle()([speed],[easing],[fn])
同上

滑动

slideDown([speed],[easing],[fn])
同上
slideUp([speed],[easing],[fn])
同上
slideToggle([speed],[easing],[fn])
同上

淡入淡出

fadeIn([speed],[easing],[fn])
同上
fadeOut([speed],[easing],[fn])
同上
fadeToggle([speed],[easing],[fn])
同上
fadeTo([speed],opacity,[easing],[fn])
同上
speed 必须写
opacity:透明度必须写 取值0~1之间

自定义动画

animate(params,[speed],[easing],[fn])
同上
params:想要更改的样式属性,以对象形式传递,必须写.属性名可以不用带引号,如果是复合属性则要求采取驼峰命名法borderLeft.其余参数都可以省略.
例如:
$(function(){
$(“button”).click(function(){
$(“div”).animate({
left:500,
top:300,
opacity: 0.4,
width:500
},500)
})
})

事件切换

hower([over,]out)
1 over:鼠标移动到元素上时要触发的函数(相当于mouseenber)
2 out: 鼠标移出元素时要触发的函数(相当于mouseleave)
hower(function(){},function(){}) //表示鼠标经过触发函数1,离开触发函数2
hower(function(){}) //表示鼠标经过和离开都会触发这个函数

动画队列及其停止排队方法

1 动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就会造成动画或者效果排队执行
2 停止排队
stop()
stop()必须写到动画的前面