1、本章目标
    了解jquery
    了解jquery和js的区别
    掌握jquery的入门
    掌握jquery对象和dom对象的区别
2、jquery简介
    jquery是一个轻量级的JavaScript函数库
    用于客户端浏览器
    核心功能：
        HTML元素选取和操作
        HTML事件函数
        css操作
        ajax
    jquery的优势：
        1、轻量级
        2、强大的选择器
        3、浏览器的兼容性比较好
        4、完善的ajax
        .........
3、jquery安装
    1、下载jquery的js文件
    2、在页面中引入jquery的js文件
    3、jquery的代码放在：
        $(document).ready(functioin(){
            //代码
        });
        $(function(){
            //代码
        });
        上述的两种写法的功能：类似于window.onload,初始化加载
        上述的两种写法的功能和window.onload区别：
            1、window.onload等页面所有内容加载完成后才会执行
                $(document).ready() 等页面结构加载完后才会执行
            2、window.onload若有多个，只会执行最后一个
                $(document).ready()若有多个，均被执行
4、jquery对象和dom对象
    dom对象：页面中所有的元素节点
    jquery对象：jquery对dom对象包装后产生的对象
        通常:$("#元素id")
    注意：dom对象和jquery对象不要混合使用
        比如：获取文本框的值
            js：value属性
            jquery：val()方法
5、jquery对象和dom对象的相互转换（了解）
    jquery对象转dom对象
        （1）jquery对象[下标]
        （2）jquery对象.get(下标)
        将jquery对象当做dom对象数组，通过下标的方式进行访问
    dom对象转jquery对象
        $(dom对象)
6、$的冲突问题
    jquery中封装了$符号，如果其他的框架也有$符号，可能会有冲突的问题
    解决方案1：
        jquery的引入没有先后顺序
            在jquery代码中第一行加入：jQuery.noConflict(); 表示释放jquery对象中的$
            比如：
                <script>
                    jQuery.noConflict(); //释放jquery中的$符号
                    jQuery(funcion(){
                        jQuery("p").css("color","red");
                    });
                </script>
    解决方案2：
        把jquery的引入放在最前面，再引入其他的框架
        比如：
            <script>
                jQuery(function(){
                    $("p").css("color","red");
                });
            </script>
    解决方案3：
        把jquery的引入放在最前面，在引入其他框架
        比如：
            //闭包
            (function($){
                $("p").css("color","red");
            })(jQuery);

本章代码

demo1

<html>

    <head>

        <script src="js/jquery-3.2.1.min.js"></script>

        <script type="text/javascript">

            //onload只会执行最后一个

            window.onload = function(){

                alert('1');

            }

            window.onload = function(){

                alert('2');

            }

            //两个都会被执行

            $(document).ready(function(){

                alert('3');

            });

            $(function(){

                alert('4');

            });

        </script>

    </head>

    <body>

    </body>

</html>

demo2

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title></title>

        <script src="js/jquery-3.2.1.min.js"></script>

        <script>

            $(document).ready(function(){

                //js获取文本框的值

                //为btn按钮绑定单击事件

                document.getElementById("btn").onclick = function(){

                    var v =  document.getElementById("txt").value;

                    alert(v);

                }

                //jquery获取文本框的值

                //为btn按钮绑定单击事件

                $("#btn").click(function(){

                    //通过jquery对象写法,获取文本框对象的值

                    var v = $("#txt").val();

                    alert(v)

                });

            });

        </script>

    </head>

    <body>

        <input type="text" id="txt" />

        <input type="button" value="获取文本框的值" id="btn"/>

    </body>

</html>

demo3

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title></title>

        <script src="js/jquery-3.2.1.min.js"></script>

        <script>

            $(document).ready(function(){

                document.getElementById("btn").onclick = function(){

                    //获取文本框的dom对象

                    var v = document.getElementById("txt");

                    //将dom对象转为jquery对象

                    var v2 = $(v);

                    var v3 = v2.val();

                    alert(v3)

                }

                $("#btn").click(function(){

                    //获取文本框的jquery对象

                    var v = $("#txt");

                    //将jquery对象转为dom对象

                    var v2 = v.get(0); //v[0];

                    var v3 = v2.value;

                    alert(v3)

                });

            });

        </script>

    </head>

    <body>

        <input type="text" id="txt" />

        <input type="button" value="获取文本框的值" id="btn"/>

    </body>

</html>

jquery 第一章的更多相关文章

  1. jQuery第一章

    一.jQuery的优势 1.轻量级:压缩之后大小只有30KB左右. 2.强大的选择器:jQuery允许CSS1到CSS3几乎所有的选择器以及自身独创的选择器. 3.出色的DOM操作的封装:jQuery ...

  2. JQuery第一章js 上机+课后

    =============上机1 包含字母   <!DOCTYPE html>   <html>   <head>   <title>sj1.html& ...

  3. jQuery 第一章 $()选择器

    jquery 是什么? jquery 其实就是一堆的js函数(js库),也是普通的js而已. 有点像我们封装一个函数,把他放到单独的js 文件,等待有需要的时候调用它. 那么使用它有啥好处呢? jqu ...

  4. 第一章 jQuery基础

    第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...

  5. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  6. （李南江jQuery+Ajax）第一章：初识jQuery

    第一章:初识jQuery 一.原生的JS与jQuery的区别 <!DOCTYPE html> <html lang="en"> <head> & ...

  7. 第一章：Javascript语言核心

    本节是javascript语言的一个快速预览,也是本书的第一部分快速预览. 读此书之前,感谢淘宝技术团队对此javascript核心的翻译,感谢弗拉纳根写出此书.感谢你们无私的分享,仅以此笔记献给你们 ...

  8. jquery 第二章

    1.本章目标    css样式    选择器2.css样式    宽.高.边框.背景颜色.字体....... <html> <head> <style> div{ ...

  9. javascript高级程序设计第一章有感

    第一章JavaScript简介 Javascript的诞生最早是为了处理表单数据验证的问题,以前主要是使用perl这个强大的服务端脚本语言处理的.在未诞生javascript之前, 人们每次提交表单就 ...

随机推荐

  1. Unit 3.标签的分类和嵌套规则

    一.标签分类 HTML中标签元素三种不同类型:块状元素,行内元素,行内块状元素. 常用的块状元素: <div> <p> <h1>~<h6> <ol ...

  2. Java 面向对象的基本特征

    前言:  在刚开始接触Java的时候,那时候面对Java面向对象的几大特征一直理解的不是很理解,借着空闲时间在这里整理一下,同时在加深一下印象. 一.封装: Java面向对象的特征之封装,所谓的封装就 ...

  3. DAY11、函数总结

    一.函数的对象 1.函数对象:函数名存放的就是函数的地址,所以函数名也是对像 2.函数对象的应用: 2.1.可以直接被引用   fn = cp_fn 2.2.可以当作函数参数传递    compute ...

  4. EntityFramework Core笔记：表结构及数据基本操作（2）

    1. 表结构操作 1.1 表名 Data Annotations: using System.ComponentModel.DataAnnotations.Schema; [Table("R ...

  5. [BZOJ 3745] [COCI 2015] Norma

    Description 给定一个正整数序列 \(a_1,a_2,\cdots,a_n\),求 \[ \sum_{i=1}^n\sum_{j=i}^n(j-i+1)\min(a_i,a_{i+1},\c ...

  6. A.01.12—模块的输出—通讯（CAN&LIN）

    AN和LIN相关的内容很多,今天仅对几年前困扰过我的一个疑问进行说明. 以前最常见的通迅方式为CAN和LIN,但现在也有很多其他的通讯方式了,而这两种通讯方式仍使用广泛. 前几年常听人说CAN的成本和 ...

  7. CentOS7配置iptables防火墙

    CentOS 7中默认是firewalld防火墙,如果使用iptables需要先关闭firewalld防火墙(1.关闭防火墙,2.取消开机启动). #关闭firewalld systemctl sto ...

  8. 洛谷P1072 Hankson 的趣味题（题解）

    https://www.luogu.org/problemnew/show/P1072(题目传送) 数学的推理在编程的体现越来越明显了.(本人嘀咕) 首先,我们知道这两个等式: (a0,x)=a1,[ ...

  9. Django admin修改密码

    django的admin用户被我多动症一样的测试,给密码弄丢了,需要重置. 从数据库重置的可能性为0,因为django对于密码有保护策略.考虑从运行程序的地方进行重置: 1.在程序的文件夹下,执行这样 ...

  10. windows linux 文件编码转换

    查看文件编码在Linux中查看文件编码可以通过以下几种方式:1.在Vim中可以直接查看文件编码:set fileencoding即可显示文件编码格式.如果你只是想查看其它编码格式的文件或者想解决用Vi ...