jQuery:
jQuery就是一个工具,它对获取对象和操作对象进行了封装,提供了非常简单的解决方案。
jQuery对象和js原生对象的区别:
jQuery可以使用jQuery封装的各种便利的方法。
$(js原生对象)
jquery对象.get(0)
jquery对象[0]
获取对象:
利用css的选择器获取对象:
基本选择器:
#id
.class
标签名
选择器1, 选择器2,…
后代选择器:
层级选择器: 祖先选择器 后代选择器
直接后代选择器: 父选择器 > 子选择器
兄弟选择器: 兄元素选择器 + 弟元素选择器
所有弟弟们选择器: 兄元素选择器 ~ 弟元素选择器
过滤选择器:
基本的过滤选择器:
奇偶选择器: :odd :even
比较选择器: gt(索引) lt(索引) eq(索引)
操作对象:
val(): 获取或设置表单元素的value的值
text(): 获取开始标签和结束标签之间的文本内容
html(): 获取开始标签和结束标签之间的html内容
css(): 获取或设置元素的样式属性, 只设置一个属性 css(“属性名”, “属性值”) 设置多个属性css({“属性名”: “属性值”, “属性名”: “属性值”})
hide(): 将元素隐藏
show(): 将元素显示
$的应用的场景:
1、在页面加载完成时(所有的标签元素加载完成)执行代码
$(function(){ // jQuery代码 })
和onload事件的区别,页面加载完成时(页面所有的元素都加载完成,包括图片和css还有js),执行的时间点比jQuery的时间点要晚。
onload事件只能绑定一次,jQuery的入口函数可以有很多个
2、将原生的js对象转换为jQuery对象
$(js原生对象)
注意:function () { this } this关键字是一个原生js对象,要使用jQuery的方法,必须将this使用$()包裹转换为jQuery对象。
$(this)
3、使用选择器获取页面上对应的元素的jQuery对象
$(“选择器”)
注意:$(“选择器”)中如果有多个元素对象的话,会有隐式遍历的特性
4、可以把html字符串转换为jQuery对象
$(“html字符串”)
$("<input type=‘text’ name=‘username’, value=‘123’>")
笔记
获取元素:
$(选择器)
children(选择器)
find(选择器)
对元素进行操作:
绑定事件:
click()
mouseover()
mouseout()
对样式的操作:
css()
addClass()
removeClass()
toggleClass()
hasClass()
关于动画的操作:
hide()
show()
$("#dv").css(“backgroundColor”, “red”)
$("#dv").css(“fontFamily”, “宋体”);
链式编程:
就是在函数功能性代码之后,把原调用函数的对象作为返回值继续返回。
function Student(name, age){
this.name = name;
this.age = age;
this.sayHi = function(){
console.log("hi, " + this.name);
return this;
};
this.sayHello = function(){
console.log("hello, " + this.name);
}
}
var stu = new Student(“zs”, 18);
stu.sayHi().sayHi();
stu.sayHello().sayHi();
$(“ul”).find(“li”)