jQuery入门及常用API

jQuery入门

jQuery 是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。
1>提供了强大的功能函数
2>解决浏览器兼容性问题
3>纠正错误的脚本知识
4>体积小，使用灵巧(只需引入一个js文件)
5>易扩展、插件丰富

jQuery的作用

* 程序员的角度：简化JavaScript和Ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
* 用户体验的角度：改善了页面视觉效果，增强了与页面的交互性，体验更绚丽的网页物资。
方便地选择页面元素(模仿CSS选择器更精确、灵活)
动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)
控制响应事件(动态添加响应事件)
提供基本网页特效(提供已封装的网页特效方法)
快速实现通信(ajax)。

jQuery的导入

本地导入  
远程cdn导入

包装集和原生DOM的转换

原生转jQuery
	$(原生dom)：返回jQueryDOM
	jQuery中innerHTML为html()
	无论是单个元素还是多个元素,全部存在包装集中
jQuery转原生
	let oP=$("p")[1]   其等价于let oP=$("p").get(1);
	将下标为0的jQuery对应的原生对象返回

延迟加载

原生延迟加载
  	window.onload=function(){	}
jQuery延迟加载
简写：
	jQuery(function(){
	     console.log();
	});
完全体：
	$(document).ready(function(){
	   console.log();
	})

jQuery选择器

基础选择器

ID选择器
	$("#box1").css({
        backgroundColor: "red"
    });
类选择器
 	 $(".box").css({
        backgroundColor: "hotpink"
    });
标签选择器
 	 $("p").css({
        backgroundColor: "yellow"
    });

群组选择器

	$("span,strong").css({
        backgroundColor: "green"
    });

通用选择器

	 $("*").css({
        backgroundColor: "skyblue"
    });

层次选择器

		后代选择器
	$("body div").css({
        backgroundColor: "red"
    });
		子代选择器
	 $("body>div").css({
        backgroundColor: "red"
    });
		相邻选择器
	 $("#box2+div").css({
        backgroundColor: "red"
    });
		兄弟选择器
	  $("#box2~div").css({
        backgroundColor: "red"
    });

属性选择器

通过属性来获取标签
	 $("div[class]").css({
        backgroundColor: "red"
    });
通过属性值来获取标签
	 $("div[id=box1]").css({
        backgroundColor: "red"
    });
多属性组合
	 $("div[id][class]").css({
        backgroundColor: "red"
    });

伪类选择器

even获取偶数行元素
	$("div:even").css({
        backgroundColor: "red"
    });
odd获取奇数行元素
	$("div:odd").css({
        backgroundColor: "yellow"
    });
first选取第一个元素
	$("div:first").css({
        backgroundColor: "blue"
    });
last选中最后一个元素
			   $("div:last").css({
        backgroundColor: "green"
    });
eq(index)：获取index对应的元素
			   let n = 2;
    $(`div:eq(${n})`).css({
        backgroundColor: "hotpink"
    });

			let n = 2;
  $("div").eq(n).css({
        backgroundColor: "skyblue"
    });
not：除了该元素
	$("div:not(#box2)").css({
        backgroundColor: "red"
    });
   $("div").not("#box3").css({
        backgroundColor: "red"
    });
gt（N）：大于N的所有元素
	$("div:gt(2)").css({
        backgroundColor: "red"
    });

lt(N):小于N的所有元素
	$("div:lt(2)").css({
        backgroundColor: "red"
    });

内容选择器

contains("字符串")：返回有该字符串的元素
	 <div id="">
        hello world
    </div>
    $("div:contains('hello world')").css({
        backgroundColor: "red"
    });

empty：选中空内容的元素

$(“div:empty”).css({
backgroundColor: “red”
});
has(元素):包含某个元素的元素

	<div id="">
        3
        <span id="s"></span>
    </div>
   $("div:has(span)").css({
        backgroundColor: "red"
    });

可见性选择器

改变不可见元素的样式
	<table>
        <tr style="display:none">
            <td>Value 1</td>
        </tr>
    </table>
 $("tr:hidden").css("background", "green");

改变可见元素的样式
	<table>
        <tr>
            <td>Value 2</td>
        </tr>
    </table>
$("tr:visible").css("background", "red");

节点间遍历

	 <div id="box0">
        0
        <p>00</p>
        <div id="">

        </div>
    </div>
    <div id="box1">
        1
        <p>11</p>
    </div>
    <div id="box2">
        2
        <p>22</p>
    </div>
    <div id="box3">
        3
        <p>33</p>
    </div>
    <div id="box4">
        4
        <p>44</p>
    </div>
    <ul>
        <li>666</li>
    </ul>

兄弟节点之间的遍历

next：下一个元素
	$("#box1").next().css({
        backgroundColor: "red"
    });
nextALL：下一堆元素
	$("#box1").nextAll().css({
        backgroundColor: "red"
    });
prev:上一个元素
	$("#box1").prev().css({
        backgroundColor: "red"
    });
prevALL:上一堆元素
	$("#box3").prevAll().css({
        backgroundColor: "red"
    });

父子节点之间的遍历
父找子

find(参数)：后代遍历的方法
	$("body").find("div").css({
        backgroundColor: "red"
    });

chlidren([参数])：找子代元素
	 $("body").children().css({
        backgroundColor: "red"
    });

子找父

	 $("p").eq(3).parent().css({
        backgroundColor: "red"
    }).next().css({
        backgroundColor: "yellow"
    });

parents()找到所有的父元素