首页 > Web开发 > 详细

jQuery学习

时间:2020-04-25 23:49:18      阅读:85      评论:0      收藏:0      [点我收藏+]

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");
}});

  

 

jQuery学习

原文:https://www.cnblogs.com/MomoCC/p/12775873.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!