jQuery 基础

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events

jQuery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象

jQuery是通过$符号进行调用，同样的支持jQuery,

<p>ppp</p>
	<script src="jquery-3.2.1.js"></script>
	<script>
		$("p").css("color","red");
		var $ele=$("p");//这是jQuery对象
		//var $ele=jQuery("p");//和上面的效果是一样的

jQuery对象转换成DOM对象

$variable[0]：jquery对象转为dom对象

<p>ppp</p>
	<script src="jquery-3.2.1.js"></script>
	<script>
		$("p").css("color","red");
		var $ele=$("p")[0].innerText;//把jQuery对象转换成DOM对象 
		console.log($ele);

jquery的基础语法：$(selector).action()

寻找元素(选择器和筛选器)

选择器

小技巧： 删除ul li 的默认有list-syle:none；
快速建ul li ul>li*4 就是快速建立4个

基本选择器

<p>p</p>
<p>pp</p>
<p id="p2">ppp</p>
<p class="p3">pppp</p>

	<script src="jquery-3.2.1.js"></script>
	<script>
		// $("*").css("color","red");//全部的
		// $("#p2").css("color","red");//找ID
		// $(".p3").css("color","red");//找class
		$(".p3,#p2").css("color","red");//找class ID多个用逗号分开
	</script>

层级选择器

	    $(".outer p").css("color","red");//div内全部的
	    $(".outer>p").css("color","red");//子代
	    $(".outer+p").css("color","red");//毗邻
	    $(".outer~p").css("color","red");//兄弟
	    $(".p1~div").css("color","red");//兄弟

基本筛选器

	<script>
		// $("li:first").css("color","red");//第一个
		// $("li:last").css("color","red");//最后一个
		// $("li:eq(2)").css("color","red");//索引是第二个
		// $("li:gt(2)").css("color","red");//大于
		$("li:lt(2)").css("color","red");//小于
        // $("li:even").css("color","red");//偶数
		$("li:odd").css("color","red");//奇数
	</script>

属性选择器

<div aa="sb">aaa</div>
<div aa="sbb">aabbba</div>
<script>
		$("[aa]").css("color","red");//这种是自定义的属性
		$("[aa=sb]").css("color","red");//这样就能找到唯一的一个
	</script>

表单选择器

<input type="text">
<input type="pwd">
<script>
		// $("[type=text]").css("border","2px solid red");
		$(":text").css("border","2px solid red");//这个仅仅适用于input
	</script>

实例 1：左侧菜单

过滤筛选器

		
		//$("ul li:eq(2)").css("color","red");//

查找筛选器

// $("ul li").eq(2).css("color","red");//推荐用这个
        var $ret=$("ul li").eq(2).hasClass("item");//有返回值是true 没有返回值是false

筛选器

孩子组

<div class="div1">
	<div class="div2">
		<p id="p1">222</p>
	</div>
	<p id="p2">ppp</p>
	<a href="">111</a>
</div>
    <script>
		$(".div1").children("p").css("color","red");//找子代
		$(".div1").find("p").css("color","red");//找后代 儿子 孙子
	</script>

兄弟

sibilings是js中没有的

<ul>
		<li class="item active">111</li>
		<li class="item">222</li>
		<li class="item">333</li>
		<li class="item items">444</li>
		<li class="item ">555</li>
		<li class="item">666</li>
		<li class="item ">777</li>

	</ul>
<script>
$(".active").next().css("color","red");//找下一个
		$(".active").nextAll().css("color","red");//找下面的全部
		$(".active").nextUntil(".items").css("color","red");//区间 但是找不到itmes的哪一个
		//自己出错的点是.items没有加上点
		$(".items").siblings().css("color","red");//除了这个之外的所有的兄弟
</script>

jQuery支持链式操作

这里的关键是最后操作的结果是self().next这一级别，下面还有next的话，就是下一级

 function show(self){
 $(self).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
          }

属性操作

arrt

适合操作自定义属性，内部定义的是undefined

prop

选择框选上的是时候是true,否则是false

$(":checkbox")
[input, prevObject: jQuery.fn.init(1)]
$(":checkbox").prop("checked")
true
$(":checkbox").prop("checked")
false