jQuery——1

<script
    src="https://code.jquery.com/jquery-1.12.4.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>

（3）jQuery入口函数

$符号是jQuery框架对外暴露的全局变量，是window对象的属性，window.jQuery=window.$=jQuery;。

<script>
    //该js写在body之前，加载完页面再运行js，否则失去意义
    //原生js的固定写法
    window.onload=function(event){};
    //jQuery的固定写法
    $(document).ready(function(){});
</script>

原生js和jQuery入口函数的加载模式不同。原生js会等网页全部加载完毕（DOM元素、图片等）才会执行；多个window.onload只会执行一次，后面覆盖前面。jQuery只等待网页中的DOM结构加载完毕，不等图片加载就会执行；多个$(document).ready()依次执行，不会覆盖。

//jQuery入口函数四种写法
$(document).ready(function(){});
jQuery(document).ready(function(){});
$(function(){});//推荐
jQuery(function(){});

（4）jQuery冲突问题

很多js框架都提供了类似jQuery这样的便捷访问方式，如果其它框架也使用$，后引入的框架覆盖之前的，会引起冲突。

//方法1：在编写其它jQuery前释放$使用权，用jQuery代替$
jQuery.noConflict(); //释放$
jQuery(function(){});
//方法2：自定义一个访问符号
var yc=jQuery.noConflict();
yc(function(){});

二、jQuery核心函数与工具方法

1、核心函数

$()代表jQuery核心函数，可接收一个函数、字符串、DOM元素。

<div class="box1"></div>
<div id="box2"></div>
<span></span>

$(function(){//1.接收函数
    //2.返回一个jQuery对象
    var $box1=$(".box1");//2.接收字符串选择器
    var $box2=$("#box2");

    var $p=$("<p>我是段落</p>");//2.接收字符串代码片段
    $box1.append($p);//创建对应的DOM元素
    
    //3.接收DOM元素，该元素被包装成一个jQuery对象返回
    var span=document.getElementsByTagName("span")[0];
    var $span=$(span);
    console.log($span);
});

jQuery对象是一个伪数组，有0-length-1的属性和length属性，可以通过下标对每个元素进行访问。

2、静态方法

（1）静态方法和实例方法

静态方法直接添加到类上面，通过类名调用；实例方法添加到类的原型上，通过实例调用。

function AClass(){//定义一个类

}
AClass.staticMethod=function(){//静态方法
    alert("staticMethod");
};
AClass.staticMethod();
AClass.prototype.instanceMethod=function(){//实例方法
    alert("instanceMethod");
};
var a=new AClass();
a.instanceMethod();

（2）each和map方法

var arr=[1,3,5,7,9];//数组
var obj={0:1,1:3,2:5,3:7,4:9,length:5};//伪数组

//原生forEach和map方法只能遍历数组，不能遍历伪数组
arr.forEach(function(value,index,array){
    console.log(index,value,array[index]);
});
arr.map(function(value,index,array){
    console.log(index,value,array[index]);
});

//利用jQuery的each和map静态方法遍历数组和伪数组
//参数为数组、回调函数（参数遍历到的索引及元素）
//默认返回值是遍历的数组或伪数组，return不会对返回值产生影响
var res1=$.each(obj,function(index,value){
    console.log(index,value);
});
console.log(res1);//{0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5}

//参数为数组、回调函数（参数遍历到的元素及索引）
//默认返回值是空数组，或将回调函数的返回值组成一个新数组返回
var res2=$.map(obj,function(value,index){
    console.log(index,value);
    return index+value;
});
console.log(res2);//(5) [1, 4, 7, 10, 13]

（3）其它静态方法

$.trim()，去除字符串两端的空格，返回去除空格之后的字符串。

$.isWindow()，判断传入的对象是否是window对象，返回true/false。

$.isArray()，判断传入的对象是否是真数组，返回true/false。

$.isFunction()，判断传入的对象是否是函数，返回true/false。jQuery框架本质上是一个匿名函数，$.isFunction($)返回true。

//jQuery框架
(function(window,undefined){
})(window);

（4）holdReady方法

$.holdReady()，传入true或false，暂停或恢复jQuery.ready()事件（入口函数），例如为了等待资源加载完。

<head>
    <meta charset="UTF-8">
    <title>04-jQuery静态方法</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        // 使用$直接调用,是静态方法
        $.holdReady(true);
        $(function () {
            $("#first").click(function () {
                alert("我是你想要的弹窗");
            });
        });
    </script>
</head>
<body>
    <button id="first">点击测试弹出</button>
    <button id="second">解除延迟</button>
    <script>
        $("#second").click(function(){
            $.holdReady(false);
        });
    </script>
</body>

3、VS Code简化操作

打开默认浏览器，Alt+B。

文件-> 首选项-> 用户代码片段-> html-> 添加如下.json代码。

"Print to console": {
"prefix": "jq",
"body": [
    "<!DOCTYPE html>",
    "<html>",
    "<head>",
    "    <meta charset='UTF-8'>",
    "    <title>$1</title>",
    "    <script src='jquery-1.12.4.js'></script>",
    "    <script>",
    "        $(function(){",
    "            $2",
    "        });",
    "    </script>",
    "</head>",
    "<body>",
    "    $0",
    "</body>",
    "</html>"
],
"description": "jQuery"
}

三、jQuery属性和CSS

1、属性

属性是对象上保存的变量，操作属性：对象.属性名称;/对象[“属性名称”]。属性节点指在html标签中添加的属性，操作属性节点通过getAttribute()和setAttribute()方法。任何对象都有属性，只有DOM对象有属性节点。

通过浏览器查看属性和属性节点，Sources-> 源码-> Watch-> 获取节点document.getElementsByTagName(‘span’)-> 展开看到属性，其中attributes属性保存属性节点。

attr(name[,value]);获取或设置属性节点的值。获取时，返回找到所有元素中第一个元素指定属性节点的值；设置时，为找到的所有元素设置该属性值，如果设置的属性节点不存在，系统会自动新增该属性。

removeAttr(name);删除属性节点，删除所有找到元素指定的属性节点，属性名用空格隔开表示删除多个属性节点。

$("span").attr("class"); //获取
$("span").attr("class","box1 box2"); //设置
$("span").removeAttr("class"); //删除

prop()、removeProp()方法操作属性，也可以操作属性节点，与attr()、removeAttr()方法特点一致。

官方推荐，操作属性节点时，具有true/false两个属性的属性节点（如：checked, selected, disabled等）使用prop，其它使用attr。因为对于具有true/false两个属性的属性节点，attr分别返回checked/undefined，而prop返回true/false。

2、CSS类

通过操作标签的class属性实现CSS样式改变。

addClass()，添加类；

removeClass()，删除类；

toggleClass()，切换类，存在就删除，不存在就添加。

<head>
    <meta charset='UTF-8'>
    <title></title>
    <style>
        *{margin:0; padding:0;}
        .class1{width:100px; height:100px; background:red;}
        .class2{border:10px solid #000;}
    </style>
    <script src='jquery-1.12.4.js'></script>
    <script>
        $(function(){
            var btns=document.getElementsByTagName("button");
            btns[0].onclick=function(){
                $("div").addClass("class1 class2");//添加类
            };
            btns[1].onclick=function(){
                $("div").removeClass("class1");//删除类
            };
            btns[2].onclick=function(){
                $("div").toggleClass("class2");//切换类
            };
        });
    </script>
</head>
<body>
    <button>添加类</button>
    <button>删除类</button>
    <button>切换类</button>
    <div></div>
</body>

3、html代码/文本/值

html()添加或获取元素中的html，text()添加或获取元素中的文本。html()可以实现text()的功能，一般使用html()方法即可。

val()添加或获取元素value值。

$("div").html("<p>我是段落</p>");//添加html，相当于innerHTML
$("div").html();//获取html
$("div").text("我是文本");//添加文本，相当于innerText
$("div").text();//获取文本
$("input").val("请输入内容");//添加value值
$("input").val();//获取val值

4、CSS

//逐个设置
$("div").css("width","100px");
$("div").css("height","100px");
$("div").css("background","red");
//链式设置
$("div").css("width","100px").css("height","100px").css("background","yellow");
//批量设置，以对象的方式传入
$("div").css({
    width:"100px",
    height:"200px",
    background:"blue"
});

//获取样式
console.log($("div").css("width"));

5、位置和尺寸

offset()获取或设置元素距离窗口的偏移位；

position()获取或设置元素距离定位元素的偏移位。

$(".son").offset().top;//获取
$(".son").offset({//设置
    left:10
});
$(".son").position().top;//只能获取不能设置

scrollTop(), scrollLeft()获取或设置滚动的偏移位。

$(".scroll").scrollTop();//获取
$(".scroll").scrollTop(20);//设置
//获取网页滚动的偏移位,为了保证浏览器的兼容，ie通过body，其它通过html元素
$("body").scrollTop()+$("html").scrollTop();//获取
$("body,html").scrollTop(50);//设置

height(), width()获取或设置元素的高度和宽度，不包括padding和border；

innerHeight(), innerWidth()获取或设置元素的高度和宽度，包括padding，不包括border；

outerHeight(), outerWidth()获取或设置元素的高度和宽度，包括padding和border。

$(".parent").width("500px");//设置元素宽度
$(".parent").width();//获取元素宽度

一、初识jQuery

1、jQuery版本

2、jQuery使用