jQuery学习01

jQuery学习

1.什么是jQuery?

jQuery是一个轻量级的JavaScript函数库

特征:”写的少,做的多“

2.jQuery功能

  • HTML元素选取
  • HTML元素操作
  • CSS操作
  • HTML事件函数
  • JavaScript特效和动画
  • HTML DOM遍历和修改
  • AJAX
  • Utilities
  • 还有大量插件

3.为什么使用jQuery?

jQuery是目前最流行的JS框架,而且提供了大量的扩展

4.如何使用?

1.jQuery安装

可以在本地下载后引入jquery,也可以采用cdn的方式,比如说:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

在控制台上可以使用$.fn.jquery命令查询你使用jquery版本

image-20201113102418670

2.jQuery语法

基础语法:

$(selector).action()

$符号代表jQuery,

selector是选择符,实际值为要查询或者查找的HTML元素,比如”h1“,"p",再补充一个this,

action()表示对元素进行的操作,比如说hide()隐藏,show()显示

$("h1").hide("fast");

这句话的意思是隐藏标签为

的元素,参数为“fast”,快速隐藏,补充:有的操作是可以添加参数的,具体使用什么参数请查看文档。

3.jQuery选择器

  • 元素选择器

  • id选择器

  • .class选择器

    测试代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>.class选择器</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script>
            $(document).ready(function (){
                // $("button").click(function (){
                //     $("p").hide();
                // })
                $("#demo").click(function (){
                    $("#demo").hide();
                })
                $("button").click(function (){
                    $(".test").hide();
                })
            })
        </script>
    </head>
    <body>
    <h1>我是一个标题</h1>
    <p>这是一个段落</p>
    <p id="demo">id为demo的段落</p>
    <p class="test">class为test的段落</p>
    <button>按钮</button>
    </body>
    </html>
    

    更多实例:

    元素 元素
    $("*") 选取所有元素 在线实例
    $(this) 选取当前 HTML 元素 在线实例
    $("p.intro") 选取 class 为 intro 的

    元素

    在线实例
    $("p:first") 选取第一个

    元素

    在线实例
    $("ul li:first") 选取第一个
      元素的第一个
    • 元素
    在线实例
    $("ul li:first-child") 选取每个
      元素的第一个
    • 元素
    在线实例
    $("[href]") 选取带有 href 属性的元素 在线实例
    $("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 元素 在线实例
    $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 元素 在线实例
    $(":button") 选取所有 type="button" 的 元素 和 在线实例
    $("tr:even") 选取偶数位置的
    在线实例
    $("tr:odd") 选取奇数位置的
    在线实例

4.jQuery事件

在元素在移动鼠标

选取单选按钮

点击元素

常见的DOM事件

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress(键按下) submit load
dblclick(双击) keydown(键按下的过程) change resize(浏览器窗口调整大小)
mouseenter(鼠标进入) keyup(键被松开) focus(获得焦点) scroll(滚动)
mouseleave(鼠标离开) blur(失去焦点) unload(离开页面)
hover(鼠标悬停再被选元素上时) ready(当DOM准备就绪时,指定一个函数来执行)
holdReady 暂停或恢复ready()事件的执行

5.jQuery效果

hide() 隐藏

show()显示

toggle()相当于切换显示隐藏和显示

fadeIn()淡入

fadeOut()淡出

fadeToggle()相当于切换显示淡入和淡出

fadeTo("slow","0.7")设置透明度,值在0~1之间

可以带有参数:“slow”,"fast"以及毫秒单位的数值

6.jQuery HTML

捕获内容和设置内容:

text()设置或返回所选元素的文本内容

html()设置或返回所选元素的内容(包括HTML标记)

val()设置或返回表单字段的值

attr()获取属性

添加元素内容:

append()在文本后面添加

prepend()在文本开头前面追加

移除元素:

remove()删除备选元素以及子元素,可以添加参数进行删除过滤

empty()删除子元素

css操作

addClass()向备选添加一个或者多个类

removeClass()从备选元素中删除一个或者多个类

toggleClass()对被选元素进行添加/删除的切换操作

css()设置和返回样式属性,也可以设置多个css属性

尺寸:

  • width()设置或者返回元素的宽度
  • height()设置或者返回元素的高度
  • innerWidth()返回元素的宽度,包括内边距
  • innerHeight()返回元素的高度,包括内边距
  • outerWidth()返回元素的高度,包括内边距和边框
  • outerHeight()返回元素的高度,包括内边距和边框
posted @ 2020-11-16 09:04  侠客小飞  阅读(83)  评论(0编辑  收藏  举报