csdn️最详细最优秀的⛽️—JQuery的学习以及一些操作的演示

最新推荐文章于 2022-04-25 14:35:03 发布

和东同学

最新推荐文章于 2022-04-25 14:35:03 发布

阅读量150

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/nglasds/article/details/110947064

版权

1⃣️ 首先了解JQuery

那么jquery是js的语言的精简版本🉑️以说是用起来相比较js是已经取而代之的一门流行语，那么接下来掩饰一些操作。

2⃣️ JQuery操作演示案例

2.1 弹框案例

</html>!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery导入</title>
    <!--
    1.导入jquery 库
    -->
    <script src="js/jquery.min.js"></script>
</head>
<body>

</body>
<script>
    // 文档就绪函数。等价于 window.οnlοad=function(){}
    $(function () {
        // js 代码
        alert('我是弹框...');
    })
</script>
// 这是一个单纯的弹框
</html>

2.2 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <script src="js/jquery.min.js"></script>

</head>
<body>
	<div id="d1">我是Div(一 🆔d1)</div>
	<div class="c1">我是Div(二 属性c1)</div>
	<div class="c1">我是Div(二same级别 属性c1)</div>
	<input type="text" name="username"> 
<br/>
    <div id="d2">
    	// p 🏷️标签
        <p>我Div 🆔d2 ⬇️🉐️p🏷️标签 中的内容</p>
        // div 🏷️标签
        <div>
            	我是Div🆔d2 ⬇️🉐️Div一(same级别 p标签）
            <p>我是Div🆔d2 下Div一 标签下的内容</p>
        </div>
        // span🏷️标签
        <span>我是Div🆔d2下 span(same级别 p标签)</span>
    </div>
    // ul 🏷️标签
    <ul>
        <li>LOL</li>
        <li>NBA</li>
        <li>CF</li>
    </ul>
    // 并列的 ul 🏷️标签
    <ul id="d3">
        <li>貂蝉</li>
        <li>妲己</li>
        <li>蔡文姬</li>
        <li>不知火舞</li>
    </ul>
</body>

<script>
	$(function(){
	//	使用复杂的javascript语法
	var div = document.getElementById('d1')
	div.style.color = 'red'
	//  使用精简的jquery语法
	// $('#d1')等价于var div = doucment.getElementById('di') 这就是jquery🀄️的🆔选择器
	$('#d1').css('color', 'blue');  // 🆔选择器
	$('.c1').css('color', 'white');  // 类选择器
	$('div').css('color', 'orange');  // 什么都不加🏷️标签选择器
	// 属性选择器
	$("input[name='username']").css('color', 'red');

	// 	关系选择器：子元素、 后代和并列关系
	//  后代选择器忽略层级关系 只要是后代全都改变
	$('#d2 p').css.style('color', 'purple');
	// 子元素选择器 🈯️改变自己🏷️标签🈯️下的元素
	$('#d2>p').css('color', 'green');
	// 并列选择器  只给same(相同)级别的🏷️标签作改动
	$('p, span').css('color', 'pink');  // 将页面中所有符合条件-【p标签和span标签 same（相同）级别的🏷️标签】的元素进行改动。
	// first、last内置的一些🈹️使用技巧
	$('#d3 li:first').css('color', 'yellow');  //获取第一个li🏷️ 并将其中的内容进行改动
	$('li:last').css('color', 'red');  // 整个页面中最后☝️一个li🏷️进行改动
	$('li:eq(1)').css('color',  'purple');  //通过索引来获取🏷️元素 0 1 1⃣️是第二个li🏷️。

</script>

</html>

2.2 事件监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件监听</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
	<button id="btn">我是按钮</button>
	<ul>
	    <li>小乔</li>
	    <li>大桥</li>
	    <li>周瑜</li>
	    <li>孙策</li>
	    <li>曹操</li>
	</ul>
</body>
<script>
	$(function(){
	// 1、点击事件
	$('#btn').click(funtion(){
		alert('tan出奥力给');
		});
	// 2、失去焦点事件
	$('#btn').blur();
	// 3、获取焦点事件
	$('#btn').focus();
	// 4、点击哪个li🏷️ 就弹出⏏️其中的内容
	$('li').click(function(){
		var content = $(this).text();
		alert(content);
		});
	})
</script>
</html>

2.3 文本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本操作</title>
    <script src="js/jquery.min.js"></script>
</head>
	<body>
	<div id="d1">
	    我是div
	</div>
	用户名：<input id="username" type="text" value="zs">
	
	</body>
<script>
	$(function(){
	// 1、 打印内容
	var content = $('#d1').text();
	console.log(content)
	con_two = $('#d1').text('<p>nihao shijie</p>');
	console.log(con_one, con_two);  // 运行试试看

	// 2、打印🏷️的样式
	var content = $('#d1').html();
	console.log(content)
	con_one = $('#d1').text('hello word nihao shijie ');
	var content_2 = $('#d1').html();
	console.log(content_2);
	con_three = $('#d1').html('<p style='color: red'>whomai</p>');
	console.log(con_three);  // 这次便🉑️加载显示🏷️内容
	

	}
	
</script>
</html>

2.4 删除元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <style>
        .c1 {
            background-color: red;
        }

        .c2 {
            color: yellow;
        }

    </style>
</head>
<body>
<div id="d1">我是div</div>
<button id="btn">我是按钮</button>
</body>
<script>

    $(function () {
        // 1. 添加class样式
        // $("#d1").addClass('c1');
        // $("#d1").addClass('c2');
        // $("#d1").addClass('c1 c2');// 添加多类
        // 2. 删除class样式
        // $("#d1").removeClass('c1'); // 删除样式类
        // 3. 如果有样式则删除，否则添加
        $("#btn").click(function () {
            $("#d1").toggleClass('c1');
        });
    })
</script>

</html>```
2.5 元素操作

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <style>
        #content {
            width: 1000px;
            height: 600px;
            border: 1px solid red;
        }

    </style>
</head>

<body>

<div id="content">
    <img src="image/1.jpg" alt="" width="100px" height="100px">
</div>
<button id="btn">我是按钮</button>
<ul>
    <li>DNF</li>
    <li>CF</li>
    <li>LOL</li>
</ul>


</body>
<script>
	$(function(){
		// 1 创建元素
		var img = $('<img src='img/1.png'>');
		$('#content').append(img);  // 元素内部起始图片的👆上面添加
		$('#content').prepend(img);  // 元素内部起始图片的👇下面添加
		
		// 点击添加
		$('#btn').click(function(){
		// 	创建一个li🏷️赋值给变量
			var li = $('<li>CSS</li>');  
			$('ul').append(li); 
			// 实现了 点击🔘按钮添加li🏷️内容为CSS字样的功能。
			})
	})
</script>
</html>

2.6 属性操作

在这里插入<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性操作</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
用户名：<input id="input" type="text">

</body>
<script>
	$(function(){
		// 1 获取属性
		var attr = $('#input').attr('type');
		console.log(attr)
		// 2 设置属性
		$('#input').attr('placeholder', '用户名‘）;
		// 3 设置多个属性
		$('#input').attr({
			'type': 'password',
			'value': 'aoligei'
			// 设置多个属性要用🔪大括号「」
		})
	})

</script>
</html>代码片

2.7 类操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <style>
        .c1 {
            background-color: red;
        }

        .c2 {
            color: yellow;
        }

    </style>
</head>
<body>
<div id="d1">我是div</div>
<button id="btn">我是按钮</button>
</body>
<script>
$(function(){
	// 1 添加class样式
	$('#d1').addClass('c1');
	$('#d1').addClass('c1 c2');  // 添加多个类
	})
	// 2 删除class样式
	$('#d1').removeClass('c1');  // 删除样式类
	// 3 样式反向展示再点击在反向展示，社交软件👍的功能类似
	$('#btn').click(function(){
		$('#d1').toggleClass('c1 c2');
		});
	)}
</script>

</html>

2.8 通过关系获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
hello world
<div>
    学科目录:
    <ul>
        <li>尼古拉斯✈️飞机尼</li>
        <li>尼古拉斯大卡🚗</li>
        <li>尼古拉斯五彩🐎
            <ol>
                <li>🐎🀄️豪杰</li>
                <li>🐎🀄️🈯️王</li>
                <li>汗血千里宝🐎</li>
            </ol>
        </li>
        <li>尼古拉斯🏀🈯️神</li>
        <li>尼古拉斯陛下</li>
    </ul>
</div>
</body>
<script>
$(function(){
	// 1 获取子元素🧊设置css样式
	$('li:eq(2)')children().css('color', 'red');
	// 2 获取上一个◀️兄弟元素🧊设置css样式
	$('li:eq(2)').prev().css('color', 'yellow');
	// 3 获取自己的兄弟元素🧊设置css样式
	$('li:eq(2)').siblings().css('color', 'blue');
	// 4 获取7⃣️父🧊设置css样式
	$('li:eq(2)').parent().css('color', 'red');
	// 5 获取所有祖先🧊设置css样式
	$('li:eq(2)').parents().css('color', 'red');
	// 扩展
	$('li').css('color', 'purple');
})

</script>
</html>

革命尚未成功，我们😯还需多多努力

是吧爷们还的多多练习的啊

和东同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
csdn️最详细最优秀的⛽️—JQuery的学习以及一些操作的演示

1⃣️ 首先了解JQuery那么jquery是js的语言的精简版本????️以说是用起来相比较js是已经取而代之的一门流行语，那么接下来掩饰一些操作。2⃣️ JQuery操作演示案例2.1 弹框案例</html>!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery导入</title> <!--
复制链接

扫一扫