jQuery的核心函数和基本属性操作用法(一)

最新推荐文章于 2021-06-29 11:54:59 发布

_筱龙

最新推荐文章于 2021-06-29 11:54:59 发布

阅读量659

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/IT_qslong/article/details/106795524

版权

核心函数

调用jQuery的核心函数

$()
jQuery

传递一个函数

$(function () {
	alert("hello lnj")
}

接受一个字符串选择器

返回一个jQuery对象, 对象中保存了找到的DOM元素

在这里插入图片描述

$(function () {
    var $box1 = $(".box1")
    var $box2 = $("#box2")
    console.log($box1)
    console.log($box2)
}

接收一个字符串代码片段

返回一个jQuery对象, 对象中保存了创建的DOM元素

在这里插入图片描述

$(function () {
    var $box1 = $(".box1")
    var $p = $("<p>我是段落</p>")
    console.log($p)
    $box1.append($p)
}

接收一个DOM元素

会被包装成一个jQuery对象返回给我们

在这里插入图片描述

$(function () {
    var span = document.getElementsByTagName("span")[0]
    console.log(span)
    var $span = $(span)
    console.log($span)
}

jQuery 对象

jQuery对象是一个伪数组(有0到length-1的属性, 并且有length属性)

在这里插入图片描述

$(function () {
    var $div = $("div")
    console.log($div)

    var arr = [1, 3, 5]
    console.log(arr)
})

静态方法

静态方法和实例方法

静态方法通过类名调用

在这里插入图片描述

// 1.定义一个类
function AClass() {        
}
// 2.给这个类添加一个静态方法 - 直接添加给类的就是静态方法
AClass.staticMethod = function () {
	alert("staticMethod")
}
// 静态方法通过类名调用
AClass.staticMethod()

实例方法通过类的实例调用(对象)

在这里插入图片描述

//3.给这个类添加一个实例方法
AClass.prototype.instanceMethod = function () {
	alert("instanceMethod")
}
// 实例方法通过类的实例调用
// 创建一个实例(创建一个对象)
var a = new AClass()
// 通过实例调用实例方法
a.instanceMethod()

each()

原生的forEach方法

只能遍历数组, 不能遍历伪数组

第一个参数: 遍历到的元素
第二个参数: 当前遍历到的索引

var arr = [1, 3, 5, 7, 9]//数组
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5//伪数组
arr.forEach(function (value, index) {
	console.log(index, value)
})
obj.forEach(function (value, index) {
	console.log(index, value)
})

jQuery的each方法

可以遍历伪数组的

第一个参数: 当前遍历到的索引
第二个参数: 遍历到的元素

var arr = [1, 3, 5, 7, 9]//数组
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5//伪数组
$.each(arr, function (index, value) {
	console.log(index, value)
});
$.each(obj, function (index, value) {
	console.log(index, value)
})

map()

原生的map方法

第一个参数: 当前遍历到的元素
第二个参数: 当前遍历到的索引
第三个参数: 当前被遍历的数组

在这里插入图片描述

var arr = [1, 3, 5, 7, 9]//数组
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5//伪数组
arr.map(function (value, index, array) {
	console.log(index, value, array)
})
obj.map(function (value, index, array) {
	console.log(index, value, array)
)

jQuery的map方法

第一个参数: 遍历到的元素
第二个参数: 遍历到的索引

在这里插入图片描述

var arr = [1, 3, 5, 7, 9]//数组
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5//伪数组
var res = $.map(obj, function (value, index) {
	console.log(index, value)
	return value + index
})

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

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

区别一:

each静态方法默认的返回值就是, 遍历谁就返回谁
map静态方法默认的返回值是一个空数组

区别二:

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

trim(str)

作用:去除字符串两端的空格
参数:需要去除空格的字符串
返回值:去除空格之后的字符串

在这里插入图片描述

// 真数组
var arr = [1, 3, 5, 7, 9]
// 伪数组
var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}
// 对象
var obj = {"name":"lnj", age:"33"}
// 函数
var fn = function(){}
// window对象
var w = window

var str = "    lnj    "
var res = $.trim(str);
console.log("---"+str+"---")
console.log("---"+res+"---")

isArray(obj)

作用: 判断传入的对象是否是真数组
返回值: true/false

在这里插入图片描述

// 真数组
var arr = [1, 3, 5, 7, 9]
// 伪数组
var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}
// 对象
var obj = {"name":"lnj", age:"33"}
// 函数
var fn = function(){}
// window对象
var w = window

var res = $.isArray(arr)
console.log(res)//true

isFunction(obj)

作用: 判断传入的对象是否是一个函数
返回值: true/false

在这里插入图片描述

// 真数组
var arr = [1, 3, 5, 7, 9]
// 伪数组
var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}
// 对象
var obj = {"name":"lnj", age:"33"}
// 函数
var fn = function(){}
// window对象
var w = window

var res = $.isFunction(jQuery)//(fn)
console.log(res)//true

isWindow(obj)

作用: 判断传入的对象是否是window对象
返回值: true/false

在这里插入图片描述

// 真数组
var arr = [1, 3, 5, 7, 9]
// 伪数组
var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}
// 对象
var obj = {"name":"lnj", age:"33"}
// 函数
var fn = function(){}
// window对象
var w = window

var res = $.isWindow(w)
console.log(res)//true

holdReady(thold)

作用: 暂停ready执行

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        // $.holdReady(true) 作用: 暂停ready执行
        $.holdReady(true)
        $(document).ready(function () {
            alert("ready")
        });
    </script>
</head>
<body>
    <button>回复ready事件</button>
    <script>
        var btn = document.getElementsByTagName("button")[0]
        btn.onclick = function () {
            $.holdReady(false)
        }
    </script>
</body>
</html>

jQuery对象

选择器

内容过滤选择器

:empty

作用:找到既没有文本内容也没有子元素的指定元素

$(function () {
	var $div = $("div:empty")
	console.log($div)
}

:parent

作用: 找到有文本内容或有子元素的指定元素

$(function () {
	var $div = $("div:parent")
	console.log($div)
}

:contains(text)

作用: 找到包含指定文本内容的指定元素

GIF 2020 6 16 18 14 29

$(function () {
	var $div = $("div:contains('我是div')")
	console.log($div)
}

:has(selector)

作用: 找到包含指定子元素的指定元素

GIF 2020 6 16 18 15 34

$(function () {
	var $div = $("div:has('span')")
	console.log($div)
}

属性操作

属性和属性节点

1.什么是属性?

对象身上保存的变量就是属性

2.如何操作属性?

对象.属性名称 = 值

对象.属性名称

对象[“属性名称”] = 值

对象[“属性名称”]

QQæˆªå›¾20200616181922

$(function () {
    function Person() {
    }
    var p = new Person()
    // p.name = "lnj"
    p["name"] = "zs"
    // console.log(p.name)
    console.log(p["name"])
})

3.什么是属性节点?

在编写HTML代码时,在HTML标签中添加的属性就是属性节点

在浏览器中找到span这个DOM元素之后, 展开看到的都是属性

在attributes属性中保存的所有内容都是属性节点

4.如何操作属性节点?

DOM元素.setAttribute(“属性名称”, “值”)
DOM元素.getAttribute(“属性名称”)

QQæˆªå›¾20200616182148

$(function () {
    var span = document.getElementsByTagName("span")[0]
    span.setAttribute("name", "lnj")
    console.log(span.getAttribute("name"))
})

5.属性和属性节点有什么区别?

任何对象都有属性, 但是只有DOM对象才有属性节点

attr方法和prop方法

arrt方法

attr(name|pro|key,val|fn)

作用: 获取或者设置属性节点的值

可以传递一个参数, 也可以传递两个参数
如果传递一个参数, 代表获取属性节点的值
如果传递两个参数, 代表设置属性节点的值

如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值

如果是设置:找到多少个元素就会设置多少个元素

如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增

$(function () {
    $("span").attr("class", "box")
})

removeAttr(name)

删除属性节点

会删除所有找到元素指定的属性节点

$(function () {
    $("span").removeAttr("class name")
})

prop方法

特点和attr方法一致

$(function () {
    $("span").eq(0).prop("demo", "it666")
    $("span").eq(1).prop("demo", "lnj")
    console.log($("span").prop("demo"))
})

removeProp方法

特点和removeAttr方法一致

$(function () {
    $("span").removeProp("demo")
})

prop方法不仅能够操作属性, 他还能操作属性节点

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

$(function () {
    // console.log($("span").prop("class"))
    // $("span").prop("class", "box")

    console.log($("input").prop("checked"))// true / false
    console.log($("input").attr("checked"))// checked / undefined

})