jQuery 01day 初识jQuery

最新推荐文章于 2023-12-23 16:07:46 发布

^O^Wanna

最新推荐文章于 2023-12-23 16:07:46 发布

阅读量116

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_54088653/article/details/116334291

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jquery学习

01 day

初识jQuery

是什么？为什么用？怎么用？

what:

http://jquery.com
一个优秀的js函数库：封装了 Bom和Dom

why:

html元素选取（选择器）
html元素处理
css操作
html事件处理
js动画效果
链式调用
读写合一
浏览器兼容
易扩展插件
ajax封装
......

how：
- 引入jQuery库：1、服务器本地库 2、CDN远程库
- 使用jQuery：1、jQuery核心函数（$/jQuery） 2、jQuery核心对象(执行$()返回的对象)
  
  CDN :项目上线时，一般使用比较靠谱的CDN资源库减轻服务器负担（www.bootcdn.cn）
- 区别2种js库库文件：发布时 1.开发版（测试版 .js）
  
  自己写的时候用 2.生产版（压缩版.min.js）
  
  压缩版是去掉了换行和注释
  
  将变量由单词办成字母很难看懂
- 区别2种引用JS库的方式
- 区别jQuery的不同版本：
  
  1.x 兼容老版本IE 文件更大
  
  2.x 部分IE8及以下不支持文件小，执行效率高
  
  3.x 完全不支持IE8及以下版本提供了一些新的api 提供不包含ajax/动画api的版本

例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 点击确定输入输入的字 -->
    用户名：<input type="text" name="" width="30px" id="username">
    <input type="button" id="bt1" value="确定(原生版)">
    <input type="button" id="bt2" value="确定(jQuery)">
    <!-- // 使用原生 dom -->
    <script>
        window.onload = function() {
            var bt1 = document.getElementById('bt1');
            bt1.onclick = function() {
                var username = document.getElementById('username').value;
                alert(username);
            }
        }
    </script>
    <!-- // 使用jQuery -->
    <!-- 本地引入jQuery -->
    <script src="js/jquery-1.12.4.min.js"></script>
     <!-- 远程引入jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.3.1/jquery.js"></script>
    <script>
        $(function() { //添加文档加载完成的监听
            $('#bt2').click(function() { //给bt2添加点击事件
                var username = $('#username').val()
                alert(username)
            })
        })
    </script>
</body>

</html>

jQuery的两把利器

1、jQuery核心函数(jQuery/$)

简称：jQuery函数

jQuery库向外展示的就是(jQuery/$)

引入jQuery库后，直接使用$即可

当函数用：$(xxx)

当对象用：$.xxx()

2、jQuery核心对象($()返回的对象)

简称：jQuery对象

得到jQuery对象：执行jQuery函数返回的就是jQuery对象

使用jQuery对象：$obj.xxx()

jQuery的核心函数

1、作为一般函数调用

1.1、参数为函数：当DOM加载完成后，执行此回调函数

1.2、参数为选择器字符串：查找所有匹配的标签，并将其封装为jQuery对象

1.3、参数为DOM对象，将DOM对象封装为jQuery对象

1.4、参数为html标签字符串：创造标签对象并封装成jQuery

2、作为对象使用：$.xxx()

2.1、$.each():隐式遍历数组

2.2、$.trim():去掉两端的空格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
</head>
<!-- 
1:点击按钮，显示按钮文字，显示一个新的输入框
2：遍历输出数组中所有的元素值
3.去掉" my shchool   "两端的空格

 -->

<body>
    <div>
        <button id="bt1">测试</button><br>
        <input type="text" name="msg1" id="msg1"><br>
        <input type="text" name="msg2" id="msg2"><br>
    </div>

</body>
<script>
    $(function() {
            $('#bt1').click(function() {
                // this指定是发生事件的对象 这里指的是button 
                // alert($(this).html())等价于alert(this.innerHTML)
                alert($(this).html())
                    // 1.4、参数为html标签字符串：创造标签对象并封装成jQuery
                $('<input type="text" name="msg2" id=""><br>').appendTo("div")
                    //   $.trim()去掉两端的空格
                var str = ' my shchool   ';
                $('#msg1').val(str)
                $('#msg2').val(str.trim())
            })

        })
        // $.each():隐式遍历数组 arr是数组 function回调函数
        // index指的下标 item指的是值
    var arr = [1, 2, 3]
    $.each(arr, function(index, item) {
        alert(item)
    })
</script>

</html>

^O^Wanna

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 01day 初识jQuery

jquery学习目录jquery学习01 day初识jQueryjQuery的两把利器jQuery的核心函数01 day初识jQuery是什么？为什么用？怎么用？what: http://jquery.com 一个优秀的js函数库：封装了 Bom和Dom why: html元素选取（选择器） html元素处理 css操作 html事件处理 js动画效果链式调用读写合一.
复制链接

扫一扫

专栏目录