jQuery基础学习--选择元素

---

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>

效果图1.png

我们想让列表项水平显示而非垂直，也就是下面的效果：

效果图2.png

实现这样的效果简直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麦多