jquery介绍和选择器使用

最新推荐文章于 2023-06-24 20:13:19 发布

no_name_sky

最新推荐文章于 2023-06-24 20:13:19 发布

阅读量97

点赞数

分类专栏： js jquery 文章标签： jquery

本文链接：https://blog.csdn.net/no_name_sky/article/details/118407936

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

jquery介绍

jquery时一个快速、小巧、功能丰富的javascript库，只是封装了js的dom操作和ajax。

jquery下载

在这里插入图片描述
压缩版：用于生产环境，jquery-3.3.1…min.js
未压缩版：用于开发环境，jquery-3.3.1.js

使用jquery

引入包：<script type="text/javascript" src="jquery-3.3.1.js"></script>
jquery是全局的一个函数，当调用$()时，内部会帮我们new jQuery，创建出对象之后，使用对象的属性和方法。
自执行函数：把当前函数的声明直接用括号包起来，再加括号直接调用。

(function add(){
	return 1;
})();

入口函数

在使用window.onload时候是有很多问题的，如有覆盖现象、需等待图片资源加载完成才调用脚本代码。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript" src="jquery-3.6.0.js"></script>
</head>
<body>
<script>
	// 入口函数
	console.log($(document)); // 返回的是jQuery对象
	console.log($(document[0]))  // 获取js的document对象
	
	// 1.jquery入口函数，等待文档资源加载完成之后调用此方法。
	$(document).ready(function(){
		alert(1);
	})
	
	// 2.jquery简便写法入口函数，等待文档资源加载完成之后调用此方法，使用较多
	$(function(){
		alert(2);
	})
	
	// 表示图片资源加载完成之后调用
	$(window).ready(function(){
		alert(3);
	})
	
	// 不会出现入口函数覆盖现象
	
</script>
</body>
</html>

jQuery对象和js对象互相转换

如果是js对象更加希望转换成jquery来操作简单的DOM，因为js是包含jquery的，jquery只封装了DOM事件ajax动画。
如果是jquery对象一定要调用jquery对象的属性和方法，如果是js对象一定要调用js的属性和方法，千万不要将这两个对象混淆，在jquery中大部分都是api。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript" src="jquery-3.6.0.js"></script>
</head>
<body>
<div class="box1"></div>
<div id="box2"></div>
<script>
	$(function(){
		// 获取jQuery对象
		console.log($('#box2'));
		
		// 获取js对象
		var oBox2 = document.getElementById('box2');
		console.log(oBox2);
		
		//jQuery对象 ===> js对象
		console.log($('#box2')[0]);
		console.log($('#box2').get(0));
		
		//js对象 ===>jQuery对象
		console.log($(oBox2)); // $(js对象)
	})
</script>
</body>
</html>

jQuery基本选择器和基本DOM使用

标签选择器：$('div')
id选择器：$('#标签id值')
类选择器：$('.类值')

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript" src="jquery-3.6.0.js"></script>
	<style>
		div{
			width:100px;
			height:100px;
			background-color:red;
			margin-top:10px;
		}
	</style>
</head>
<body>
<div class="box1">三藏</div>
<div id="box2">悟空</div>
<div>八戒</div>
<script>
	$(function(){
		// jquery内部自己遍历
		$('div').click(function(){
			// this 指的是js对象
			console.log(this.innerText);
			// 转换为jQuery对象
			console.log($(this).text());
			alert($(this).text());
		});
	})
</script>
</body>
</html>

选择器

层级选择器

空格后代选择器，选择所有的后代元素
子代选择器，选择所有的子代元素
+紧邻选择器，紧挨着的下一个元素$('div+p')
~兄弟选择器，选择后面的所有兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript" src="jquery-3.6.0.js"></script>
</head>
<body>
<ul class="lists">
	<li>
		附加
		<ol>
			<li>1</li>
		</ol>
	</li>
	<li class="item">
		<a href="">是一个a标签</a>
	</li>
	<li>3</li>
	<li class="item2">4</li>
	<li>5</li>
	<li>6</li>
</ul>
<script>
	$(function(){
		// 后代选择器, 修改样式属性, 选中所有的后代标并设置字体颜色为红色
		$('.lists li').css('color', 'red');
		// 子代选择器 亲儿子
		$('.item>a').css({'font-size':'20px'}); // 设置多个属性样式
		// 紧邻过滤器
		$('.item+li').css({'color':'green'}); //紧挨着item的下面的li标签
		// 兄弟选择器
		$('.item2~li').css({'color':'purple'}); //item下的所有兄弟标签
	})
</script>
</body>
</html>

效果：
在这里插入图片描述

基本过滤选择器

选出了10个标签，想选择第二个，第四个，该怎么选？

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript" src="jquery-3.6.0.js"></script>
</head>
<body>
<ul class="lists">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
<script>
	$(function(){
		// :eq
		// 写法: $('ul li:eq(0)')  选中第一个元素
		// 1. :eq(index) 选择序号为index的元素
		$('ul li:eq(0)').css('background', 'red');
		
		// 2. :gt(index) 选择序号大于index的元素
		// 3. :lt(index) 选择序号小于 index的元素
		// 4. :add 选取的是序号为奇数的元素
		// 5. :even 选取的是序号为偶数的元素 
		// 6. :first 选取第一个元素
		// 7. :last 选取最后一个元素
	})
</script>
</body>
</html>

效果：
在这里插入图片描述

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript" src="jquery-3.6.0.js"></script>
</head>
<body>
<ul class="lists">
	<li>1</li>
	<li class="l">2</li>
	<li class="l2">3</li>
	<li>4</li>
	
	<form action="">
		<input type="text">
		<input type="password">
	</form>
</ul>
<script>
	$(function(){
		// 1. 包含class的所有元素， 标签名[属性名] 查找所有含有class属性的改标签的元素
		$('li[class]').css('color', 'red');
		// 2. class属性值为"l2"的li元素
		$('li[class="l2"]').css('font-size', '20px');
		// 3. $('li[class!="l"]')  选择li标签中class值不等于"l"的所有标签
		// 4. $('li[class^="l"]')  选择li标签中class值以l"开头的所有标签
		// 5. $=  以什么结尾的
		// 6. *= 选择所有包含某个字符的
		
		// 选择input标签的type属性值为text的标签
		$('input[type="text"]').css('background', 'red');
	})
</script>
</body>
</html>

效果：
在这里插入图片描述

筛选选择器(通过方法调用)

find(selector) 查找制定元素的所有后代元素（包括子子孙孙）
children() 查找指定元素的直接子元素（亲儿子）
siblings() 查找所有的兄弟元素，不包括自己
parent() 查找父元素（亲的）
eq(index) 查找制定元素的第index个元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript" src="jquery-3.6.0.js"></script>
</head>
<body>
<div class="box">
	<p><span class="child">悟空1</span></p>
	<p><span class="active">悟空2</span></p>
	<p class="item3">悟空3</p>
	<p>悟空4</p>
	<p>悟空5</p>
	<p>悟空6</p>
	<div class="child">哈哈</div>
</div>
<script>
	$(function(){
		//1. find(selector) 括号中放选择器，查找后代包括子子孙孙，返回jQuery对象
		$('.box').find('.item3').css('color', 'red');  // 此时返回的依旧是jQuery对象，叫链式编程
		$('.box').find('p>.active').css('color', 'green').click(function(){
			alert($(this).text());
		});
		
		//2. children(selector) 获取的是亲儿子
		$('.box').children('.child').css('color','yellow');
		
		// 3. parent 获取的是亲爹
		
		// eq(index)  index是从0开始的
		$('.box').children().eq(0).css("font-size", 30);
	})
</script>
</body>
</html>

效果：
在这里插入图片描述
siblings
使用siblings实现选项卡功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <style>
        button{
            width:100px;
            height:20px;
        }
    </style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
    $(function(){
        $('button').click(function(){
            // 实现选项卡
            $(this).css('background', 'red').siblings('button').css('background', 'transparent');
        })
    })
</script>
</body>
</html>

效果：
在这里插入图片描述
siblings实现tab栏选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <style>
        *{
            padding:0;
            margin:0;
        }
        ul{
            list-style:none;
        }
        #tab{
            width:480px;
            margin:20px auto;
            border: 1px solid red;
        }
        ul{
            overflow:hidden;
        }
        #tab ul li{
            float:left;
            width:160px;
            height:60px;
            line-height:60px;
            text-align:center;
            background-color:#ccc;
        }
        #tab ul li a{
            color:black;
            display:inline-block;
            width:100%;
            height:100%;
            text-decoration:none;
        }
        #tab ul li.active{
            background-color:red;
        }
        #tab p{
            display:none;
        }
        #tab p.active{
            display:block;
            height:200px;
            text-align:center;
            line-height:200px;
            background-color:red;
        }
    </style>
</head>
<body>
<div id="tab">
    <ul>
        <li class="active">
            <a href="javascript:void(0)">首页</a>
        </li>
        <li>
            <a href="javascript:void(0)">新闻</a>
        </li>
        <li>
            <a href="javascript:void(0)">照片</a>
        </li>
    </ul>
    <p class="active">首页内容</p>
    <p>新闻内容</p>
    <p>图片内容</p>
</div>
<script>
    // 需求是鼠标放在li上，li本身变色，对应p标签也显示出来
    $('#tab ul li a').click(function(){
        $(this).parent('li').attr('class','active').siblings('li').attr('class', '');
        // 获取对应li的标签的元素索引，要找的是有兄弟元素的索引。
        var i = $(this).parent('li').index();
        $('p').eq(i).attr('class', 'active').siblings('p').removeClass('active');

    })
</script>
</body>
</html>

效果
在这里插入图片描述

no_name_sky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery介绍和选择器使用

jquery介绍jquery时一个快速、小巧、功能丰富的javascript库，只是封装了js的dom操作和ajax。jquery下载压缩版：用于生产环境，jquery-3.3.1…min.js未压缩版：用于开发环境，jquery-3.3.1.js使用jquery引入包：<script type="text/javascript" src="jquery-3.3.1.js"></script>jquery是全局的一个函数，当调用$()时，内部会帮我们new jQuer
复制链接

扫一扫