jQuery入门之选择器的使用

本文介绍了jQuery的基本概念,包括它的优势(如轻量级、跨浏览器兼容、链式编程等)、适用场景(如中大型网站开发和前端框架基础)以及如何使用。通过实例展示了jQuery的入口函数和选择器的使用,帮助读者快速上手jQuery。
摘要由CSDN通过智能技术生成

一. 3W1H
1.1 what是什么?
1.2为什么学习
(1) 为了简化JavaScript开发:选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件

(2)jQuery的优势:
    轻量级。核心文件才几十kb,不会影响页面加载速度
    跨浏览器兼容。基本兼容了现在主流的浏览器
    链式编程、隐式迭代
    对事件、样式、动画支持,大大简化了DOM操作
    支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等
    免费、开源

1.3Where?哪些情况下用?
(1)中大型网站开发
(2)是一些前端框架的基础,比如EasyUI,Bootstrap

1.4How怎么用
使用jQuery步骤
    1.下载jQuery库
        开发版本:jquery-3.3.1.js
        生产版本:jquery-3.3.1.min.js
    2.引入:将js文件复制到项目中
    3.使用

二. jQuery入口函数
    2种写法
        

三.jQuery选择器
(1)  jQuery中的选择器就是一个标记,为了快速获取指定的标签
 (2) jQuery中常见选择器: ID选择器  class选择器  element选择器
  子代选择器  后代选择器  相邻兄弟选择器  分组选择器...

四.jQuery中的一些选择器的使用


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入jQuery库 script -->
        <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
 
        <!-- 原生态JavaScript实现点击弹窗 -->
        <script type="text/javascript">
            // 加载函数
            // 1.window.onload = function(){}   1次
            // 2.window.addEventLinstener('load',function(){});  多次
 
            window.onload = function() {
                // 获取按钮
                var btn = document.getElementById('btn1');
                // 设置按钮的事件
                btn.onclick = function() {
                    alert(123)
                }
            };
        </script>
 
        <!-- jQuery实现点击弹窗 -->
        <script type="text/javascript">
            // 加载函数
            // 1.标准写法 $(document).ready(function(){});
            // 2.简写写法 $(function(){})
 
            jQuery(function() {
                // 获取按钮设置点击事件弹窗
                // 这种编写代码的方式称为"链式写法"
                $("#btn2").click(function() {
                    alert(123)
                });
            });
        </script>
 
 
        <!-- jQuery的文件的结构 -->
        <script type="text/javascript">
            // 1.打开jQuery库查看后  有一个基本架构
            /*
                (function(){
                    
                }())
                上述这种结构称为自执行函数结构,作用就是自己定义调用自己自动执行
            */
 
            // 函数
            function add() {
                alert(123)
            }
            // 手动调用
            // add();
 
            // 自执行函数的定义
            // 闭合函数
            (function() {
                // alert('自执行函数');
 
            }())
 
            // $ 和$()的作用
            // $这个符号是在jQuery库中定义  属于jQuery
            // $有点类似原生态js的window对象
            // 在jQuery中,$作为了window对象中的一个属性(对象属性,对象函数)
            console.log(window);
            // window.jQuery = window.$ = jQuery;
            // $等价于jQuery
 
 
            // Person.add();  new Person().add();
            // $  有点类似Java的类  each  isFunction
            // $()  相当于类的构造方法
 
            console.log($.type($));
            // 判断$的类型
            console.log(Object.prototype.toString.call($));
 
            // $()  括号中可以根据需求传入指定的参数
            // 根据参数不同,意思不同
            // 1.参数为匿名函数时,意思:加载函数 $(function(){});
            // 2.参数为字符串时,有两层意思
            // 2.1 获取页面元素(选择器) $("#id")  $(".class")
            // 2.2 创建标签  $("<a></a>");
            // 3.参数为DOM对象(js对象) 意思:转换
            // 明天  js对象《---》jQuery对象
            var b1 = document.getElementById('btn1');
            var $b1 = $("#btn1");
            // console.log(b1 == $b1); //false
        </script>
    </head>
    <body>
        <h3>jQuery与js的使用</h3>
        <hr>
        <button id="btn1" type="button">点击后弹窗[原生态javascript]</button>
        <button id="btn2" type="button">点击后弹窗[jQuery]</button>
 
 
 
    </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值