JavaScript基础学习03（行为层）之jQuery
javascript与jQuery的关系
-
公式：$(selector).action()：
即$(’#test-jquery’).click(function () {
alert(‘hello 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>-->
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<!--
selector:选择器，就是css选择器
公式：$(selector).action()
-->
<a href="" id="test-jquery">点击我</a>
<script>
//选择器就是和css中的一样。
$('#test-jquery').click(function () {
alert('hello jquery!')
})
</script>
</body>
</html>
- 选择器vsjQuery选择器
//1.标签
document.getElementsByTagName()
//2.id选择器
document.getElementById()
//3.类选择器
document.getElementsByClassName();
//jQuery
$('p').click()//1.标签
$('#id1').click()//2.id选择器
$('.class1').click() //3.类选择器
JavaScript文档工具站：
jQuery中的事件
-
鼠标事件
<script src="jquery-3.6.0.min.js"></script> <!-- 要求：获取鼠标当前的一个坐标--> mouse:<span id="mouseMove"></span> <div id="divMove"> 在这里移动试试 </div> <script> //当网页元素加载完毕之后，响应事件 $(function () { $('#divMove').mouseleave(function (a) { $('#mouseMove').text('x'+a.pageX+'y'+a.pageY) }) }); </script> -
document
<script src="jquery-3.6.0.min.js"></script> <ul id="t1"> <li class="js">javascript</li> <li name="java">java</li> </ul> <script> $('#t1 li[name=java]').text();//获得值 $('#t1 li[name=java]').text('1234');//设置值 $('#t1 ').html(); </script> -
css的操作
$('#t1 li[name=java]').css("color","red"); -
元素的显示和隐藏：本质还是css中的display:none;
$('#t1 li[name=java]').hide();//隐藏 $('#t1 li[name=java]').show();//显示 -
拓展
$(window.innerWidth) S.fn.init [1424] $(window.innerHeight) S.fn.init [310]小技巧：
多看网站，（js源码、css样式）
网站：element-ui
ant -design
源码之家
扫一扫
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
