jQuery知识点整理1
加载函数
//该文档准备好了
$(document).ready(function () {
console.log("我是jquery的加载函数")
})
window.onload = function () {
console.log("我是js的加载函数")
}
//jquery加载函数的简写
console.log(typeof $);
$(function () {
console.log("我是jquery的加载函数的简写")
})
jQuery入口函数与js入口函数的对比
JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。
jQuery对象和DOM对象的区别
DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))
DOM对象与jQuery对象的方法不能混用。
- DOM对象转换成jQuery对象:(给钱就行)
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象
- jQuery对象转换成DOM对象:
var $li = $(“li”);
$li[0]
jQuery选择器
1. 基本选择器
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $(“#id”); | 获取指定ID的元素 |
类选择器 | $(“.class”); | 获取同一类class的元素 |
标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”); | 使用逗号分隔,只要符合条件之一就可。 |
交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
2.层级选择器
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $(“ul>li”); | 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 | $(“ul li”); | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
3.过滤选择器
这类选择器都带冒号:
名称 | 用法 | 描述 |
---|---|---|
:eq(index) | $(“li:eq(2)”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 |
:odd | $(“li:odd”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $(“li:even”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为偶数的元素 |
4.筛选选择器(方法)
筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
名称 | 用法 | 描述 |
---|---|---|
children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”),子类选择器 |
children() | $(“li”).children() | 对象的孩子们 |
find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器 |
siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点,不包括自己本身。 |
parent() | $(“#first”).parent(); | 查找父亲 |
eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
next() | $(“li”).next() | 找下一个兄弟 |
prev() | $(“li”).prev() | 找上一次兄弟 |
prevAll() | $(“li”).prevAll() | 找前面所有的兄弟 |
class操作
addClass();—>添加类//追加类 $("li").addClass("now");
hasClass();—>判断类console.log($("li").eq(0).hasClass("aaa"));//返回布尔值
removeClass();—>移除类$("li").eq(1).removeClass("now");
toggleClass();—>切换类//切换类 $("li").eq(0).toggleClass("aaa");
获取当前的索引值: index()
CSS操作
//设置单个样式
$("li").css("color", "red");
// //设置多个样式
$("li").css({
"background": "pink",
"fontWeight":"700"
})
操作属性
//设置单个属性
$("img").attr("alt", "该图片正在加载");
//设置多个属性
$("img").attr({
"title": "哈哈"
})
//获取属性值
console.log($("img").attr("alt"));
prop()方法:
//在1.7版本已经移除了attr对true和false的操作
$(‘input’).eq(1).click(function () {
$(’#check’).prop(‘checked’,true);
})
//prop方法是在有true和false这2个属性的时候采用( checkbox radio select),其它的时候就用attr();
``
在表单中 :checked为被选中的框
$("#j_tb input:checked").length;
:selected 过滤出下拉列表框被选中的对象
$(’#tar-city>option:selected’).appendTo(’#src-city’);
动画函数
- 第一组动画 show([speed], [callback]) hide() toggle()
speed: 动画的持续时间, 可以是毫秒, 也可以是固定的字符串
callback: 回调函数 , 动画结束之后执行
[] : 可选参数
fast : 200ms normal : 300ms slow: 600ms
$("button").eq(0).click(function () {
$("div").show(2000, function () {
console.log("你好");
})
})
$("button").eq(1).click(function () {
$("div").hide("slow");
})
$("button").eq(2).click(function () {
$("div").toggle(1000, function () {
console.log("?")
});
})
2.第二组动画 滑入滑出效果 slideDown() slideUp() slideToggle()
$("button").eq(0).click(function () {
$("div").slideDown(2000, function () {
console.log("你好");
})
})
$("button").eq(1).click(function () {
$("div").slideUp("slow");
})
$("button").eq(2).click(function () {
$("div").slideToggle(1000, function () {
console.log("切换完啦")
});
})
- 第三组动画 淡入淡出 fadeIn() fadeOut() fadeToggle()
$("button").eq(0).click(function () {
$("div").fadeIn(2000, function () {
console.log("你好");
})
})
$("button").eq(1).click(function () {
$("div").fadeOut("slow");
})
$("button").eq(2).click(function () {
$("div").fadeToggle(1000, function () {
console.log("切换完啦")
});
})
stop() 停止当前正在执行的动画
$(this).children("ul").stop().slideDown();