jQuery简介

今天还是日常有一些昨天遗留的问题:

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() 依次展开或卷起某个元素


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容