今天还是日常有一些昨天遗留的问题:
1.document.querySlector()
弹出[object HTMLDivElement],表示选择了该Div
2.如果要选择多个元素用querySelectorAll
document.querySlectorAll()
jQuery
jQuery的使用要小导入你要使用的jQuery文件,然后在创建一个script标签,来根据你自己的需求来写具体的代码,jQuery是给你一个简单的写法,但并不是能够实现徐偶有过得功能,所以我们需要自己书写样式。
我们在实际引用中一般使用jQuery是因为window.onload是把页面元素加载、渲染完才弹出,而ready()是把所有页面的节点加载完之后就弹出了,不用等渲染了,在实际操作中比较快。
jQuery选择器
jQuery选择器选择元素的规则和css样式相同
只不过jQuery的方式可以动态的更改写入样式
选择集转移
prev()是同级的上一个元素,prevAll()是同级的上面所有的元素
next()是同级的下一个元素,nextAll()是同级的下面所有的元素
$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素
jQuery样式操作
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
click事件
jQuery索引值
用原生js不能取出索引值,因为原生的js方法不能存储运行中的结果,只会存储最后运行的值
而jQuery就没有这种顾虑
之前说到jQuery是一种简单的方法,比兔我们之前所做的选项卡,如果使用jQuery会大大减少代码数量,也会提高性能。
我们可以用jQuery进行属性的操作
jQuery特殊效果
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素