0.写在前面
本人只是一个web开发初学者,本系列文章目的在于记录本人学习jQuery的点滴,以便日后查看以及整理思路和学习方案,如果你觉得对你有用,那你点个赞就OK,如果你觉得实在是垃圾以至于影响到你的心情,那你吐口唾沫走人就行。等等,在你走之前或许会考虑给我点建议的-_- 。
1.使用$()函数
通过jQuery的各种选择符合方法取得的结果集合会被包裹在 jQuery对象中,通过jQuery对象实际地操作这些元素会非常简单,可以轻松的为jQuery对象绑定事件、添加漂亮的效果,也可以将多重修改或效果通过jQuery对象连缀到一起。
为了创建jQuery对象,就要使用$()函数,这个函数接受css选择符作为参数,返回包含页面对应元素的jQuery对象,所有能在样式表中使用的选择符都可以传给这个函数。
一共有三种基本的选择符:标签名、ID和类,这些选择符可以单独使用,也可以与其他选择符组合使用,例:
选择符 CSS jQuery 说明
标签名 p{} $('p') 取得文档中所有的段落
ID #some-id $('#some-id') 取得文档中ID为some-id的一个元素
类 .some-class $('.some-class') 取得文档中类为some-class的所有元素
2.CSS选择符
直接上代码 -_-
<ul id="selected-plays" class="clear-after">
<li>Comedies</li>
<li>Tragedies</li>
<li>Histories</li>
</ul>
我们想让列表项水平显示而非垂直,也就是下面的效果:
实现这样的效果简直so easy,我们只要再添加一个.horizontal类给<li>
标签
.horizontal {
float: left;
list-style: none;
margin: 10px;
}
<ul id="selected-plays" class="clear-after">
<li class="horizontal">Comedies</li>
<li class="horizontal">Tragedies</li>
<li class="horizontal">Histories</li>
</ul>
但是我们的目的是通过js代码向<li>
标签添加样式,like this:
$(function(){
$('#selected-plays > li').addClass('horizontal');
});
$();
其实就是$(document).ready();
的简写,位于其中的所有代码会在DOM加载后立即执行,其功能与原生js的window.onload
相似,但又有区别于它,具体的区别你可以去百度。
南方以南,以梦为马 ---by麦多