jQuery是javascript的库
一、初识jQuery
jquery是由很多程序员编写的简写函数库
1、选择器
var div=document.getElementByTagname("div")[0];//原生JS
var div=$("div");//jquery
2、事件机制
div.addEventListener("div",clickhandler);
function clickHandler(e){
}//原生JS的点击事件
div.on("click",{a:1},function(e){
});//jquery的点击事件
3、AJAX
var xhr=new XMLHTTPRequest();
xhr.addEventListener("load",loadHandler);
xhr.open("POST","URl");
xhr.send("a=1")//原生JS
$.post("url","a=1",function(){
});//jquery
二、基础选择符
jQuery对象是一个类数组,不能使用数组的方法,不能使用DOM的方法和属性
$()===jQuery(); //$===jQuery 都是函数,它也是构造函数,也是类,对象
$("div").text("a");
console.log($("div"));//这是一个类数组
//jQuery对象.eq(index)获取到jQuery中某一个jQuery对象
$("div").eq(0).text("a");
console.log($("div").eq(0));
//这个就是jQuery对象转换成DOM对象的方法
//通过jQuery[index]这种方法调用的结果就是DOM元素
console.log($("div")[0]);
$("div")[0].textContent="a";
//DOM对象的所有属性和方法不能在jQuery对象上使用,
//同理jQuery的所有属性和方法,DOM中同样也不可以使用;
//$(#id名)
console.log($("#div0"));
//$(.class名)
$(".div").text("名字")
//放入文本
$("#div0").text("内容");
//放入HTML标签
$("#div0").html("<div></div>");
//设置多个样式
$("#div0").css({
color:"red",
width:"100px"
});
//侦听事件
$("#div0").on("click",function(e){
console.log(e);
});
$("#div0").on("click",clickHandler);
//这种比较好,就一个函数
//上面在循环的过程中会出现多个函数
function clickHandler(e){
}
三、进阶选择器
<div>1
<div class="div0">2</div>
<div>3
<div class="div0">4
<div>5</div>
</div>
<div>6</div>
</div>
<div>7</div>
</div>
<div>8
<span class="div0">9</span>
</div>
<nav>11
<div class="div0">12</div>
</nav>
<script>
//群组选择器 使用逗号分隔
$("div,span").text("内容");
//后代选择器
$("div div").text("a");
$(".div0"); //所有class名为div0的元素,4个
$("div.div0").css("position","absolute");//所有div并且class名为div0的元素,三个
$(div .div0).css("color","green");//class名为div0并且父元素是div的元素;
通配符
$("*")
$("div *");//div下所有后代元素,不包含当前div;
$("ul *,div *")
</script>
四、高级选择符
<div>1
<div class="div0">2</div>
<div>3
<div class="div0">4
<div>5</div>
</div>
<div>6</div>
</div>
<div>7</div>
</div>
<div>8
<span class="div0">9</span>
</div>
<span>10</span>
<nav>11
<div class="div0">12</div>
<span>13</span>
</nav>
<ul>
<li></li>
<li></li>
<li class="li0"></li>
<li></li>
<li class="li1"></li>
<li></li>
</ul>
<script>
//子代选择器
$("div>.div0")
//相邻兄弟选择器
$(".div0+div")
console.log($(".div0+*"));
//多个兄弟选择器
console.log($(".div0~div"));
$(".div0>div");
$(".div0").find("div");//速度远快于上面,等同于$(".div0 div");
$(".div0").children("div");//等同于$(".div0>div");
console.log($("div").find(".div0"));
//连缀
//如果方法前是一个jQuery对象,我们这个方法就是对这个前面的对象起作用,
//如果前面的不是jQuery对象,就会再向前找到第一个jQuery对象起作用;
$(".div0").find("div").css("backgroundColor","red").text("abc").on("click",function(){
console.log($(".div"))
})
$(".div0").next("div");//等同于$(".div+div");
$(".div0").next().text("a");//等同于$(".div0+*");
$(".li0").next().text("a");
$(".li0").nextAll().text("a");//等同于$(".li0~*");
$(".li0").nextAll(".li1").text("a");//等同于$(".li0~.li1");
$(".li0").nextUntil(".li1").text("a");//从.li0标签向下找到.li1标签之间的内容,不包含.li1
$(".li0").prev();//.li0向上一个元素;
$(".li0").prev(".li1");//.li0向上一个元素是.li1的元素,如果没有就没有选中的;
$(".li0").prevAll();//.li0向上所有的选择器;
$(".li0").prevAll("div");//.li0向上所有哥哥是div的元素;
$(".li0").prevUntil(".li1");//从.li0向上到.li1的所有元素,不包含li1;
$(".li0").siblings().text("a");//从.li0的所有兄弟元素,也就是除了.li0以外的所有元素;
$(".li0").siblings(".li1");//搜索.li0的兄弟元素中是.li1的元素;
</script>
纯手工敲写
如有错误
请多多提醒,评论
谢谢