[JavaScript知识库] jQuery简介及选择器

开发: 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简介及选择器

一、jQuery简介

1、JS的onload事件只能实现一次，而且实现的是最后一次

2、jQ可以实现多次，按代码顺序实现

3、基本语法通过$ 符定义jQuery， $( 选择器 ) . 方法 ( )

<!DOCTYPE html>

<head>

????<meta charset="UTF-8">

????<title>jQuery</title>

????<script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

????// JS onload事件只能实现一次，而且是最后一次

????window.onload = function(){

????????alert("hello js");

????}

????window.onload = function(){

????????alert("hello js--1");

????}

????window.onload = function(){

????????alert("hello js--2");

????}

????// jQuery ?可以实现多次加载

????$(document).ready(function(){

????????alert("hello jQuery");

????})

????$(document).ready(function(){

????????alert("hello jQuery--1");

????})

????$(document).ready(function(){

????????alert("hello jQuery--2");

????})

????// 基本语法

????// 通过$符定义jQuery

????// $(选择器).方法()

</script>

</body>

</html>

4、在jQuery中声明变量需在变量前加$

5、Jq转为JS对象 var jsDiv = $jqObj[0];

6、js转为jq var $jqDiv = $(jsdiv);

<!DOCTYPE html>

<head>

????<meta charset="UTF-8">

????<title>jQuery</title>

????<script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

????$(document).ready(function(){

????????// $区别 jQ和JS的变量

????????var $jqObj = $("#box");

????????$jqObj.html("hello");

????????// jq转换为JS对象,函数不能转

????????var jsDiv = $jqObj[0];

????????// JS转为jQ对象

????????var $jqdiv = $ (jsDiv)

????})

</script>

</body>

</html>

7、Jquery的三种书写方法

①$(document).ready( function () {} )

②$().ready( function () {} )

③$( function () {} )

<!DOCTYPE html>

<head>

????<meta charset="UTF-8">

????<title>jQuery</title>

????<script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

????// 页面加载函数

????// 第一种方法

????$(document).ready(function (){

????})

????// 第二种方法

????$().ready(function(){

????})

????// 第三种方法

????$(function(){

????????

????})

</script>

</body>

</html>

二、jQuery选择器

Ⅰ、基本选择器

①ID选择器

语法 $(“#id”)

相当于JS中的document.getElementById(“id”)

②元素选择器

语法 $(“标签名称”)

相当于JS中的document.getElementsByTagName(“标签名称”)

③类名选择器

语法 $(“.class”)

相当于JS中的document.getElementsByClassName(“class”)

④复合选择器

语法$(“selector1, selectpr2, ?... ”)

⑤通配符选择器

语法 $(“?* ”)

<!DOCTYPE html>

<head>

????<meta charset="UTF-8">

????<title>jQuery?基本选择器 </title>

????<script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<p></p>

????$(function () {

????????// id选择器

????????var $jqDiv = $("#box");

????????$jqDiv.html("ID选择器");

????????// 元素选择器

????????var $jqDiv1 = $("div");

????????$jqDiv1.html("元素选择器");

????????// 类选择器

????????var $jqDiv2 = $(".cls");

????????$jqDiv2.html("类选择器");

????????// 复合选择器

????????var $jqfh = $("span, p");

????????$jqfh.html("复合选择器");

????????// 通配符选择器

????????var $jqt = $("*");

????????$jqt.html("通配符选择器");

????})

</script>

</body>

</html>

Ⅱ、层次选择器

①父子（先辈后辈）选择器

语法 $(“ancestor descendant”)

②父子选择器

语法 $(“parent>child”)

③兄弟选择器

语法 $(“prev+next”)

④同级选择器

语法 $(“prev ~ siblings”)

<!DOCTYPE html>

<head>

????<meta charset="UTF-8">

????<title>jQuery 层次选择器</title>

????<script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

????<p> HELLO </p>

????<div>

????????<p> WORLD</p>

????</div>

</div>

????<li> 111 </li>

????<li> 222 </li>

</ul>

????$(function(){

????????// 先辈后辈选择器(父子选择器)

????????var $jqObj = $("#box p");

????????console.log($jqObj.html());

????????// 父子选择器

????????var $jqObj1 = $("ul>li");

????????console.log($jqObj1.html());

????????var $jqObj2 = $("#l>li");

????????console.log($jqObj2.html());

????????// 兄弟选择器，只匹配一个

????????var $jqObj3 = $("#d+div");

????????console.log($jqObj3.html());

????????// 同级选择器

????????var $jqObj4 = $("#d~div");

????????$jqObj4.html("---");

????})

</script>

</body>

</html>

Ⅲ、过滤选择器

①简单过滤器

:first 只匹配第一个元素

:last 只匹配最后一个元素

:even 所有的奇数

:odd 所有的偶数

:eq(index) 指定元素（从0开始）

:gt(index) 比...大

:lt(index) 比...小

:header 匹配标签

:not() 去除

<!DOCTYPE html>

<head>

????<meta charset="UTF-8">

????<title>jQuery简单过滤选择器</title>

????<script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

????$(function(){

????????// :first,只匹配第一个元素

????????$(".p1:first").html("first");

????????// :last,只匹配最后一个

????????$(".p1:last").html("last");

????????// :even,所有的奇数

????????$(".p1:even").html("even");

????????// :odd，所有的偶数

????????$(".p1:odd").html("odd");

????????// :eq(index),指定元素，从0开始

????????$(".p1:eq(2)").html("第三个");

????????// :gt(index),比...大

????????$(".p1:gt(2)").html("比第三个大");

????????// :lt(index)，比...小

????????$(".p1:lt(2)").html("比第三个小");

????????// :header,匹配标签

????????$(":header").html("标题过滤");

????????// :not(),去除

????????$("p:not(.p1)").html("hello");

????})

</script>

</body>

</html>

②内容过滤器

contains(xx) 匹配包含的元素

empty ?匹配空的，有空格则不是空

has(xx) 匹配含有的元素

parent 匹配父标签

<!DOCTYPE html>

<head>

????<meta charset="UTF-8">

????<title>jQuery内容过滤选择器</title>

????<script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<table>

????<tr>

????????<td>

????????????<p>this is a text</p>

????????</td>

????????<td>

????????????<p> today is a good day</p>

????????????<span></span>

????????</td>

????</tr>

</table>

????$(function(){

????????// contains(xx) 匹配包含的元素

????????$(".p1:contains('b')").html("包含b");

????????// empty 匹配空的，有空格则不是空的

????????$(".p1:empty").html("空的");

????????// has(xx) 匹配含有的元素

????????console.log($("td:has(span)"));

????????// parent 匹配父标签的元素

????????$(".p1:parent").html("haha");

????})

</script>

</body>

</html>

③可见性过滤器

:visible 匹配可见元素

:hidden 匹配不可见元素

<!DOCTYPE html>

<head>

????<meta charset="UTF-8">

????<title>jQuery可见性过滤选择器</title>

????<script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

????$(function(){

????????// :visible 匹配可见元素

????????console.log($("input:visible").val());

????????// :hidden 匹配不可见元素

????????console.log($("input:hidden").val());

????????// 匹配最后一个不可见元素

????????console.log($("input:hidden:last").val());

????})

</script>

</body>

</html>

④表单过滤器

<!DOCTYPE html>

<head>

????<meta charset="UTF-8">

????<title>jQuery表单过滤选择器</title>

????<script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<form>

????<input type="checkbox" checked="checked" value="复选框1"> 选框1

????<input type="checkbox" checked="checked" value="复选框2"> 选框2

????<input type="checkbox" value="复选框3"> 选框3

????<input type="button" value="不可用按钮" disabled> 按钮

????<select>

????????<option selected="selected"> aaa </option>

????????<option> bbb </option>

????</select>

</form>

????$(function(){

????????// :checked 匹配所有选中的标签

????????console.log($("input:checked:eq(0)").val());

????????// :disabled

????????console.log($("input:disabled").val());

????})

????$(function(){

????????console.log($("select option:selected").val());

????})

</script>

</body>

</html>

⑤子元素过滤器

<!DOCTYPE html>

<head>

????<meta charset="UTF-8">

????<title>jQuery子元素过滤选择器</title>

????<script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<ul>

????<li></li>

</ul>

????$(function(){

????????// first-child

????????$("ul li:first-child").html("first-child");

????????// last-child

????????$("ul li:last-child").html("last-child");

????????// nth-child 从1开始

????????$("ul li:nth-child(2)").html("2th-child");

????})

</script>

</body>

</html>

Ⅳ、属性选择器

[attr] 匹配指定属性的元素

[attr=val] 选择指定值的元素

<!DOCTYPE html>

<head>

????<meta charset="UTF-8">

????<title>jQuery属性过滤选择器</title>

????<script type="text/javascript" src="js/jQuery3.6.0.js"></script>

????<style>

????????div{

????????????width: 100px;

????????????height: 50px;

????????????margin: 10px;

????????}

????</style>

</head>

<body>

????$(function(){

????????// [attr] 匹配指定属性的元素

????????$("div[name]").css("background-color", "blue");

????????// [attr=var] 选择指定值的元素

????????$("div[name='div2']").css("background-color", "red");

????????// $("div[name!='div1']").css("background-color", "green");

????????// 全部匹配

????????$("div[name*='div1']").css("background-color", "green");

????????// 匹配以div开头的

????????$("div[name^='div1']").css("background-color", "green");

????????// 完全匹配div1

????????$("div[name$='div1']").css("background-color", "green");

????})

</script>

</body>

</html>

Ⅴ、表单选择器

<!DOCTYPE html>

<head>

????<meta charset="UTF-8">

????<title>jQuery表单过滤选择器</title>

????<script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<form>

????<input type="checkbox" >

????<input type="radio" >

????<input type="file" >

????<input type="image" >

????<input type="password" >

????<input type="text" >

????<input type="reset" >

????<input type="submit" >

????<input type="button" >

</form>

????$(function(){

????????var $jqObj1 = $(":checked")

????????

????????var $jqObj1 = $(":password")

????})

</script>

</body>

</html>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-12-14 15:50:58 更:2021-12-14 15:52:06

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 9:37:28-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码