入门JQuery编程

一，jquery介绍

        jquery是一个高效，精简并且功能丰富的JS工具库

        特点：易于使用的API接口（支持链式调用）；能够兼容众多浏览器；使用非常广泛

        用途：查询/操作DOM；处理JS事件；实现动画效果；封装/使用JQuery插件；使用Ajax发送异步请求

二，jquery选择器

        1. #id选择器

        2. element选择器

        3. .class选择器

// 根据id进行选择
var username = $('username')
var username = jQuery('username')
// 根据标签进行选择
var pList = $('p')
// 根据class进行选择
var areaList = jQuerty('.areaList')

注意：由于浏览器中生成DOM树的顺序原因，还没有解析后面内容就已经执行了上述代码，会导致我们查找不到内容，因此要做如下修改 

// 写法一
$(document).ready(function(){
    // 根据id进行选择
    var username = $('username')
    var username = jQuery('username')
    // 根据标签进行选择
    var pList = $('p')
    // 根据class进行选择
    var areaList = jQuerty('.areaList')
})


// 写法二
$(function(){
    // 根据id进行选择
    var username = $('username')
    var username = jQuery('username')
    // 根据标签进行选择
    var pList = $('p')
    // 根据class进行选择
    var areaList = jQuerty('.areaList')
})


// 写法三
jQuery(function(){
    // 根据id进行选择
    var username = $('username')
    var username = jQuery('username')
    // 根据标签进行选择
    var pList = $('p')
    // 根据class进行选择
    var areaList = jQuerty('.areaList')
})

        4. 层级选择器

                $("parent > child") parent元素中的指定的child直接子元素

                $("parent child") 所有后代元素

                $("prev + next") 紧贴prev之后的元素

// 层级选择器
var bodyList = $('body *')
var bodyList = $('body p')

var bodyList = $('body > p')

                5. 伪类选择器

                :first/:last —— 第一个，最后一个匹配的元素

                :eq(N) —— 匹配的索引为N的元素

                :even/:odd —— 奇数/偶数个元素

                :checked —— 表单中所有勾选的元素

                :disabled —— 被禁用的元素

// 伪类选择器
var pFirst = $('p:first')

var p2 $('p:eq(1)')

                6. 属性选择器

$('input[name="password"]')

$('input[name]')

                 属性选择器常用条件

                =：等于/相等

                ^=：以**开始

                $=：以**结束

$('input[name^="pass"]')

 三，jQuery属性值的获取

        1. 查询DOM当中的信息

                访问html属性（id,class,style,自定义属性）

                        .attr('class')

                查看HTML/文本信息

                        .html()/text()

                查看表单值信息

                        .val()

        2. jQuery对象转换为DOM对象

                $('#id').get(0)

四，jQuery遍历

        1. 遍历DOM

                length —— 对象的长度

                for循环遍历

                .each循环遍历

                .find()/.childen()等筛选事件

// for循环遍历
for(var i=0; i<pList.length; i++){
    var item in pList[i];
    console.log(item)
}

// each函数循环遍历
pList.each(function(index, value){
    console.log(index, value);
})


$.each(pList, function(index, value){
    console.log(index, value);
})


// find使用
pList.find('p')

 五， jQuery修改DOM信息

        纯废物知识点，cnm的，看见就来气，污染代码的东西

六，jQuery中的事件

        真尼玛傻逼，不建议学习