jQuery入门及选择器篇

1、jQuery入门

1.1、什么是jQuery?

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities

1.2、jQuery的优势极大地简化了JavaScript编程
举个栗子
以下是javascript和jQuery对比

<!-- 首先使用script标签引入jQuery文件 -->
    <script src="jquery-3.1.0.js"></script>
    <script type="text/javascript">
        
        //普通JavaScript处理
        /*window.onload=function(){
            var p = document.getElementById('yxt');
            p.innerHTML="青山本无忧，因雪白头";
            p.style.color="pink";
        }*/
        
        //jQuery处理
        $(document).ready(function(){
            var $p = $('#yxt');
            $p.html('青山本无忧，因雪白头').css('color','pink');
        })

1.3、下载和使用jQuery

从jquery.com下载

jQuery有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。Development version - 用于测试和开发（未压缩，是可读的代码）

还可从 CDN （内容分发网络）中载入 jQuery。

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的标签引用它：

<script src="jquery-3.1.0.js"></script>

提示：将下载的文件放在网页的同一目录下，就可以使用jQuery。您是否很疑惑为什么我们没有在您是否很疑惑为什么我们没有在标签中使用 type="text/javascript" ？

2、jQuery的核心基础
2.1、$和jQuery的说明
$是jquery中的一个对象，jquery中所有方法和属性都添加在这个对象中，$等价于jQuery,是其简写形式。
2.2、jQuery对象和DOM节点的相互转换
//DOM节点和 jQuery对象不能混用对方的方法、属性。


       //jquery对象转化成DOM对象
       
       $(function(){
           //1、数组下标的方式（数组的索引是从0开始的，也就是第一个元素下标是0）
           var $div = $('div') //jQuery对象
           var div = $div[0] //转换成DOM对象
           div.style.color = 'red' //操作DOM对象的属性
           //2、通过jQuery自带的get()方法
           var div = $div.get(0);
       })

相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，通过传递不同的参数而产生不同的作用。如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象.

//DOM对象转化成jQuery对象
var div = document.getElementsByTagName('div');//DOM对象
        var $div = $(div)//jQuery对象
        var $first = $div.first();//找到第一个div元素
        $first.css('color','red');//给第一个元素设置样式

下面谈谈：window.onload和$(document).ready()的区别.

1、执行时机：onload事件必须等页面加载完毕后才能执行；ready当页面dom节点加载完毕就可以执行。比onload早
2、添加个数：onload添加多个，只执行最后一个会覆盖前面的onload事件；ready事件可以添加多个，互相之间不会覆盖
(onload事件和ready事件之间也不会互相覆盖)
3、简化写法：onload没简化写法；ready事件可以简化为$(function(){});

jQuery选择器

id选择器、类选择器、元素(标签)选择器

$('#yxt')；$('.yxt')；$('div')

通配选择器

$('*')

层级选择器

子选择器、后代选择器和、相邻兄弟选择器、一般兄弟选择器

$("parent > child");$("ancestor descendant");$("prev + next"); $("prev~siblings");

基本过滤选择器（基本筛选选择器）

该选择器的用法与CSS中的伪类选择器相似，选择器用冒号":"开始

$(":first") //匹配第一个的元素
$(":last") //匹配最后一个的元素
$(":not(selector)") //用来过滤的选择器
$(":even") //选择索引值为偶数的元素，从0开始计数
$(":odd")// 奇数（说明同上）
$(":eq(index)") //在匹配的集合中选择索引值为index的元素
$(":gt(index)") //索引值大于index
$(":lt(index)") //小于
$(":header") //选择所有标题元素，如h1,h2,h3等
$(":focus") //选择获取焦点的元素  、、扩充下autofocus知识点
$(":animated") //选择所有正在执行动画效果的元素

内容选择器

$(":contains(text)")  //选择所有包含指定文本的元素
$(":parent")    //选择含有子元素或者文本的元素
$(":empty")     //选择没有子元素或者文本的元素
$(":has(selector)")     //选择包含有选择器选择元素的元素

可见性(筛选)选择器

$(":visible")   //选择所有显示的元素
$(":hidden")    //选择所有隐藏的元素

属性选择器（筛选）

$(":[attribute]")   //拥有该元素的属性
$(":[attribue='value']")    //属性值为value的元素
$(":[attribute!='value']")  //属性值不是value的元素
$(":[attribue^='value']")   //属性值以value开头的元素
$(":[attribue$='value']")   //属性值以value结尾的元素
$(":[attribue*='value']")   //属性值含有value的元素

子元素(筛选)选择器

jQuery实现 :nth-child(index)是严格来自CSS规范。index从1开始计数

$(":first-child")   //选择所有父级元素下的第一个子元素
$(":last-child")    //最后一个子元素
$(":nth-child(index)")//index从1开始计数
$(":nth-child(even)")//偶
$(":nth-child(odd)")//奇
$(":nth-child(xn)") //如3n 3..6..9 n取不到0 因为索引从1计
$(":nth-child(xn+1)") //3n+1 1..4..7

表单元素选择器

$(":input")     //选择所有input,textarea,select和button元素
$(":text")      //匹配所有文本框
$(":password")  //匹配所有密码框
$(":radio")     //匹配所有单选按钮
$(":checkbox")  //匹配所有复选框
$(":submit")    //匹配所有提交按钮
$(":image") //匹配所有图像域
$(":reset")     //匹配所有重置按钮
$(":button")    //匹配所有按钮
$(":file")      //匹配所有文件域

表单对象属性选择器

$(":enable")    //选取可用的表单元素
$(":disabled")  //不可用的
$(":checked")   //选取被选中的<input>元素
$(":selected")  //选取被选中的<option>元素