jQuery的简单总结

简介

jQuery是javascript的一个javascript的库.
jQuery的用处:极大的简化了javascript的编程.
jQuery官网:https://jquery.com/
在js中引用jQuery

<script src="jQuery地址"></script>

1.js与jQuery对象的相互转换.

<div class="box">
	<p class="p">第一个标签</p>
	<p>第二个标签</p>
	<p>第三个标签</p>
</div>

// js转换为jQuery
let p =document.getElementsByTagName("p");
console.log(jQuery(p));
console.log($(p));
//jQuery对象转换为js对象
let p1 = $("p");
console.log(p1[0]);
console.log(p1.get(0));

2.jQuery操作css

<div>
	我是一个div
</div>

<style type="text/css">
		div{
			width:200px;
			height:200px;
			border:1px solid;
		}
</style>

//获取css属性
console.log($("div").css("background-color"));
//设置css属性
jQuery("div").css({"background-color":"red","width":"400px"});

3.jQuery操作html
3.1jQuery的选择器

<div id="box">
	<p class="p1">第一个p标签</p>
	<p class="p2">第二个p标签</p>
	<p class="p3">第三个p标签</p>
	<p class="p4">第四个p标签</p>
	<p class="p5">第五个p标签</p>
	<p class="p6">第六个p标签</p>
	<div>
		<p class="p7">这是第七个p标签</p>
	</div>
</div>

// $("css选择器")
//id选择器
console.log($("#box"));
//class选择器
console.log($(".p1"))
//标签选择器
console.log($("p"));
//群选择器
console.log($("p,div"));
//后代选择器
console.log($("div .p3"));
console.log($("div .p7"));
//子选择器
console.log($("div>.p7"));
//属性选择器
console.log($("[class]"));
console.log($("p:not([class=p7])"));
//第一个元素
console.log($("p:first"));
//最后一个元素
console.log($("p:last"));
//获得偶数
console.log($("p:odd"));
//获得奇数
console.log($("p:even"));
//获取索引值大于2的标签
console.log($("p:gt(1)"));
//获取索引值小于2的标签
console.log($("p:lt(1)"));
//选择其中的一个
console.log($("p:eq(2)"));
console.log($("p").eq(2));

3.2jQuery的筛选

<div id="box">
	<p class="p1">第一个p标签</p>
	<p class="p2">第二个p标签</p>
	<p class="p3">第三个p标签</p>
	<p class="p4">第四个p标签</p>
	<p class="p5">第五个p标签</p>
	<p class="p6">第六个p标签</p>
	<div>
		<p class="p7">这是第七个p标签</p>
	</div>
</div>

//筛选
//p标签中的第一个
console.log($("p").first());
//p标签中的最后一个
console.log($("p").last());
//获取父亲节点
console.log($(".p7").parent().parent());
//获取id=box的所有后代元素
console.log($("#box").children());
//获取后代元素中class=.p4的元素
console.log($("#box").children(".p4"));
//查找子元素中类名为p6的子元素
console.log($("#box").find(".p6"));
//下一个next()
console.log($(".p3").next().next());
//下的所有
console.log($(".p3").nextAll());
//上一个prev
console.log($(".p3").prev());
//上的所有
console.log($(".p3").prevAll());
//sibling()获取同一级别的所有元素
console.log($(".p3").siblings());
//获取同辈中class为p4的元素
console.log($(".p3").siblings(".p4"));

3.3jQuery添加或删除元素

<div id="box">
	<p>我是一句话</p>
	<p class="p">我是另一句话</p>
	<div class="box1">
		<p class="p2">他好</p>
	</div>
</div>

//在元素后添加内容
$("#box").append("<p>我又写了一句话</p>");
//将对象添加到后面
$("<p>我又又写了一句话</p>").appendTo($("#box"));
//元素之后添加内容
$(".p").after("我是一句话");
//元素之前添加内容
$(".p").before("你好");
//插入到元素结尾后面
$("<span>我在后面</span>").insertAfter($("#box"));
//插入到元素的前面
$("<p>我在前面</p>").insertBefore($("#box"));
//删除元素
$(".p").remove();
//把段落的子元素和父元素同时清空,保留父元素框架
$(".p2").empty();

3.4jQuery效果

<div>
	<button>隐藏</button>
	<button>显示</button>
	<p>我是一个p标签</p>
</div>

p{
	width:200px;
	height:200px;
	border:1px solid;
}

let button=document.getElementsByTagName("button");
button[0].onclick=function(){
	$("p").hide(1000);
	// $("p").css("display","none");
};
button[1].onclick=function(){
	$("p").show(2000);
	// $("p").css("display","");
}

3.5jQuery获取属性

<div id="box">
	<p class="p">p标签</p>
	请输入:<input type="text" value="你好">
</div>

//获取html内容
console.log($("p").html());
//更改html标签内的内容
console.log($("p").html("你好"));
//获取文本值
console.log($("p").text());
//更改文本值
console.log($("p").text("他好"));
//获取属性值
console.log($("p").attr("class"));
//更改属性值
$("p").attr("class","p1");
$("input").attr("class","text");
//其他
// 获取input的value值
console.log($("input").val());
//更改input的valu值
$("input").val("他好");
//removeAttr("属性名");删除一个属性
$("input").removeAttr("value");
//向指定标签添加一个类名
$("input").addClass("class-input");
//删除全部或指定的类,括号内不写任何值会导致全部删除.
$("input").removeClass("class-input");
//获取/设置属性值
console.log($("input").prop("value"));
$("input").prop("value","大家好");
//删除由prop()方法设置的属性值.
$("input").removeProp("value");

3.6jQuery的循环

<ul>
	<li>第一个</li>
	<li>第二个</li>
	<li>第三个</li>
</ul>

/ 遍历的语法
//jQuery循环对象.each(function(index,elem){代码})
//$.each(jQuery/js循环对象,function(index,elem){代码})
//两种写法,第二种写法可以写js对象,遍历对象时,可以很好的遍历,第一种形式遍历对象时显示0
let arr = [1, '2', 'nihao'];
let boj = {"name":"fyh","age":20,"sex":"nan"};
$("li").each(function(index, elem) {
	console.log(index);
	console.log(elem);
});
$.each($("li"), function(index, elem) {
	console.log(index);
	console.log(elem);
});
$(arr).each(function(index, elem) {
	console.log(index);
	console.log(elem);
});
$.each(arr,function(index,elem){
	console.log(index);
	console.log(elem);
});
$(boj).each(function(index,elem){
	console.log(index);
	console.log(elem);
});
$.each(boj,function(index,elem){
	console.log(index);
	console.log(elem);
});

3.7jQuery中的事件.

<button id="but-1">单击事件</button>
<button class="but-2">双击事件</button>
<input type="text">

// jQ对象.事件(function(){})
$("#but-1").click(function(){
	console.log(this);
});
$(".but-2").dblclick(function(){
	console.log(this)
});
//jQ对象.on('事件',function(){});
//jQ对象.on("事件1":function(){},"事件2":function(){})
$("input").on({
	"click":function(){
		alert("hello");
	},"keydown":function(){
		alert("111");
	}
})