JavaScript-jQuery

目录

1.初始jQuery及公式

2.jQuery选择器

3.jQuery事件

4.jQuery操作DOM元素

5.小结


1.初始jQuery及公式

javaScript 和 jQuery的关系?
jQuery库,里面存在大量的 JavaScript 函数

1、 获取 jQuery
官网下载地址
文档工具站:http://jquery.cuishifeng.cn/

选择:Download the uncompressed, development jQuery 3.6.1

JavaScript-jQuery_第1张图片

 点击之后,是源码页面,点击页面另存为即可,把下载的 js 文件放到项目中。

JavaScript-jQuery_第2张图片

公式:

 $就代表jQuery,()内是选择器
 公式:$(selector).action()




    
    Title
    



点我


JavaScript-jQuery_第3张图片

2.jQuery选择器




    
    Title




3.jQuery事件

//事件
$('.class1').mousedown();//鼠标按下
$('.class1').mouseenter();
$('.class1').mouseleave();//鼠标离开
$('.class1').mousemove();//鼠标移动
$('.class1').mouseover();//鼠标点击结束
$('.class1').mouseout()
$('.class1').mouseup() 

获取鼠标的坐标:




    
    Title

    
    



mouse:
在这里移动鼠标试试

JavaScript-jQuery_第4张图片

4.jQuery操作DOM元素

节点文本操作:




    
    Title

    


  • JavaScript
  • Python

获得值:

设置值:

css操作:

    $('#test-ul li[name=python]').css("color","red");

元素的显示和隐藏:

本质 display:none

隐藏:

$('#test-ul li[name=python]').hide();

显示:

    $('#test-ul li[name=python]').show();

娱乐测试:

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();//切换,显示变为隐藏,隐藏变为显示

未来ajax(): 

$('#form').ajax()

$.ajax({url:"test.html",context:document.body,success:function(){
	$(this).addClass("done");
}})

5.小结

1、如何巩固JS(看 jQuery源码,看游戏源码!)

2、巩固 HTML、CSS(扒网站,全部 down下来,然后对应修改看效果)

你可能感兴趣的:(JavaScript,javascript,jquery,前端)