jQuery_01(入门&选择器）

jQuery是什么？

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

jQuery一般在哪些情况下使用

中大型网站开发

一些前端框架的基础

取得页面中的元素

修改页面的外观

改变页面的内容

响应用户的页面操作

为页面添加动态效果

简化常见的JavaScript任务

jQuery库包含以下功能

HTML元素选取

HTML元素操作

CSS操作

HTML事件函数

JavaScript特效和动画

HTML DOM遍历和修改

AJAX

Utilities

jQuery的优点以及缺点

优点：

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

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

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

缺点：

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

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

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

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

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
});