jQuery（一）

jQuery简介

什么是Jquery?

jQuery的本质就是JavaScript，只是将JavaScript的某些方法封装成一个库，极大简化了原生JavaScript开发。

什么是库? lib

“库”--->（library--文库，图书馆）-->  将一些相关函数方法进行封装以便使用。类似于jar包。

Jquery的优势：

    轻量级，jquery库的大小仅仅几十kb
    强大的选择器（用更精简的代码即可获取指定的html元素，摒弃了之前通过document.getElement等方法，并支持批量操作元素）
    浏览器的兼容性，能兼容大部分市面上的浏览器
     

引入jQuery

    就理解为 引入的一个外部的JS  这个外部的JS就是Jquery
                如下：
                <script src="xxx" ></script>
                然后再另外的script标签中就可以既使用JS代码 也可以使用Jquery代码
                如何引用：
                    1.下载jquery的js文件  但是Hbuiler内置了如何操作：
                        A.选中js文件夹
                        B.右键创建一个js文件
                        C.在下方选中jquery1.x  然后重命名即可
                        D.不要去动里面的代码
                    2.在script标签中引入刚刚下载的jquery文件
                        <script src="js/jquery.js"></script>
                    3.设置语法提示库
                        右下角  选择jquery  xxx
                    4.测试
                    通过alert($) ;  如何正确弹窗就说明OK了 反之失败
                    凡是在控制台看到了这一行代码：$ is not defined
                    就表示Jquery没有引入成功

    常见错误：

    1.引入js的路径有问题或忘记引入jquery

    2.顺序问题,要先引入jquery  再写相关的代码  script的顺序问题

    3.不要在引入的jquery的script标签内部写代码

jquery的魔力

一、代码的简化

分别用JS和Jquery来将页面中的h1标签的内容 修改为 你好

    //js实现
    document.getElementsByTagName("h1")[0].innerText = "你好";            
    //jquery实现   暂时先将$("h1") 理解为 获取所有的h1标签
     $("h1").text("你好");

二、批量操作元素的简化

分别用JS和Jquery来将页面中所有的h1标签的内容 修改为 你好

    //JS实现
    var h1 = document.getElementsByTagName("h1");
    for (let i = 0; i < h1.length; i++) {
            h1[i].innerText = "你好";
    }
    //jquery实现   暂时先将$("h1") 理解为 获取所有的h1标签
    $("h1").text("你好");

暂时先将$("xx") 理解为是获取xx元素  且暂时理解为它是jquery对象

暂时将 document.getElementByXxx 理解为JS对象

注意: js对象无法使用Juqery的相关用法  Juqery对象也无法使用JS的相关用法
常见方法

val()   text()   html()     css()  attr()     prop()

注意事项:  js的value是属性 jquery的val是方法

val使用场景:只能修改表单元素 且拥有value值的组件，例如文本框密码框  但是像h1标签 span标签就无法使用该方法
val的2种用法:

    //1.取值:
    var str = $("input").val();
    alert(str);
    //2.赋值
    $("input").val("~~~");

注意事项:  js的innerText是属性 jquery的text是方法

text使用场景:只能修改非表单元素  例如h1标签 span标签  但是像文本框密码框就无法使用该方法
text的2种用法:

    //1.取值:
    var str = $("h3").text();
    alert(str);
    //2.赋值
    $("h3").text("!!!");

注意事项:  js的innerHtml是属性 jquery的html是方法

html使用场景:只能修改非表单元素  例如h1标签 span标签  但是像文本框密码框就无法使用该方法

html和text的区别是:前者会将html标签识别  后者只会解析成文本
html的2种用法:

    //1.取值:
    var str = $("h3").html();
    alert(str);
    //2.赋值
    $("h3").html("!!!");

注意事项:  js的style.xxx是属性 jquery的css是方法

css使用场景:修改或获取HTML元素的CSS的样式  
css的2种用法:

    //1.取值:
    var str = $("p").css("color");
    alert(str);
    // 2.赋值
    $("p").css("color" , "yellow");

attr使用场景:修改或获取HTML元素的属性 该属性的值 不为true或false

常见的属性A类(等于一个具体的值):id   class   name    type      src   href   
attr的2种用法:

    //1.取值:
    var str = $("input").attr("id");
    alert(str);
    // 2.赋值
    $("input").attr("id" , "aaa");

prop使用场景:修改或获取HTML元素的属性 该属性的值 为true或false