2022-06-07 jQuery笔记(一) jq基本使用,引入,选择器,事件,显隐滑动淡进淡出效果,动画和停止动画,回调,链式操作

1.第一个jQuery例子

        $(document).ready(function() {
   
            $("p").click(function() {
   
                console.log(this);
                $(this).hide();
            })
        })

2.jQuery库功能

• html元素选取
• html元素操作
• css操作
• html DOM操作
• html事件函数
• html动画和特效
• ajax

3.script标签的简化

为何只有<script>没有<script type=“text/javascript”>
因为html5中javascript是html5和现代浏览器的默认脚本语言

4.引入jQuery

下载，然后本地引入
不用下载，引入链接
如百度的:<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>

5.jQuery语法

$（selector）.action(){
   }

其中,$是美元符号，selector是选择符，用来查询html元素，action表示对元素进行的操作
如：

$("p").hide();//隐藏<p>标签

6.文档就绪事件

$（document）.ready.function()｛｝

DOM加载完后才可以DOM操作，
否则可能出现：

• 隐藏一个不存在的元素
• 获得未完全加载的图像的大小

7.jQuery选择器

• 元素选择器
• id选择器
• class选择器

等等
*容易搞混：

ul li:first 选择第一个ul中的第一个li
ul li:first.child 选择每一个ul的第一个li

8.jQuery事件

事件：页面对不同访问者的响应

事件处理程序：当html发生某些事件时调用的方法

例如：dblclick（双击），hover（悬停），unload（离开页面）

事件语法：与DOM事件等效的方法

如：

点击事件：$（“p”）.click();

9.jQuery效果

9.1.显示与隐藏

隐藏：hide（）
显示：show（）
切换显隐状态：toggle（）
示例:
  $(document).ready(function() {
   
      $("p").click(function() {
   
          // $("div").show('slow');//div要在display:none状态才能显示
          // $("div").hide('slow');//div要在display:block状态才能隐藏
          $("div").toggle('slow');//对于隐藏的div就显示,显示的div就隐藏
      });
  })

9.2.淡入淡出

淡入：fadeIn()
淡出：fadeOut()
切换淡入淡出：fadeToggle()
透明度改变：fadeTo()
	语法：selector.fadeTo(speed,opacity,callback);
	其中，speed是步长可以是"fast","slow",