JavaScript与jQuery笔记(下篇)
jQuery
jquery库,里面存在大量的javascript函数
jquery_8">一、获取jquery
https://www.bootcdn.cn/jquery/
javascript"><!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
javascript"><a href="" id="test-jquery">点我</a>
<script>
//选择器就是css选择器
$('#test-jquery').click(function () {
alert('hello,jquery')
})
</script>
jquery_38">二、jquery选择器
原生的js选择器的种类有:
- 标签选择器:document.getElementByTagName()
- id选择器: document.getElementByID()
- 类选择器: document.getElementByClassName()
jq选择器有(css中的选择器他全部都能用):
- 标签选择器:$(‘p’).click();
- id选择器:$(’#id名’).click();
- class选择器:$(’.class名’).click();
- …查看文档看更多
文档工具站 https://jquery.cuishifeng.cn/
javascript">//原生态js,选择器少,麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jquery css 中的选择器他全部都能用
$('p').click(); //标签选择器
$('#id').click(); //id选择器
$('.class1').click(); //class选择器
公式:
$(selector).action()
jquery_72">三、jquery事件
鼠标事件,键盘事件,其他事件
javascript"><!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>
jqueryDom_109">四、jquery操作Dom元素
4.1 节点文本操作
javascript"><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的操作
javascript"><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
javascript"><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 娱乐测试
javascript"><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(); //隐藏就显示,显示就隐藏