jQuery-01

2019-09-25 本文已影响0人 xiaohan_zhang

入口函数写法

        // 第一种
        $(document).ready(function () {
           alert('1');
        });
        // 第二种
        jQuery(document).ready(function () {
           alert('2');
        });
        // 第三种---推荐
        $(function () {
            alert('3');
        });
        // 第四种
        jQuery(function () {
           alert('4');
        });

核心函数

$(); 代表用jQuery的核心函数。

接收一个函数

$(function () {
    alert("接收一个函数");
});

接收一个字符串
2.1 接收一个字符串选择器返回一个jQuery对象，对象中保存了找到的DOM元素

var $box1 = $(".box1");
var $box2 = $("#box2");
console.log($box1);
console.log($box2);

2.2 接收一个代码片段返回一个jQuery对象，对象中保存了创建的DOM元素

var $p = $("<p>我是段落</p>");
console.log($p);
// 将新创建的P标签添加到box1中
$box1.append($p);

接收一个DOM元素会被包装成一个jQuery对象返回

var span = document.getElementsByTagName('span')[0];
console.log(span);
var $span = $(span);
console.log($span);

jQuery对象

jQuery对象是伪数组。
伪数组：有从0到length-1的属性，并且有length属性。

var $div = $('div');
console.log($div);

jQuery中的静态方法

each

/*
* jQuery的each静态方法
* 第一个参数：当前遍历到的索引
* 第二个参数：遍历到的元素
* jQuery的each方法可以遍历伪数组
* */
$.each(arr, function (index, value) {
    console.log(index, value);
});
$.each(obj, function (index, value) {
    console.log(index, value);
});

map

/*
* jQuery的map静态方法
* 第一个参数：要遍历的数组
* 第二个参数：每遍历一个元素之后执行的回调函数
* 回调函数的参数：
* 第一个参数：遍历到的元素
* 第二个参数：遍历到的索引
* jQuery的map方法可以遍历伪数组
* */
$.map(arr, function (value,index) {
    console.log(index, value);
});

$.map(obj, function (value,index) {
    console.log(index, value);
});

jQuery的each静态方法和map静态方法的区别：

each静态方法默认的返回值为当前遍历的数组或伪数组；
map静态方法默认的返回值为空数组；

var res1 = $.each(obj, function (index, value) {

});
var res2 = $.map(obj, function (value,index) {
    return obj;
    // return value + index;
});
console.log("each res = ", res1);
console.log("map res = ", res2);

each静态方法不支持在回调函数中对遍历的数组进行处理；
map静态方法可以在回调函数中通过return对遍历的数组进行处理，生成一个新的数组返回；

$.trim()
作用：去除字符串两端的空格
参数：需要去除空格的字符串
返回值：去除空格之后的字符串

var ss = '  hahahah     ';
var res = $.trim(ss);
console.log('-----' + ss + '-----');    // -----  hahahah     -----
console.log('-----' + res + '-----');   // -----hahahah-----

$.isWindow()
作用：判断传入的对象是否是window对象
返回值：true/false

var arr = [1,2,3];
var obj = {'name':'xiaolan', 'age':17};
var f = function () {}
var w = window;

var res1 = $.isWindow(arr);
var res2 = $.isWindow(obj);
var res3 = $.isWindow(f);
var res4 = $.isWindow(w);
console.log(res1);  // false
console.log(res2);  // false
console.log(res3);  // false
console.log(res4);  // true

$.isArray()
作用：判断传入的对象是否是数组
返回值：true/false

var arr = [1,2,3];
var obj = {'name':'xiaolan', 'age':17};

var res5 = $.isArray(arr);
var res6 = $.isArray(obj);
console.log(res5);  // true
console.log(res6);  // false

$.isFunction()
作用：判断传入的对象是否是函数
返回值：true/false
注意点：jQuery本质是一个函数

var arr = [1,2,3];
var f = function () {}

var res7 = $.isFunction(f);
var res8 = $.isFunction(arr);
var res9 = $.isFunction(jQuery);
console.log(res7);  // true
console.log(res8);  // false
console.log(res9);  // true

holdReady
作用：暂停/恢复入口函数的执行

// 暂停入口函数的执行
$.holdReady(true);
$(function () {
    alert("ready");
});

var btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
    // 恢复ready函数执行
    $.holdReady(false);
}

内容选择器

:empty
作用：找到既没有文本内容也没有子元素的指定元素
:parent
作用：找到有文本内容有子元素的指定元素
:contains(text)
作用：找到包含指定文本内容的指定元素
:has(selector)
作用：找到包含指定子元素的指定元素

<style>
    div{
        width: 50px;
        height: 100px;
        background-color: deepskyblue;
        margin-top: 5px;
    }
</style>
<script>
    $(function () {
        var $div1 = $('div:empty');
        console.log($div1);  // 找到1个

        var $div2 = $('div:parent');
        console.log($div2); // 找到4个

        var $div3 = $('div:contains("我是div")');
        console.log($div3); // 找到2个

        var $div4 = $('div:has("span")');
        console.log($div4); // 找到2个
    });
</script>

<body>
    <div></div>
    <div>我是div</div>
    <div>哈哈哈我是div</div>
    <div><span></span></div>
    <div><p></p></div>
</body>

属性和属性节点

对象中保存的变量是属性；

function Person() {

}
var p = new Person();
p.name = 'xiaolan';
p['age'] = 17;
console.log(p.name, p.age);

HTML标签中添加的属性叫做属性节点；
DOM元素的attributes属性中的所有内容都是属性节点；
<span name="span_name"></span>

操作属性节点：
DOM元素.setAttribute("属性名称","值");
DOM元素.getAttribute("属性名称");
任何对象都有属性，但是只有DOM对象才有属性节点。

attr()和removeAttr()

attr()
作用：获取或者设置属性节点的值
可以传递一个参数，也可以传递两个参数
如果传递一个参数：代表获取属性节点的值
如果传递两个参数：代表设置属性节点的值
注意点：
如果是获取，无论找到多少个元素，只会返回第一个元素指定属性节点的值；
如果是设置，找到多少个元素，就会设置多少个元素，如果设置的属性不存在，系统会自动新增；

console.log($('span').attr("class"));   // span1
$('.span1').attr("class", "span3");
console.log($('span').attr("class"));   // span3

removeAttr()
作用：删除属性节点
注意点：会删除所有找到元素的指定属性节点

    <script>
        $(function () {
            console.log($('span').attr("class"));   // span1
            $('.span1').attr("class", "span3");
            console.log($('span').attr("class"));   // span3
            // $('.span1').attr("abc", "hahaha");

            $('.span2').removeAttr("name");
            $('.span2').removeAttr("class name");   // 删除多个属性
        });
    </script>

<body>
<span class="span1" name="aaa"></span>
<span class="span2" name="bbb"></span>
</body>

prop()和removeProp()

prop()
作用：获取或者设置DOM元素属性的值
removeProp()
作用：删除DOM元素属性
特点同attr()和removeAttr();
注意点：prop()、removeProp()也可以操作属性节点

$('span').eq(0).prop("test","666"); // 第一个span
console.log($('span').prop("test")); // 666
$('span').removeProp("test");

// 操作属性节点
$('span').prop("class", "ssss");
console.log($('span').prop("class"));

console.log($('input').prop("checked"));    // true
console.log($('input').prop("checked"));    // checked

官方推荐，在操作属性节点时，具有true和false两个属性的属性节点，如checked、selected、disabled使用prop()，其它使用attr()。

操作class属性的方法

addClass()
作用：给DOM元素添加class属性
如果要添加多个，多个类名用空格隔开。
removeClass()
作用：删除DOM元素的指定class属性
如果要删除多个，多个类名用空格隔开。
toggleClass()
作用：切换class属性
存在则删除，不存在则添加。

<script>
    $(function () {
        var btns = $('button')
        btns[0].onclick = function () {
            $('div').addClass('class1');
            $('div').addClass('class1 class2');
        };
        btns[1].onclick = function () {
            $('div').removeClass('class2');
            $('div').removeClass('class1 class2');
        };
        btns[2].onclick = function () {
            $('div').toggleClass('class2');
            // $('div').toggleClass('class1 class2');
        };
    });
</script>

<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>

文本值相关方法

html()
和原生js的innerHTML一样
text()
和原生innerText一样
val()

<script>
    $(function () {
        var btns = $('button');
        btns[0].onclick = function () {
            // html() 和原生js的innerHTML一样
            $('div').html('<p>我是段落<span>我是span</span></p>');    // 在div中增加html标签
        };
        btns[1].onclick = function () {
            console.log($('div').html());
        };
        // text() 和原生innerText一样
        btns[2].onclick = function () {
            $('div').text('哈哈哈哈我是div');
        };
        btns[3].onclick = function () {
            console.log($('div').text());
        };
        btns[4].onclick = function () {
            $('input').val('输入点什么呢');
        };
        btns[5].onclick = function () {
            console.log($('input').val());
        };

    });
</script>
<body>
    <button>设置HTML</button>
    <button>获取HTML</button>
    <button>设置text</button>
    <button>获取text</button>
    <button>设置value</button>
    <button>获取value</button>
    <div></div>
    <input type="text">
</body>

操作样式方法

逐个设置

$('div').css('width', '100px');
$('div').css('height', '100px');
$('div').css('background', 'red');

链式设置
注意点：链式操作如果大于三步，建议分开

$('div').css('width','100px').css('height', '100px').css('background', 'blue');

批量设置（推荐）

$('div').css({
    width: "100px",
    height: "100px",
    background: "green"
});

获取CSS样式值

console.log($('div').css('width')); // 100px

操作尺寸和位置

width()
作用：获取/设置元素宽度
offset()
作用：获取/设置元素距离窗口的偏移位
position()
作用：获取元素距离定位元素的偏移位
注意：只能获取不能设置

<script>
    $(function () {
        var btns = $('button');
        btns[0].onclick = function () {
            // 获取元素宽度
            console.log($('.father').width()); // 200
            // offset() 获取元素距离窗口的偏移位
            console.log($('.son').offset().left);   // 150
            // position() 获取元素距离定位元素的偏移位,只能获取 不能设置
            console.log($('.son').position().left); // 50
        };
        btns[1].onclick = function () {
            // 设置元素宽度
            $('.father').width('500px');
            // 设置元素距离窗口的偏移位
            $('.son').offset({
                left: 10
            });
            // position只能获取 不能设置
            $('.son').css({
                left: 10
            });
        };
    });
</script>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <button>获取</button>
    <button>设置</button>
</body>

scrollTop()
获取滚动的偏移位

console.log($(".scroll").scrollTop());

获取网页滚动的偏移位
注意点：为了保证浏览器的兼容按照如下写法（IE认为网页滚动是body，其它浏览器是html）

console.log($("html").scrollTop() + $("body").scrollTop());

设置滚动的偏移位

$(".scroll").scrollTop(300);

设置网页滚动的偏移位

$("html,body").scrollTop(300);