jQuery基础语法

最新推荐文章于 2022-05-08 20:01:23 发布
最新推荐文章于 2022-05-08 20:01:23 发布
阅读量342 收藏
点赞数
文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangzengxiu/article/details/111054630
版权

JS框架

jQuery

jQuery就是一个早期的JS框架，本质上就是对js事件和DOM操作进行封装的一个js文件。在使用该框架时，只需要引入外部的js文件，就可以使用里面已经定义好的函数。

快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery快速入门</title>
</head>
<body>
<div id="div">我是div</div>
</body>
<!--引入外部js文件-->
<script src="../../js/jquery-3.3.1.js"></script>
<script>

    //普通方式js获取元素
    //方法一
    //  let d = document.getElementById("div");
    //   document.write(d.innerText);
    //方法二
    let jsdiv = document.querySelector("#div");
    alert(jsdiv); //[object HTMLDivElement]
    alert(jsdiv.innerHTML); //我是div

    //通过jQuery方式获取元素对象
    let jqdiv = $("#div");
    alert(jqdiv); //[object Object]
    alert(jqdiv.html());  //我是div


</script>
</html>

js对象与jQuery对象之间的转换

为了让jQuery也可以使用js的相关操作，同时js也可以使用jQuery使用一些jQuery的操作，可以将二者之间进行相互转换

js转为jQuery对象，将js包装为jQuery对象，小括号内不能加双引号

jQuery可以看做为一个装有js对象的容器（数组/集合）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js与jq之间的对象转换</title>
</head>
<body>
<div id="div">我是div</div>
</body>

<script src="../../js/jquery-3.3.1.js"></script>
<script>

    //js方式，通过id属性值来获取div元素
    let jsdiv = document.querySelector("#div");
    //  document.write(jsdiv);  //[object HTMLDivElement]
    document.write(jsdiv.innerHTML);
    document.write("<br>");

    //jQuery方式，通过id属性值获取div元素
    let jqdiv = $("#div");
    //   document.write(jqdiv);
    document.write(jqdiv.html());
    document.write(jqdiv.innerHTML + "---"); //undefined
    document.write("<br>");

    document.write("<br>===转换中===<br>");

    //js转为jQuery对象，将js包装为jQuery对象，小括号内不能加双引号
    //   let js1 = $(jqdiv);
    let jq2 = $(jsdiv);
    document.write(jq2);//[object Object]
    document.write("<br>");
    document.write(jq2.html());//我是div
    document.write("<br>");
    // document.write(jsdiv.html());  //报错因为此时的jsdiv是js对象，而不是jQuery对象，故不能使用jQuery的函数
    // document.write(jsdiv);//[object HTMLDivElement]  js对象
    document.write("<br>");

    //jQuery转为js对象

    //可以将jQuery对象看做是一个封装为js对象的数组
    let js3 = jq2[0];
    document.write(js3);//[object HTMLDivElement]  js对象
    // document.write(js3.html());  报错 已经此时的js3已被转为js对象，不能使用jquery的方法
    document.write("<br>");


    //将jQuery看做为一个集合，通过get的方式获取里面的元素
    let js4 = jq2.get(0);
    document.write(js4);//[object HTMLDivElement]   js对象
    document.write(js4.innerHTML);  //我是div

</script>

</html>

在这里插入图片描述

jQuery常见的事件

其实jQuery是将js中的一些事件封装为了对应的方法，eg: .onclick()------>click()

常见的事件:click()、dblclick()、change()、focus()、blur()、keyup()、mouseout()、mouseover()、scroll()、submit()、$(document).ready()/$()

jQuery事件函数的两个功能：1.为元素绑定事件；2.触发相应的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
</head>
<body>
<input type="button" id="btn" value="点我">
<br>
<input type="text" id="input">

</body>

<script src="../../js/jquery-3.3.1.js"></script>
<script>

    //为按钮绑定click鼠标单击事件
    $("#btn").click(function () {
        alert("你还真点啊！！！");
    });

    //获取焦点事件
    $("#input").focus(function () {
     alert("获取到焦点了");

    });

    //失去焦点事件
    $("#input").blur(function () {
      alert("失去焦点了");
    });

    //设置一个定时器，实现循环点击
   // setInterval(" $(\"#btn\").click()", 3000);

    $("#btn").click();
    $("#btn").click();


</script>

</html>

页面载入事件

程序的入口

js中为一个属性值，多次使用会出现值覆盖的情况，最终只会呈现一个结果，即最终的值。 window.onload = function(){}

jQuery中为一个函数/方法，可以多次调用，不会出现覆盖情况。 $(document).ready(function(){})

简写： $(function(){})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面载入事件</title>
</head>
<body>

</body>

<script src="../../js/jquery-3.3.1.js"></script>
<script>

    //js程序入口
    window.onload = function () {
        alert("页面载入完成1");
    };

    window.onload = function () {
        alert("页面载入完成2");
    };

    window.onload = function () {
        alert("页面载入完成3");   //显示   因为js的程序入口相当于是一个属性，只能有一个值，后面的值会把前面的值覆盖掉
    };

    //jQuery程序入口
    //以下均会显示，因为这是一个方法，可以被多次调用，且不会出现覆盖的情况
    $(document).ready(function () {
        alert("页面加载完成1");
    });

    $(document).ready(function () {
        alert("页面加载完成2");
    });

    $(document).ready(function () {
        alert("页面加载完成3");
    });

    //jQuery程序入口函数简化写法
    $(function () {
        alert("页面加载完成");
    });



</script>

</html>

事件绑定

on绑定事件

off解绑事件，传递要解绑的事件名，否则会解绑该对象所有的事件

one绑定一个一次性事件，单次有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
<div id="div">我是div</div>
<input type="button" id="btn1" value="按钮1"/>
<input type="button" id="btn2" value="按钮2"/>
<input type="button" id="btn3" value="按钮3"/>
</body>

<script src="../../js/jquery-3.3.1.js"></script>
<script>

    //基本的绑定方式
    $("#div").click(function () {
        alert("单击事件");
    });

    //on/off/one
    //on绑定事件
    $("#btn1").on("click",function () {
        alert("按钮1单击事件");
    });

    $("#btn1").on("mouseover",function () {
        alert("按钮1mouseover事件");
    });

    $("#btn2").on("click",function () {
        alert("按钮2单击事件");
    });

    $("#btn2").on("mouseover",function () {
        alert("按钮2mouseover事件");
    });
    

    //off解绑事件，必须要传要解绑的事件的名称，否则会解绑该对象所有的事件
    $("#btn1").off("click");
    
    
    //one绑定一个一次性事件
    $("#btn3").one("click",function () {
        alert("一次性事件");
    })
    
    
</script>

</html>

绑定多个事件

方式一：单独为指定对象绑定多个事件

方式二：链式绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定多个事件</title>
</head>
<body>
<div ><input type="text" id="input" style="width: 100% ;height:100px" ></div>

</body>

<script src="../../js/jquery-3.3.1.js"></script>
<script>

    //方法一
    //单独定义每一个事件，绑定多个事件
    $("#input").on("mouseover",function () {
        $(this).css("background", "red");
    });

    $("#input").mouseout(function () {
        $("#input").css("background", "blue");
    });


    //方法二
    //链式绑定多个事件
    $("#input").on("mouseover",function () {
        $(this).css("background", "red");
    }). mouseout(function () {
        $("#input").css("background", "blue");
    });


</script>

</html>

事件的切换

toggle
两个功能

  1. 在多个点击事件之间轮流执行 1.9之前可用 可以迁移到1.9-版本使用该功能

  2. 让元素显示或隐藏

  3. 迁移步骤1.导入新版本的jq文件;2.导入低版本的迁移文件;3.使用低版本的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件切换</title>
</head>
<body>
<div id="div">我是div</div>
</body>

<script src="../../js/jquery-3.3.1.js"></script>
<script src="../../js/jquery-migrate-1.2.1.min.js"></script>
<script>

    //事件的切换
    //可以通过函数的方式实现 hover鼠标悬停移出的事件切换
/*
    $("#div").hover(function () {
        $(this).css("background", "red");
    },function () {
        $(this).css("background", "blue");
    });*/

    //toggle
    // 2. toggle
    // 两个功能
    // 1. 在多个点击事件之间轮流执行  1.9之前可用 可以迁移到1.9-版本使用该功能
    // 2. 让元素显示或隐藏
    //
    // 迁移步骤
    // 1. 导入新版本的jq文件
    // 2. 导入低版本的迁移文件
    // 3. 使用低版本的功能

    $("#div").toggle(function () {
        // this表单当前事件绑定的元素对象
        $(this).css("background", "red");
    }, function () {
        $(this).css("background", "blue");
    }, function () {
        // this表单当前事件绑定的元素对象
        $(this).css("background", "green");
    }, function () {
        // this表单当前事件绑定的元素对象
        $(this).css("background", "pink");
    }, function () {
        // this表单当前事件绑定的元素对象
        $(this).css("background", "orange");
    });



</script>

</html>

基础语法遍历

jQuery对象可以看做为一个装有js对象的容器，所以，遍历出来的每一个元素均为js对象，要操作js相关的功能

四种遍历方式

方式一：传统方式：遍历jq对象/js数组对象/js集合对象

方式二：jq对象.each()方法 只能遍历jq对象

方式三：$.each()方法：遍历jq对象/js数组对象/js集合对象。与方式二相似

方式四：for of 语句遍历 增强for 没有索引。不可以操作索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历</title>
</head>
<body>
<input type="button" id="btn" value="遍历列表项">
<ul>
    <li>传智播客</li>
    <li>黑马程序员</li>
    <li>传智专修学院</li>
</ul>
</body>

<script src="../../js/jquery-3.3.1.js"></script>
<script>
    /*
       遍历的是js数组对象/js集合对象/jq对象
   */
    //方式一：传统方式：遍历jq对象/js数组对象/js集合对象
 /*   $("#btn").click(function () {
        let lis = $("li");
        alert(lis);
        for (let i = 0; i <lis.length ; i++) {
            alert(i + ":" + lis[i].innerHTML);
        }
    });*/


    //方式二：jq对象.each()方法 只能遍历jq对象
/*    $("#btn").click(
        function () {
            let lis = $("li");
            lis.each(function (index, ele) {
                alert(index + ":" + ele.innerHTML);
            })
        }
    );*/

    //方式三：$.each()方法：遍历jq对象/js数组对象/js集合对象
/*    $("#btn").click(function () {
        let lis = $("li");
        $.each(lis,function (index, ele) {
            alert(index + ":" + ele.innerHTML);
        })
    });*/

    //方式四：for of 语句遍历 增强for 没有索引。遍历jq对象/js数组对象/js集合对象
    $("#btn").click(function () {
        let lis = $("li");
        for (ele of lis) {
            alert(ele.innerHTML);
        }
    })

</script>
</html>
zhangzengxiu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery基础语法实例入门
10-25
主要介绍了jQuery基础语法,以实例形式分析了jQuery的对象以及针对对象进行的操作用法,具有一定的参考借鉴价值,需要的朋友可以参考下
JQuery基础语法小结
10-24
在日常开发中JQuery是我们使用最频繁的JS库。使用JQuery进行开发，你需要先了解JQuery的基本语法。下面是在学习JQuery时总结的一些简单语法。
JQuery_基本语法和特效
CLYCLT的专栏
01-25 550
<br />基本语法：<br /> $("HTML元素").action()<br /><br /> 实例:<br />  $(this).hide();  隐藏当前元素<br />  <br />  $("p").hide();   隐藏所有段落<br />  <br />  $("p.test").hide();   隐藏所有 class="test"的段落<br />  <br />  $("#test").hide();   隐藏所有id="test"的元素<br /><br />  <br />文
jquery基本语法
weixin_30917213的博客
09-22 105
$(this).hide() 演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。$("p").hide() 演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。$(".test").hide() 演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。$("#test").hide() 演示 ...
jQuery 语法
iteye_4883的博客
11-01 81
jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作 示例 $(this).hide() - 隐藏当前元素 $("p").hide() -...
jQuery 基础语法
abc689101的博客
05-08 466
1、jQuery，一个JavaScript库，极大地简化了 JavaScript 编程，很容易学习。它是一款同prototype、Note.js等一样优秀的js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！ 2、美元符号定义 jQuery  选择符（selector）"查询"和"查找" HTML 元素  jQuery 的 action() 执行对元素的操作 3、所有 jQuery 函数位于一个 document ready 函数中，这是为了防止文档在...
jQuery基础语法总结
07-01
jQuery基础语法
Jquery基础语法
03-28
NULL 博文链接：https://technicalsearch.iteye.com/blog/1194506
jQuery基础.pptx
05-20
jQuery语法 1、jQuery简介 1.1 学习jQuery之前，需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? jQuery是一个JavaScript函数库 轻量级，“写的少，做的多” 包含以下功能： HTML元素选取 ...
jQuery语法
06-13
jQuery语法 最近学习的东西 整理出来 方便查看
js及jquery常用语法
08-28
js的常用方法及属性，jquery 使用及方法，相关基础方法的使用
jQuery基础
01-01
jQuery 基础，包含javaScript 语法一览，有提示的Note 都是需要注意的，易出错的，
JQuery基础
04-25
1.jQuery 语法;2.jQuery 选择器;3.jQuery 事件函数;4.jQuery效果;5.JQuery HTML;
jQuery基础：jQuery事件操作
01-20
jQuery中的页面加载事件方法有3种语法形式，具体如下。 $(document).ready(function(){ }); // 语法方式1 $().ready(function() { }); // 语法方式2 $(function() { }); // 语法方式3 事件绑定与切换 参数events...
JQuery
向上取整
11-28 1185
JQuery 概念 一个JavaScript框架。简化JS开发 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模...
jquery基础语法
qq_36069694的博客
03-14 303
jQuery 语法
jquery基础教程
最新发布
09-28
下面是学习jQuery的基础教程步骤： 1. 引入jQuery库：在HTML文件中引入jQuery库，可以使用CDN链接或者本地引入文件的方式。 2. 选择器：学习使用jQuery选择器来选取HTML元素。jQuery提供了多种选择器，包括基本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值