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

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

公式：

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

    
    
    



点我

2.jQuery选择器

3.jQuery事件

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

获取鼠标的坐标：

    
    

    
    



mouse:

    在这里移动鼠标试试

4.jQuery操作DOM元素

节点文本操作：

    
    

    



    
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下来，然后对应修改看效果）