[聚合文章] jQuery语法梳理1

初学jquery需要注意的几点：

1.通过JQ获取到的元素是JQ对象，通过元素的document.getXXX获取到的元素是原生对象

2.原生对象不能调用JQ的方法和属性

3.JQ对象不能调用原生对象的方法和属性

JQ对象和原生对象可以相互转换:

1.原生对象如何转JQ对象

var content = document.getElementsByClassName("content")[0];
    $(content).css("color","red");

2.JQ对象如何转原生对象

// JQ对象[0]
// JQ对象.get(0)
    $(".content")[0].innerHTML = "显示";
    $(".content").get(0).innerHTML = "显示2";

常用的语法

1.获取元素 （$("") 里面放字符串-选择器）

类名：$(".item")，标签名：$("div")，输入框的类型：$("input[type=radio]")，筛选类名不是item的div：$("div:not(.item)")。。。

2.创建元素，添加元素，删除元素

1. .append和appendTo 节点子级最前面插入
2. .prepend 和 prependTo 节点子级最后插入
3. .after和.insertAfter 节点（同级）后面插入
4. .wrap给节点包裹一个父级
5. .unwrap去掉父级
6. .wrapInner 给标签的内容加标签
   区别看下列：

// 1.创建标签
$("<p class='item2' style='color:green;'>创建p标签</p>")
// 2.添加元素
// 给p插入一个子级span
$("p").append($("span"))
// 把span插入p里面
$("span").appendTo($("p"))

3.修改/获取css样式

// 获取样式
    console.log($(".content").css("color"));
    // 筛选下标为1的p标签
    console.log($("p").eq(1).css("color"));
// 设置样式
    // 设置样式第一种方式
    $("p").css("color","pink");
    // 设置样式第二种方式
    $("p").css({
        color:"green",
        border: "1px solid red"
    })
    // 设置样式第三种方式
    var cArr = ["black","green","blue","gray","purple","gold"];
    $("P:first").css("color",function(index,oldValue){
        return cArr[index];
    })
    $("p").css({
        width:function(index,oldValue){
            return 100 * (index + 1);
        },
        height:function(){
            return "50px";
            // return this.offsetWidth * 0.5;
        }
    })

JQ的属性和方法

1.document.ready: 和window.onload类似，都是文档加载完毕之后执行。不同点在于document.ready可以绑定多个事件.

// 三种写法
$(document).ready(function(){
    console.log("文档加载完毕");
})
$(document).ready(function(){
    console.log("文档加载完毕2");
})
// 简化版写法。最常用的写法
$(function(){
    console.log("文档加载完毕3")
})

2. 移交$的使用权

   正常情况下$就代表是jQuery.如果和其他变量名有冲突，JQ可以把$的使用权交出去。

// 调用此方法以后，就不能继续使用$来代表JQ
// 用变量接收返回值之后，这个变量就代表JQ
var $$ = $.noConflict();

3.常用的jQ事件

4.属性的获取

$(":button").click(function(){
        // 获取属性
        // attr一般用于获取去/设置自定义属性
        // prop一般用于获取自带属性
        // 获取src的时候，prop是绝对路径
        console.log($(":checkbox").attr("checked"));
        // 获取系统自带的属性可以使用prop
        console.log($(":checkbox").prop("checked"));
        // 设置属性
        $(":checkbox").attr("checked",true);
        console.log($(":button").prop("index"));
        console.log($(":button").attr("index"));

        // $(".box").addClass("box");
        // 添加，移出，切换类名
        $(".box").toggleClass("box1");
    })

5.标签内容

.html 元素内容 相当于innerHTML

.text 元素内容

.val 文本框的值 相当于js的value

6. 效果
   1.自定义动画 .animate（）
   2.隐藏 .hide()
   3.淡入 用于隐藏元素 .fadeIn()
7. 淡出 .fadeOut()
   5.淡入状态时为淡出，反之为淡入 .fadeToggle()
8. 向上滑动 .slideUp()
   7.向下滑动 .slideDown()
   8.停止未执行的动画 .clearQueue()