（四）JavaScript--jQuery入门

最新推荐文章于 2024-04-26 16:47:03 发布

Clam.

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量154

点赞数

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

本文链接：https://blog.csdn.net/cococonger_/article/details/115000395

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、入门
二、选择器
- 2.1、基本选择器
- 2. 2、按属性查找
三、操作DOM
四、事件
- 4.1、初始化事件
- 4.2、事件参数

一、入门

jQuery是JavaScript中使用最广泛的一个库。封装了大量的JavaScript函数（工具类）.
使用jQuery只需要在页面的head引入jQuery文件即可，也可以通过cdn引入：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 1. cdn引入 -->
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>-->
    <!-- 2. jQuery文件引入 -->
    <script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<!--
公式：$(选择器selector).action()
-->
<a href="" id="test-jquery"点我></a>

<script>
    // 选择器就是css的选择器
    $("#test-jquery").click(function () {
        alert("hello");
    })
</script>
</body>

获取jQuery对象，并创建事件函数的公式：$(selector).action(事件函数)

美元符号定义jQuery
选择符(selector)“查找”和“查询”HTML元素
jQuery的action()执行对元素的操作

二、选择器

原生的JS代码操作DOM对象时过于繁琐，jQuery的选择器可以帮助我们快速定位到一个或多个DOM节点。

2.1、基本选择器

<script>
    // 原生的JS选择器少，麻烦
    // 标签
    document.getElementsByTagName();
    // id
    document.getElementById();
    // 类
    document.getElementsByClassName();

    // jQuery   css中的选择器全部可以用
    $("p").click();  // 标签选择器
    $("#id").click();  // id选择器
    $(".class").click();  // class选择器
</script>

2. 2、按属性查找

一个DOM节点除了id和class外还可以有很多属性，所以jQuery还支持按属性查找：

var email = $('[name=email]');  // 找出<??? name='email'>
var password = $('[type=password]');  // 找出<??? type='password'>
// 当属性的值包含空格等特殊字符时，需要用双引号括起来
var a = $('[items="A B"]');  // 找出<??? items="A B">

按属性查找还可以使用前缀或后缀查找：

var icons = $('[name^=icon]'); // 找出所有name属性以icon开头的DOM
var names = $('[name$=with]'); // 找出所有name属性以with结尾的DOM

三、操作DOM

3.1、修改Text和HTML

jQuery对象的text()和html方法分别获取节点的文本和原始HTML文本，如：

<ul id="test-ul">
	<li class="js">JavaScript</li>
	<li name="book">Java &amp; JavaScript</li>
</ul>

<script>
	$("#test-ul li[name='book']").text(); // Java & JavaScript
	$("#test-ul li[name='book']").html(); // Java &amp; JavaScript

	$("#test-ul li.js").text("asdasd");   // 设置值
	$("#test-ul li[name='book']").html(<strong>123</strong>);  // 设置值
</srcipt>

3.2、修改CSS

由于jQuery具有批量操作的特点，所以也可以修改CSS样式

<!-- HTML结构 -->
<ul id="test-css">
	<li class="lang dy"><span>JavaScript</span></li>
	<li class="lang"><span>Java</span></li>
	<li class="lang dy"><span>Python</span></li>
	<li class="lang"><span>Swift</span></li>
	<li class="lang dy"><span>Scheme</span></li>
</ul>

<script>
	// jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身），所以我们可以进行链式编程
	$('#test-css li.dy>span').css('background-color', '#ffd351').css('color','red');

	$('#test-css li.dy>span').css('background-color': '#ffd351', 'color': 'red');
</script>

css()方法将作用于DOM节点的style属性，具有最高优先级。可以通过jQuery提供的方法来修改class属性：

var div = $('#test-div');
div.hasClass('highlight'); // false， class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class

3.3、DOM的隐藏和显示

我们可以通过将display属性的值设为none来隐藏一个DOM。
不过，要显示这个DOM就需要恢复原有的display属性，这就得先记下来原有的display属性到
底是block还是inline还是别的值。
考虑到显示和隐藏DOM元素使用非常普遍，jQuery直接提供show()和hide()方法。

$("#test-ul li[name='python']").show()  // 显示
$("#test-ul li[name='python']").hide()  // 隐藏

注意：隐藏DOM节点并未改变DOM树的结构，它只影响DOM节点的显示。这和删除DOM节点是不同
的。

3.4、获取DOM信息

利用jQuery对象的若干方法，我们可以直接获取DOM的高宽等信息，而无需针对不同浏览器编写特定代码：

// 浏览器可视窗口大小
$(window).width(); // 800
$(window).height(); // 600

// HTML文档大小
$(document).width();//800
$(document).height();//3500

// 某个div的大小
var div = $('#test-div');
div.width(); // 600
div.height(); //300
div.width(400); // 设置CSS属性，width：400px，是否生效要看css是否有效
div.height('200px'); // 设置CSS属性，width：200px，是否生效要看css是否有效

attr()和removeAttr()方法用于操作DOM节点的属性：

// <div id="test-div" nmae="Test" start="1">...</div>
var div = $("#test-div");
div.attr("data"); // undefined 属性不存在
div.attr("name"); // "Test"
div.removeAttr("name"); // 删除name属性
div.attr("name"); // undefined 属性不存在

3.5、操作表单

对于表单元素，jQuery对象统一提供val()获取和设置对应的value()属性：

/*
<input id="test-input" name="email" value="">
<select id="test-select" name="city">
<option value="BJ" selected>Beijing</option>
<option value="SH">Shanghai</option>
<option value="SZ">Shenzhen</option>
</select>
<textarea id="test-textarea">Hello</textarea>
*/
var
input = $('#test-input'),
select = $('#test-select'),
textarea = $('#test-textarea');
input.val(); // 'test'
input.val('abc@example.com'); // 文本框的内容已变为abc@example.com
select.val(); // 'BJ'
select.val('SH'); // 选择框已变为Shanghai
textarea.val(); // 'Hello'
textarea.val('Hi'); // 文本区域已更新为'Hi

一个val()就可以解决各种输入框的取值和赋值问题

3.6、添加DOM

要添加新的DOM节点，除了通过jQuery的html()这种暴力方法外，还可以使用append()方法，如：

<div id="test-div">
	<ul>
		<li><span>JavaScript</span></li>
		<li><span>Python</span></li>
		<li><span>Swift</span></li>
	</ul>
</div>

<script>
	// 获取`ul`节点
	var ul = $("#test-div>ul");
	// 调用`append()`传入HTML片段
	ul.append('<li><span>Haskell</span></li>');
</script>

append()把DOM添加到最后，prepend()则把DOM添加到最前。
如果要把新节点插入到指定位置，例如，JavaScript和Python之间，那么，可以先定位到JavaScript，然
后用after()方法：

var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Haskell</span></li>');

也就是说，同级节点可以用after()或者before()方法。

3.7、删除节点

拿到jQuery对象后直接调用remove()方法就可以了。如果jQuery包含多个DOM节点，则可以一次删除多个DOM节点：

var li = $('#test-div>ul>li');
li.remove(); // 所有<li>全被删除

四、事件

jQuery能够绑定的事件主要包括：
鼠标事件
click: 鼠标单击时触发
dblclick：鼠标双击时触发
mouseenter：鼠标进入时触发
mouseleave：鼠标移出时触发
mousemove：鼠标在DOM内部移动时触发
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave
键盘事件
键盘事件仅作用在当前焦点的DOM上
keydown：键盘按下时触发
keyup：键盘松开时触发
keypress：按一次键后触发
其他事件
focus：当DOM获得焦点时触发
blur：当DOM失去焦点时触发
change：当、或的内容改变时触发
submit：当提交时触发
ready：当页面被载入并且DOM树完成初始化后触发

4.1、初始化事件

自己的初始化代码必须放到document对象的ready事件中，保证DOM初始化：

<html>
<head>
	<script>
		$(document).on('ready', function () {
			$('#testForm).on('submit', function () {
				alert('submit!');
			});
		});
	</script>
</head>
<body>
	<form id="testForm">
		...
	</form>
</body>

这样可以保证在DOM树初始化之后执行
简化：

$(function () {
	// init...
});

4.2、事件参数

有些事件，如mousemove和keypress，我们需要获取鼠标位置和按键的值。所有事件都会传入Event对象作为参数，可以从Event对象获取更多的信息：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="lib/jquery-3.5.1.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!-- 获取鼠标当前的坐标 -->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>

<script>
    // 当网页元素加载完毕后，响应事件
    $(function () {
        $("#divMove").mousemove(function (e) {
            $("#mouseMove").text("x: " + e.pageX + "y: " + e.pageY);
        })
    })
</script>

</body>

Clam.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（四）JavaScript--jQuery入门

文章目录一、入门二、选择器2.1、基本选择器2. 2、按属性查找三、操作DOM3.1、修改Text和HTML3.2、修改CSS3.3、DOM的隐藏和显示一、入门jQuery是JavaScript中使用最广泛的一个库。封装了大量的JavaScript函数（工具类）.使用jQuery只需要在页面的head引入jQuery文件即可，也可以通过cdn引入：<head> <meta charset="UTF-8"> <title>Title</tit
复制链接

扫一扫