JavaScript与jQuery（下篇）

JavaScript与jQuery笔记（下篇）

- 一、获取jquery
- 二、jquery选择器
- 三、jquery事件
- 四、jquery操作Dom元素
- - - ————————
    - 创作不易，如觉不错，随手点赞，关注，收藏(*￣︶￣)，谢谢~~

jQuery

jquery库，里面存在大量的javascript函数

一、获取jquery

https://www.bootcdn.cn/jquery/

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
</body>
</html>

使用jquery

<a href="" id="test-jquery">点我</a>
<script>//选择器就是css选择器$('#test-jquery').click(function () {alert('hello,jquery')})
</script>

二、jquery选择器

原生的js选择器的种类有：

标签选择器：document.getElementByTagName()
id选择器： document.getElementByID()
类选择器： document.getElementByClassName()

jq选择器有（css中的选择器他全部都能用）：

标签选择器：$(‘p’).click();
id选择器：$(’#id名’).click();
class选择器：$(’.class名’).click();
…查看文档看更多

文档工具站 https://jquery.cuishifeng.cn/

//原生态js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jquery css 中的选择器他全部都能用
$('p').click(); //标签选择器
$('#id').click(); //id选择器
$('.class1').click(); //class选择器
公式：
$(selector).action()

三、jquery事件

鼠标事件，键盘事件，其他事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.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 () {	//e是鼠标移动的参数$('#divMove').mousemove(function (e) {$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)})})
</script>
</body>
</html>

四、jquery操作Dom元素

4.1 节点文本操作

<ul id="test_ul"><li class="js">JavaScript</li><li name="python">Python</li>
</ul><script>//拿到这个标签的文本，$('#test_ul li[name=python]').text();//修改这个标签的文本$('#test_ul li[name=python]').text('123');$ ( '#test-u7 ' ).htm1(;//获得值$( '#test-u7 ' ).htm1( ' <strong>123</strong> ');//设置值
</script>

4.2 css的操作

<ul id="test_ul"><li class="js">JavaScript</li><li name="python">Python</li>
</ul><script>$ ( ' #test-u1 li[name=python] ').css(i"color" , "red"})
</script>

4.3 元素的显示和消失：本质是display：none

<ul id="test_ul"><li class="js">JavaScript</li><li name="python">Python</li>
</ul>$('#test-ul li[name=python]').show()	//显示
$('#test-ul li[name=python]').hide()	//隐藏

4.4 娱乐测试

<ul id="test_ul"><li class="js">JavaScript</li><li name="python">Python</li>
</ul>$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();		//隐藏就显示，显示就隐藏