jQuery_01(入门&选择器）

但是jQjQuery是js的类库，里面封装了很多的函数，是一个轻量级的“写得少，做得多”的javaScript库，市场上众多的js插件中，jQuery只是其中一个，但是jQuery是目前最流行的框架，而且提供了大量的扩展。

中大型网站开发

一些前端框架的基础

取得页面中的元素

修改页面的外观

改变页面的内容

响应用户的页面操作

为页面添加动态效果

简化常见的JavaScript任务

HTML元素选取

HTML元素操作

CSS操作

HTML事件函数

JavaScript特效和动画

HTML DOM遍历和修改

AJAX

Utilities

优点：

      1.轻量级  2.强大的选择器  3.出色的DOM操作封装  4.可靠的事件处理机制  

5.完善的Ajax  6.不污染顶级变量  7.出色的浏览器兼容性  8.链式操作方式  9.隐式迭代

10.丰富的插件支持........

缺点：

1.不能向后兼容，每一个新版本不能兼容早期的版本。

2.插件兼容性比较差，不能兼容早期的版本

3.插件容易冲突，绑定相同事件或selector的时候最为突出

4.jQuery核心代码库对动画和特效的支持相对较差

基本选择器

使用如下

console.log($("#bth"));
console.log($(".btn1"));
console.log($("*"));
console.log($("button"))；
console.log($("#btn,.btn1,button")

层次选择器

css样式如下

<ul>
     <li>1</li>
     <li>2
          <ol>
              <li>11</li>
              <li>22</li>
              <li>33</li>
         </ol>
   </li>
   <li class="li3">3</li>
   <p>0000</p>
   <li>4</li>
</ul>

使用如下

console.log($("ul li"));
console.log($("ul>li"));
console.log($(".li3+"));
console.log($(".li3~li"));

过滤选择器

css样式如下

<ul>
     <li>1</li>
     <li>2
          <ol>
              <li>11</li>
              <li>22</li>
              <li>33</li>
         </ol>
   </li>
   <li class="li3">3</li>
   <p>0000</p>
   <li>4</li>
</ul>

使用如下

console.log($("ul>li:first"))；
console.log($("ul>li:last"));
console.log($("ul>li:even"));
console.log($("ul>li:odd"))；
console.log($("ul>li:gt(1)"));
console.log($("ul>li:lt(1)"));
console.log($("ul>li:eq(1)"));
console.log($("ul>li:not(.li3)"));

表单选择器

 css样式如下

<input type="checkbox" checked>
<input type="checkbox">
<input type="radio">男
<input type="radio">女
<input type="text">
<select id="sel">
    <option>宝鸡</option>
    <option selected>西安</option>
</select>

使用如下

console.log($("input[type='checkbox']:checked"))
console.log($("input[type='radio']
console.log($("input[type='text']"
console.log($("input:text"))；
console.log($(":input"));
console.log($(":button"))；
$("#sel").change(function(){
        console.log($("#sel>option:sell
});