JQuery快速复习

最新推荐文章于 2022-12-15 16:10:34 发布

帐妖

最新推荐文章于 2022-12-15 16:10:34 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/weixin_44296489/article/details/97677417

版权

一引入

文章参考菜鸟教程

可以使用jquery文档，也可以直接从网上引入。

引用来自百度

 <head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

二基础语法

基础语法： $(selector).action()

开始

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

三、jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。 JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

四、选择器

五、jqery事件

$(document).ready()、click()、dblclick()、mouseenter()、mouseleave()、mousedown()、mouseup()、hover()、focus()、blur()

六效果

1、隐藏和显示 jQuery hide() 和 show()。切换jQuery toggle()

2、淡入淡出 fadeIn()、fadeOut()、fadeToggle()、fade To() (可给定不透明度)

3、滑动 slideDown() 、slideUp() 、slideToggle()

4、动画 animate()

实例帮助理解：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

5 、停止动画 stop() ,Callback动画完成

6、链

7、获取内容和属性text()、html()、val()。attr()

8 、添加元素append()、prepend()【内】、before()、after()【外】

9、删除 remove()、empty()

10、操作类 addClass()、removeClass()、toggleClass()、css()

11、尺寸 width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight()

帐妖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery快速复习

一引入文章参考菜鸟教程可以使用jquery文档，也可以直接从网上引入。引用来自百度 <head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head>二基础语法基础语法： $(selector).action()...
复制链接

扫一扫