首页 前端知识 JavaWeb——JQuery

JavaWeb——JQuery

2024-09-14 23:09:10 前端知识 前端哥 606 662 我要收藏

文章目录

  • JQuery 是什么?
    • jQuery 的原理示意图
  • JQuery 基本开发步骤
  • jQuery 对象和 DOM 对象
    • 将dom对象转为JQuery对象
    • jQuery 对象转成 DOM 对象
  • jQuery 选择器
    • 基本选择器
    • 基础过滤选择器

JQuery 是什么?

基本介绍

  1. jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML,css,dom…
  2. 提供方法、events、选择器,并且方便地为网站提供 AJAX 交互
  3. 其宗旨是—WRITE LESS,DO MORE,写更少的代码,做更多的事情. 4. jQuery 实现了浏览器的兼容问题

jQuery 的原理示意图

在这里插入图片描述

JQuery 基本开发步骤

下面是jquery的一个简单说明
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    引入jquery库-->
    <script type="text/javascript" src="script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        /**
         * 下面的代码必须在  <script type="text/javascript">内写。上面的<script type="text/javascript" src="script/jquery-3.7.1.min.js">仅仅是导包
         * 1. 初次使用 jquery , 你会觉得语法比较奇怪,其实 jquery 的底层仍然是 js,只是做了封 装
         * 2. $(function () {} 等价 window.onload = function () {}
         * 3. $() 可以理解成是一个函数 [可以定义 function $(id) {} ...]
         * 3. $("#btn01") 底层: document.getElementById("btn01")
         * 4. 注意 $("#btn01") 不能写成 $("btn01")
         * 5. 通过$("#btn01") 返回的对象就是 jquery 对象(即进行了封装),而不是原生的 dom 对象
         */
        $(function () {
     
            /*
            * $btn01 是一个 jquery 对象 其实就是对 dom 对象的包装.
            * 2. jquery 中,获取对象的方法是 $("#id"), 必须在 id 前有#
            * 3. 编程中,规定 jquery 对象的命名以$开头.(不是必须,但是约定)
            * */
            var $btn = $("#btn");
            // 绑定事件
            $btn.click(function () {
                     <!--这里是click,不是onclick了-->
                alert("hello, jquery")
            })
        });
    </script>
    <!--    &lt;!&ndash;    使用原生方法&ndash;&gt;-->
    <!--    <script type="text/javascript">-->

    <!--        window.onload = function () {-->
    <!--            var elementById = document.getElementById("btn");-->
    <!--            elementById.onclick = function () {-->
    <!--                alert("提交成功")-->
    <!--            }-->
    <!--        }-->
    <!--    </script>-->
</head>
<body>
<button id="btn">提交</button>
</body>
</html>

jQuery 对象和 DOM 对象

  1. jQuery 对象就是对 DOM 对象进行包装后产生的对象

 比如: $(“#test”).html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法
 这段代码等同于用DOM实现代码: document.getElementById(“id”).innerHTML;

  1. jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用
    jQuery 里的方法: $(“#id”).html();

  2. 约定:如果获取的是 jQuery 对象, 那么要在变量前面加上 $ , 比如: var $variable =
    jQuery 对象 var variable = DOM 对象

将dom对象转为JQuery对象

//把 username dom 对象转成 jquery 对象
var $username = $(username);

jQuery 对象转成 DOM 对象

  • jQuery 本身提供,通过.get(index)方法,得到相应的 DOM 对象
  • jQuery 对象是一个数组对象,可以通过[index]的方法,来得到相应的 DOM 对象
//方式 1
// var username = $username[0];

//方式 2
var username = $username.get(0);

jQuery 选择器

  1. 选择器是 jQuery 的核心, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器
  2. jQuery 选择器的优点
    在这里插入图片描述

基本选择器

● 基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class
和标签名来查找 DOM 元素

1、#id 用法: $("#myDiv"); 返回值 单个元素的组成的集合。
说明: 这个就是直接选择 html 中的 id=“myDiv”

2、Element 用法: $("div") 返回值 集合元素。
说明: element 的英文翻译过来是”元素”,所以 element 其实就是 html 已经定义的标签元素,例如 div, input, a 等等

3、class 用法: $(".myClass") 返回值 集合元素
说明: 这个

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18260.html
标签
评论
发布的文章

HTML5 CSS3面试题整理

2024-05-05 22:05:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!