Jquery 基础

Jquery 入口函数

$(function(){
	... //此处是页面DOM加载完成的入口 
})

$(document).ready(function(){
	... //此处是页面DOM加载完成的入口 	
})

Jquery 内容和属性

text()  设置或返回所选元素的文本内容 $("选择器").text("Hello world!")
html()  设置或返回所选元素的内容（包括 HTML 标记） $("选择器").html("<b>Hello world!</b>")
val()   设置或返回表单字段的值 $("选择器").val("RUNOOB")

attr()  用于获取我们自己自定义的 DOM 属性 $("选择器").attr("href","www.runoob.com") 
prop()  用于获取元素本身就带有的固有属性 $("选择器").prop("href","www.runoob.com")

Jquery 效果

show([speed,[easing],[fn])  显示 $("div").show()
hide([speed,[easing],[fn]]) 隐藏 $("div").hide()
toggle([speed],[easing],[fn]) 切换 $("div").toggle()

slideDown([speed],[easing],[fn]) 下滑动 $("div").slideDown();
slideUp([speed,[easing],[fn]]) 上滑动 $("div").slideUp(500);
slideToggle([speed],[easing],[fn]) 切换 $("div").slideToggle(500);

fadeIn() 淡入效果 $("div").fadeIn(1000);
fadeOut() 淡出效果 $("div").fadeOut(1000);
fadeToggle() 淡入淡出切换  $("div").fadeToggle(1000);
fadeTo() 修改透明度，这个速度和透明度要必须写 $("div").fadeTo(1000, 0.5);

animate(params,[speed],[easing],[fn])  用于创建自定义动画的函数
$(function() {
    $("button").click(function() {
        $("div").animate({
            left: 500,
            top: 300,
            opacity: .4,
            width: 500
        }, 500);
    })
})

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

Jquery 样式操作

$("p").css("background-color");  参数只有属性名，则返回属性值
$("p").css("background-color","yellow"); 参数有属性名和属性值，则修改属性值
$("p").css({"background-color":"yellow","font-size":"200%"}); 修改多个属性值

<style> .mydiv { color: aqua } .important { font-weight:bold }</style>

$(this).addClass("mydiv important ")  追加类 不影响以前的类 addClass()
$(this).removeClass("mydiv important ") 删除类 不影响以前的类 removeClass()
$(this).toggClass("mydiv important ") 切换类 不影响以前的类 toggClass() 添加类 移除类

Jquery 筛选方法

parent()                  查找父级。 $("li").parent()
children(selector)        相当于$("ul>li")，最近一级(亲儿子)。 $("li").children("li")
find(selector)            相当于$(""ul li""),后代选择器。 $("ul").find("li");
siblings(selector)        查找兄弟节点，不包括自己本身。 $(".first").siblings("li");
nextAll([ expr])          查找当前元素之后所有的同辈元素。 $(".first") .nextAll()
prevtAll([expr])          查找当前元素之前所有的同辈元素。 $(".last") .prevAll()
hasclass(class)           检查当前的元素是否含有某个特定的类，如果有，则返回true 
						  $('div').hasClass("protected")
eq(index)                 相当于$("li:eq(2)" ) ,index从0开始。 $(""li").eq(2);
index()					  $(this).index() 获取当前元素的索引

Jquery 遍历元素

each(callback)  如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）得到的元素是DOM对象
$("div").each(function(i, e) {
    // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
    // console.log(index);
    // console.log(i);
    // 回调函数第二个参数一定是 dom元素对象 也是自己命名
    // console.log(e);
    // e.css("color"); dom对象没有css方法
    $(e).css("color", arr[i]);
    sum += parseInt($(e).text());
})

$.each(object, [callback] 方法遍历元素 主要用于遍历数据，处理数据 object 遍历的元素，可以遍历 对象 数组 ... 
$.each({ name: "andy",age: 18 }, function(i, ele) {
    console.log(i); // 输出的是 name age 属性名
    console.log(ele); // 输出的是 andy  18 属性值
})

Jquery 创建 添加 删除元素

// 1. 创建元素
var li = $("<li>我是后来创建的li</li>");
// 2. 添加元素
// (1) 内部添加
// $("ul").append(li);  内部添加并且放到内容的最后面 
$("ul").prepend(li); // 内部添加并且放到内容的最前面
// (2) 外部添加
var div = $("<div>我是后妈生的</div>");
// $(".test").after(div); 放到内容的最后面 
$(".test").before(div); 放到内容的最前面
// 3. 删除元素
// $("ul").remove(); 可以删除匹配的元素 自杀
// $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子

Jquery 事件注册

 1. 单个事件注册
 $("div").click(function() {
     $(this).css("background", "purple");
 });
 $("div").mouseenter(function() {
     $(this).css("background", "skyblue");
 });
 
2. 事件处理 on(events,[selector],[data],fn) 
 (1) on可以绑定1个或者多个事件处理程序
 // 多个事件不同操作
 $("div").on({
     mouseenter: function() {
         $(this).css("background", "skyblue");
     },
     click: function() {
         $(this).css("background", "purple");
     },
     mouseleave: function() {
         $(this).css("background", "blue");
     }
 });
// 多个事件同一个操作
$("div").on("mouseenter mouseleave", function() {
    $(this).toggleClass("current");
});

(2) on可以实现事件委托（委派）
$("ul li").click();
$("ul").on("click", "li", function() {
    alert(11);
});
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li

(3) on可以给未来动态创建的元素绑定事件
$("ol li").click(function() {
     alert(11);
})
$("ol").on("click", "li", function() {
    alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);

Jquery 事件解绑

 1. 事件解绑 off 
 $("div").off();  // 这个是解除了div身上的所有事件
 $("div").off("click"); // 这个是解除了div身上的点击事件
 $("ul").off("click", "li"); // 解除事件委托
 
 2. one() 只触发事件一次
 $("p").one("click", function() {
     alert(11);
 })

Jquery 自动触发事件

$(function() {
    $("div").on("click", function() {
        alert(11);
    });
    // 自动触发事件
    // 1. 元素.事件()
    // $("div").click();会触发元素的默认行为
    // 2. 元素.trigger("事件")
    // $("div").trigger("click");会触发元素的默认行为
    $("input").trigger("focus");
    // 3. 元素.triggerHandler("事件") 不会触发元素的默认行为 例如 input 获得焦点 光标闪烁
    $("div").triggerHandler("click");
    $("input").on("focus", function() {
        $(this).val("你好吗");
    });
    // $("input").triggerHandler("focus");
});

Jquery 事件对象 event

$(function() {
    $(document).on("click", function() {
        console.log("点击了document");
    })
    $("div").on("click", function(event) {
        // console.log(event);
        console.log("点击了div");
        // 阻止冒泡 stopPropagation() 阻止默认行为 preventDefault()
        event.stopPropagation();
    })
})

Jquery 对象拷贝

$.extend([deep], target, object1, [objectN]
deep: 如果设为taur为深拷贝，默认false 浅拷贝会覆盖对象原来的数据
target：拷贝目标对象
object1：待拷贝到第一个对象的对象

var targetObj = {};
var obj = {
    id: 1,
    name: "andy"
};
// 把obj 拷贝到targetObj 
$.extend(target, obj);
console.log(targetObj);

Jquery 多库共存

$(function() {
    function $(ele) {
        return document.querySelector(ele);
    }
    console.log($("div"));
    // 1. 如果$ 符号冲突 我们就使用 jQuery
    jQuery.each();
    // 2. 让jquery 释放对$ 控制权 让用自己决定 noConflict()
    var suibian = jQuery.noConflict();
    console.log(suibian("span"));
    suibian.each();
})

Jquery 插件

常用 Jquery 插件网站
Jquery 插件库 https://www.jq22.com/
Jquery 之家 http://www.htmleaf.com/ （推荐）

Jquery 尺寸位置操作

width() / height() 获取设置元素 width和height大小  $("div").width(300);
innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小 $("div").innerWidth()
outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小  $("div").outerWidth()
outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin $("div").outerWidth(true)

offset() 获取设置距离文档的位置（偏移）
$(".son").offset() // 获取 上下左右
$(".son").offset().top // 获取 上
$(".son").offset({ // 设置
    top: 200,
    left: 200
});

position() 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准，这个方法只能获取不能设置偏移
$(".son").position() // 获取

scrollTop() 滚动被卷去的头部 $(document).scrollTop()
$(window).scroll(function() {  //window 滚动事件
    // console.log(11);
    console.log($(document).scrollTop());
});

scrollLeft() 被卷去的左侧

Jquery Ajax请求

 $(function(){
 //请求参数
 var list = {};
 //
 $.ajax({
     //请求方式
     type : "POST",
     //请求的媒体类型
     contentType: "application/json;charset=UTF-8",
     //请求地址
     url : "http://127.0.0.1/admin/list/",
     //数据，json字符串
     data : JSON.stringify(list),
     //请求成功
     success : function(result) {
         console.log(result);
     },
     //请求失败，包含具体的错误信息
     error : function(e){
         console.log(e.status);
         console.log(e.responseText);
     }
 });