jQuery:封装了大量JavaScript函数的一个库(工具类)
1.获取jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
<!--cdn引入-->> <script src="http://cdn.bootcss.com/jquery/3.4.1/core.js"></script> </head> <body> </body> </html>
*2.公式:$(selector).action()
//普通写法 <a href="" id="text-jquery">点我</a> <script> document.getElementById(‘id‘);
....
.... </script>
//jquery写法
<a href="" id="text-jquery">点我</a>
<script>
//选择器就是css选择器
$(‘#test-jquery‘).click(function(){
alert(‘hello,jquery‘); })
</script>
3.选择器
//jQuery css中的选择器都能用
$(‘p‘).click();//标签选择器 $(‘#id1‘).click();//id选择器 $(‘.class1‘).click();//class选择器
4.事件
鼠标事件,键盘事件,其他事件
mousedown mousemove...
<body> <!--要求:获取鼠标当前的一个坐标--> mouse:<span id="mouseMove"></span> <div id="divMove"> 在这里移动试试 </div> <script> //当网页元素加载完毕后,响应事件 //$(document).action(function(){}) //简化后 $(function(){ $(‘#divMove‘).mousemove(function(e){ $(‘#mouseMove‘).text(‘x:‘+e.pageX + ‘y:‘+e.pageY) }) }); </script> </body>
5.操作DOM节点
文本操作
<ul id="text-ul"> <li class="js">JavaScript</li> <li name="python">Python</li> </ul> <script> //document.getElementById(‘‘) //ul下面选择li li绑定属性name=python $(‘text-ul li[name=python]‘).text();//修改文本 $(‘text-ul li[name=python]‘).html();//修改html $(‘text-ul li[name=python]‘).text();//获得值 $(‘text-ul li[name=python]‘).text(设置值);//设置值
css操作
$(‘text-ul li[name=python]‘).css("color","red")
元素的显示与隐藏:本质display:none;
$(‘text-ul li[name=python]‘).show()//显示 $(‘text-ul li[name=python]‘).hide()//隐藏
ajax();
$(‘#from‘).ajax() $.ajax({url:"text.html",context:document.body,success:function(){ $(this).addClass("done"); }});
原文:https://www.cnblogs.com/MomoCC/p/12775873.html