jQuery介绍
什么是jquery
js的函数库,封装(兼容性比较好)
使用jquery
- 1.到jquery官网下载
- 产品(线上环境):压缩版;开发:未压缩
- 2.cdn(内容分发网络)
1.jQuery语法
$(selector).action()
$: 核心, jQuery单词简写形式
Selector: 选择器
Action:动作(html,css,事件)
2.选择器
1)基本选择器
- Id选择器 $(“#id”)
- 类选择器 $(“.class”)
- 标签选择器: $(“标签名称”)
- 通配选择器 $(“*”)
2)层级选择器
- 后代选择器 $(“p span”)
- 并集 $(“p,span”)
- 交集 $(“p.red”)
3)属性选择器
$(“[name=’username’]”)
4)基本筛选器
console.log($("tr:first"));
console.log($("tr:last"));
console.log($("tr:eq(1)")); //=
console.log($("tr:lt(1)")); //<
console.log($("tr:gt(1)")); //>
console.log($("tr:even")); //偶数
console.log($("tr:odd")); //奇数
3.jQuery操作
1)html的内容
console.log($(“#div1”).html()); 获取值
$(“#div1”).html(“bbbb”); 设置值
2)属性操作
console.log($(“#div1”).attr(“class”)); 获取属性值
$(“#div1”).attr(“name”,”green”); 设置属性值
Prop():获取和设置属性值
获取和修改value
$("input").val("aaaaa");
console.log($("input").val());
3)样式修改
$(“#div1”).css({“color”:”red”,”background”:”black”,”font-size”:”20px”});
4.事件
Onclick====click()
//原生方法
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
}
//jQuery方法
$("#btn").click(function(){
});