1.jQuery语法
基础语法
1、美元符号 $定义jQuery
jq入口函数
$(function(){
Jq内容
}
注意点:
通过jq获取的id比较特殊,也是获取的多个,使用时需要加下标[]
2、选择符(selector)"查询"和"查找"HTML元素
3、jQuery的action()执行对元素的操作。
了解jQuery的$符号
$(function() {});//参数是function,说明是入口函数js
$(“#btnSetConent”);//参数是字符串,并且以#开头,是一个标签选择,查找id=“btnSetContent”的元素
$(“div”);//查找所有的div元素
$(document).ready(funciton(){})//将document转换成jQuery对象
JQuery选择器
什么是jQuery选择器
1、jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
2、jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。
3、jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
4、jQuery 中所有选择器都以美元符号开头:$()。
基本选择器
基本选择器
名称 | 用法 | 描述 |
ID选择器 | $(“#id”); | 获取指定ID的元素 |
类选择器 | $(“.class”); | 获取同一类class的元素 |
标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”); | 使用逗号分隔,只要符合条件之一就可。获取所有的div、p、li元素 |
交集选择器(标签指定式选择器) | $(“div.redClass”); | 注意选择器1和选择器2之间没有空格,class为redClass的div元素,注意区分后代选择器。 |
总结:和css选择器的用法一模一样
层级选择器
名称 | 用法 | 描述 |
子代选择器 | $(“ul>li”); | 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 | $(“ul li”); | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
总结:跟CSS的选择器一模一样。
过滤选择器
lt 小于 gt 大于 le 小于等于 ge 大于等于
用法 | 描述 | |
: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元素中,选择索引号为偶数的元素 |
总结:这类选择器都带冒号。Lt gt
筛选选择器(方法)
用法 | 说明 | |
children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”),子类选择器 |
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() | 找上一次兄弟 |
Index() | $(“li”).index() | 获取当前的位置(索引) |
not() | $("p").not(".intro") | 返回不带有类名 "intro" 的所有 <p> 元素 |
总结:筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
jQuery事件
事件语法
1、单击事件
$("p").click(function(){
// 动作触发后执行的代码!!
});
- 双击事件
$("p").dblclick(function(){
$(this).hide();
})
3、鼠标进入
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
4、鼠标离开
$("#p1").mouseleave(function(){
alert("再见,您的鼠标离开了该段落。");
});
5、获取焦点
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
6、失去焦点
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
jQuery css() 方法
一个参数:获取
字符串:获取属性值
对象:设置对象中所有的属性和值
两个参数:设置
返回 CSS 属性
如需返回指定的 CSS 属性的值,请使用如下语法:
css("propertyname");
$("p").css("background-color");
(3)、设置CSS属性
如需设置指定的 CSS 属性,请使用如下语法:
css("propertyname","value");
$("p").css("background-color","yellow");
(4)、设置多个CSS属性
如需设置多个 CSS 属性,请使用如下语法:
css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color":"yellow","font-size":"200%"});
jq中添加类
- 类的添加删除和切换
- addClass() 添加类
- removeClass() 删除类
- toggleClass() 切换
$($('button')[2]).click(function(){
$('li').toggle()
})
jq添加类
$($('li')[1]).addClass('c1')
$('li:eq(1)').addClass('c1')
$('li')[1].className='c1'
$('li:eq(1)').removeClass('c2')
$($('div')[0]).click(function(){
$('body:eq(0)').toggleClass('c1')
})
JQ动画
hide()show()
$($('button')[0]).click(function(){
$('li').hide() // hide隐藏,
})
$($('button')[1]).click(function(){
$('li').show()//show显示
})
fadeOut淡入,fadeIn淡出,fadeToggle切换,fadeTo变成某个透明色
// fadeOut淡入,fadeIn淡出,fadeToggle切换,fadeTo变成某个透明色
$($('button')[0]).click(function(){
$('li').fadeOut('fast')
})
$($('button')[1]).click(function(){
$('li').fadeIn()
})
$($('button')[2]).click(function () {
$('li').fadeToggle()
})
$($('button')[2]).click(function () {
$('li').fadeTo(3000,0)
})
JQ滑动效果
slideUp()上滑
sildeDown()下滑
slideToggle()切换,切换效果为上滑或者下滑
自定义动画
animate() 方法用于创建自定义动画可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。
自定义动画
$($('button')[2]).click(function () {
$('li').animate({
opacity: '0.5',
height: 'toggle',
width: 'toggle'
}, 3000, function () {
alert("动画结束")
})
})
Stop方法
stop()会把overflow:hidden清除
stop方法
jQuery stop() 方法用于停止动画或效果,在它们完成之前,适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
stop停止动画,但是会清除掉overflow:hidden
$($('button')[3]).click(function () {
$('li').stop()
})
})
jQuery 事件机制
- 注册事件
动态绑定 on
$('ul').on('click','li',function(){
console.log(456)
})
- 事件对象event
- event对象有以下属性
type:事件类型,比如click。
which:触发该事件的鼠标按钮或键盘的键。
target:事件发生的初始对象。
data:传入事件对象的数据。
pageX:事件发生时,鼠标位置的水平坐标(相对于页面左上角)。
pageY:事件发生时,鼠标位置的垂直坐标(相对于页面左上角
jQuery 对HTML的设置与捕获
html()
html() - 设置或返回所选元素的内容(包括 HTML 标记)
("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
text()
text() - 设置或返回所选元素的文本内容
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
val()
设置input里面的表单值 val();
$(‘input’).val(‘123’);
attr() 添加新属性,设置旧属性
设置页面尺寸
添加元素
append 向尾部添加
prepend 向开头添加
before 在什么之前
after 在什么之后
remove 删除
empty 清空