jQuery的基础语法

jQuery的基础语法

jQuery是一个js库，方便，简单，易学。
$元素代表jQuery对象，要使用jQuery，必须先引用，$可以用对象，也可以用函数，即可以带括号，也可以点出来。

$(document).ready(function (){
         $("#btn").html("按钮").css({
         backgroundColor:"red"
         }).click(function (){
         alert("1");
         });
         });

window.onload=function (){
         var btn=document.getElementById("btn");
         console.log(btn);
         }

window.onload是在js中的等页面全部（包括图片）加载完，$(document).ready(function (){});是在jQuery中文档结构已经加载完（但是图片这些不一定加载完毕）。

window.onload    $(function (){}) 上述的简写方式

在写jquery代码的时候要注意元素的初始化问题
jquery不可以直接操作dom方法，反之一样。但是可以相互转换。

jQuery选择器（支持css1~3的大多数）
1.基本选择器

	console.log($('#btn'));//id选择器
    console.log($('.btn1'));//类选择器
    console.log($('button'));//类名称选择器
    console.log($('*'));//全部选择器
    console.log($(".btn1,#btn,button"));//多选器

2.层次选择器

	console.log($("ul li"));//后代选择器
    console.log($("ul>li"));//子代选择器
    console.log($(".li3+li"));//临近原则器，即之后相邻的元素，必须相邻的元素
    console.log($(".li3~li"));//之后选择器，即之后有就行

3.过滤选择器
(1)简单过滤

	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(2)"));//等于，索引
    console.log($("ul>li:not(.li3)"));//除了被选择元素

(2)内容过滤

	console.log($("li:contains('2')"));//内容包括2
    console.log($("div:empty"));//为空
    console.log($("div:parent"));//为父元素的div
    console.log($("div:has('span')"));//含有span元素的div

(3)可见性过滤

	console.log($(".btninput:visible"));//选择可见的
    console.log($(".btninput:hidden"));//选择不可见的元素

(4)属性选择器

	console.log($("button[id='btn'][class='btn1']"));//id为btn，class为btn1的button

(5).子元素过滤选择器

	console.log($("ul>li:nth-child(2)"));//第2个，顺序
    console.log($("ul>li:first-child"));//第一个
    console.log($("ul>li:last-child"));//最后一个
    console.log($("div>p:only-child"));//只有一个

(6).表单元素属性过滤（只给表单元素）

	console.log($("input[type='checkbox']:checked"));//已选
    console.log($("input[type='radio']:checked"));//已选
    console.log($("input:checkbox"));
    console.log($("input:radio"));
    console.log($(":input"));//包括各种button，input，select等
    console.log($("input:text"));