开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> jQuery -> 正文阅读

[JavaScript知识库]jQuery

1 jq概述

2 操作内容

1 jq概述

????????jQuery是一款优秀的javascript的轻量级框架之一，封装了dom操作、事件绑定、Ajax等功能。jq是js的一个库。

????????当前页面如果想使用jq，需要引入jq的库，通script标签中的src属性进行即可

Jq与js页面加载的区别

js: 只能定义一次，如果定义多次，后面会将前面的进行给覆盖掉

jq: 可以定义多次

2 操作内容

alert($("#mydiv").html());//获取内容

$("#mydiv").html("aaa");//改变内容

2.1 jq与js的转换

????????jQuery虽然本质上也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象。

????????通过js方式获取的是js对象，通过jQuery方式获取的是jQuery对象。

????????js转jq??

//$(js对象)
$(document.getElementById("mydiv")).html("js 转? jq");

????????jq转js

//jq对象[索引]
//jq对象.get(索引)
$("div")[0].innerHTML = "jq转成js方式一";
$("div").get(1).innerHTML = "jq转成js方式二"

3 事件绑定

方式一

$("button").click(function(){
???? $("p").hide();//p会被隐藏标签
???? $("p").hide("slow");//用600毫秒的时间将段落缓慢的隐藏
?});

方式二

$("#btn").on("click",function () {
??? alert("我被点击了。。")
?})

解绑

$("#btn2").click(function () {
??? $("#btn").off("click");//解绑指定单击事件
??? $("#btn").off();//解绑所有事件
});

4 Jq操作css样式

$("li").mouseover(function () {
???$(this).css("background","orange");
}).mouseout(function () {
????$(this).css("background","white");
});

5 jq选择器

5.1 基本选择器

$("html标签名")? ? ? ? ?标签选择器

$("#id的属性值")? ? ? ? ?id选择器

$(".class的属性值")? ? ? ? ?类选择器

$("选择器1,选择器2....")? ? ? ? ?组合选择器

$(function(){
	// 标签选择器
	console.info($("span").text());
	// id选择器
	console.info($("#dlrb").text());
	// 类选择器
	console.info($(".male").text());
	// 组合选择器
	console.info($("#dlrb,.hero").text());
});

5.2 层级选择器

$("A? B")? ? ? ? 后代选择器

$("A>B")? ? ? ? 父子选择器

$("A~B")? ? ? ? 兄弟选择器

$("A+B")? ? ? ? 跟班选择器

$(function(){
	// 祖宗后代选择器
	console.info($("div span").text());
	// 父子选择器
	console.info($("div>span").text());
	// 兄弟选择器
	console.info($("span~p").text());
	// 跟班选择器
	console.info($("span+p").text());	
});

5.3? 基本筛选器

:first? ? ? ? 首行元素选择器

:last? ? ? ? 尾行元素选择器

:even? ? ? ? 偶数选择器

:odd? ? ? ? 奇数选择器

:gt()? ? ? ? 大于索引选择器

:lt()? ? ? ? 小于索引选择器

:eq()? ? ? ? 等于索引选择器

:header? ? ? ? 标题元素选择器

:animated? ? ? ? 正在执行动画效果选择器

:focus? ? ? ? 当前获得焦点元素

:root? ? ? ? 当前文档（html）根元素?

$(function(){	
	// 1．设置表格第一行，显示为红色
	$("tr:first").css("background","red");	
	// 2．设置表格除第一行以外 显示为蓝色
	$("tr:gt(0)").css("background","blue");	
	// 3．设置表格偶数行背景色 金色
	$("tr:even").css("background","yellow");
	// 4．设置表格奇数行背景色 绿色
	$("tr:odd").css("background","green");				
	// 5．设置页面中所有标题 显示为灰色
	$(":header").css("color","gray");
	// 6．设置页面中正在执行动画效果div背景黄色	
	$("div").click(function(){
		$(this).slideUp("slow");
		$("div:animated").css("background","green");
	});						
	// 7. 设置<html>背景颜色为金色
	$(":root").css("background","yellow");	
});

5.4 内容过滤选择器

:contains(text)? ? ? ? 包含给定文本的元素

:empty? ? ? ? 不包含子元素或文本的空元素

:has()? ? ? ? 含有选择器所匹配的元素的元素

:parent? ? ? ? 含有子元素或文本的元素

$(function(){	
	// 1．设置含有文本内容 ”公园” 的 div 的字体颜色为红色
	 $("div:contains(公园)").css("color","red");	 
	// 2．设置没有子元素的div元素 文本内容 ”这是一个空DIV“
	 $("div:empty").text("这是一个空DIV").css("color","red");	 
	// 3．设置包含p元素的div背景色为黄色
	$("div:has(p)").css("background","yellow");	 
	// 4．设置所有含有子元素span的字体为蓝色
	$("span:parent").css("color","blue");	
});

5.5 可见性过滤选择器

:hidden? ? ? ? 匹配所有不可见元素

:visible? ? ? ? 匹配所有可见元素

$(function(){
	//1、选中from中不可见元素，添加class属性
	//匹配所有display:none 或者 input中的 type:hidden 元素
	$("input:hidden").attr("class","cla");
	$("tr:hidden").addClass("cla");	
	//2．设置table所有 可见 tr 背景色 金色
	$("tr:visible").css("background","yellow");
	//3．设置table所有 隐藏tr 字体颜色为红色，显示出来 
	$("table tr:hidden").css("color","red").show();	
});

5.6 属性选择器

$("A[属性值]")? ? ? ? ? ? ? ? 包含指定属性

$("A[属性名='值']")? ? ? ? 包含指定属性值

$("A[属性名！='值']")? ? ? ? 不包含指定属性值

$("A[属性名^='值']")? ? ? ? 以某元素开始的属性

$("A[属性名$='值']")? ? ? ? 以某元素结尾的属性

$("A[属性名*='值']")? ? ? ? 包含某元素的属性

$("A[属性名='值'] []...")? ? ? ? 包含多个属性

<script>	
	// 1.获取type 的input标签
	$("input[type]").attr("id","inputid");	
	// 2.获取type=“password”的input标签
	$("input[type='password']").attr("autocomplete","off");	
	// 3.获取属性名以xx开始
	$("input[name^='n']").attr("abc","111");	
	// 4.获取属性名以xx结尾
	$("p[class$='i']").css("color","red");	
	// 5.属性值中包含的属性
	$("input[name*='us']").attr("abc","222");	
	// 6.获取 type ='text' 并且 name='nickname' 的标签
	$("input[type='text'][name='nickname']").attr("abcd","333");		
</script>

5.7 子元素过滤选择器

:first-child? ? ? ? 匹配所给选择器的第一个子元素

:last-child????????匹配所给选择器的最后第一个子元素

:nth-child? ? ? ? 匹配父元素下指定元素（n , odd , even）

:only-child????????如果某个元素是父元素中唯一的子元素，那将会被匹配

:first-of-type? ? ? ? 匹配其父元素下第一个此类型的孩子，等价于nth-of-type(1)

:last-of-type????????匹配其父元素下最后第一个此类型的孩子

<script>
	// 1.在每个表格 下3的倍数行，字体颜色为红色 3 6 9 12
	$("tr:nth-child(3n)").css("color","red");	
	// 2.每个表格 奇数行 背景色 黄色
	$("tr:nth-child(odd)").css("background","yellow");	
	// 3.每个表格 偶数行 背景色 灰色
	$("tr:nth-child(even)").css("background","gray");	
	// 4.每个tr 只有一个td的  字体为 蓝色
	$("td:only-child").css("color","blue");		
</script>