当前位置：首页 > news >正文

前端知识5-jQuery

news 来源：原创 2024/5/14 11:05:06

文章目录

一. jQuery简介
- 1.1 jQuery官网
- 1.2 jQuery概述
- 1.3 jQuery简单使用
二. jQuery语法
三. 选择器
四. jQuery事件
参考:

一. jQuery简介

1.1 jQuery官网

jQuery官网:
jquery官网地址：https://jquery.com/
jquery中文网址：https://www.jquery123.com/

1.2 jQuery概述

Query 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

实例:
如果点击出现的字体，就会在前端界面进行隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>

1.3 jQuery简单使用

导入（建议放在head里面）

<script src="./js/jquer.min.js"></script>

使用（直接使用）

// jQuery //他是核心的对象 里面的方法都是通过他来调用的
console.log(jQuery('body')); //通过jquery对象来调用获取方法
// 使用$来替代jQuery
console.log($('body'));

二. jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法：

$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏 id="test" 的元素

三. 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquer.min.js"></script>
</head>
<body>
    <ul id="box">
        <li>1</li>
        <li name='jack'>2</li>
        <li class="inner">3</li>
        <li>4</li>
    </ul>
    <script>
        // JQuery核心对象，里面的方法都是通过他来调用的
        console.log(jQuery('ul'))
        // 使用$来代替JQuery
        // $获取的是数组还是元素？
        console.log($("#box"))//id为box
        console.log($(".inner"))
        console.log($("li"))
        console.log($("ul>li"))
        console.log($("li[name='jack']"))//使用 选择器+[属性名=属性值] 获取元素
        // 按照使用的时候来决定获取的方式
        console.log($("li").length)
        Array.from($('li')).forEach(v => {
            console.log(v)
        });
        console.log($('li:first'));//获取第一个li
        console.log($('li:last'));//获取最后一个li
        console.log($('li:eq(2)'));//获取下标为2的li元素
        console.log($('li:odd'));//获取奇数下标
        console.log($('li:even'));//获取偶数下标  
    </script>
</body>
</html>

四. jQuery事件

什么是事件？
页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：

在元素上移动鼠标。
选取单选按钮
点击元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquer.min.js"></script>
</head>
<body>
    <div><button>点我</button></div>
    <script>
        // 事件类型 事件处理函数
        $('button').on('click',data,function(e){
            console.log(e)
            console.log(e.data)
            console.log(this)
        })
 
        // 可以在事件发布的时候携带数据 使用e.data接收
        $('button').on('click',{name:"jack"},function(e){
            e = e || window.event 
            console.log(e.data)
        })
 
        // 事件委托机制
        $('div').on('click',function(e){
            console.log(this)
            console.log(e.target)
            console.log($(e.target)) 
        })
 
        // 只有在button情况下click才会触发 
        $('div').on('click','button',{name:"jack"},function(e){
            console.log(this)
            console.log(e.data)
            console.log(e.target)
        })
 
        // 取消事件off
        $('div').off()
 
        // 只执行一次的事件 
        $('button').one('click',function(){
            console.log('点击了')
        })
 
        // 屏幕滚动栏距离
        $(window).on('scroll',function(){
            console.log($(window).scrollLeft())
            console.log($(window).scrollTop())
        })
 
        // 自动执行事件
        $('button').trigger('click',{name:"jack"})
    </script>
</body>
</html>