jQuery

XYX153

于 2022-09-13 13:01:56 发布

阅读量148

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/XYX153/article/details/126831247

版权

// jquery 使用的方法：

    // 1. 查询并存储元素
    // 2. 操作元素，包括修改元素样式，绑定事件等

    // 通过document.querySelector获取到的 box，是一个dom对象
    let box = document.querySelector('.box')
    // box 是一个 dom
    console.log(box);

    // 获取元素的语法：$(selector)
    // 通过jquery获取到的对象 $box ，我们称为jquery对象，该对象类似一个数组，其中的数组成员就是dom对象
    // jquery 对象的所有操作将影响对象中的所有数组成员
    let $box = $('.box')

    console.log($box);

    // 操纵元素

    // 设置div高度和背景色
    // $box.css('height', '200px')
    // let r = $box.css('background-color', '#f00')
    // console.log(r);

    // jquery对象的函数总返回自己
    // 所以可以进行链式调用
    $box.css('height', '200px')
        .css('background-color', '#ff0')
        .css('border', '5px solid #000')

// 使用css函数来设置和读取样式

let $box = $('.box')

// 读取样式

let r = $box.css('width')

console.log(r);

r = $box.css('background-color')

console.log(r);

// 读取多个样式

r = $box.css(['width', 'height', 'background-color'])

console.log(r);

// 设置样式

$box.css('background-color', '#ff0')

// 通过函数设置样式

$box.css('background-color', (index, value) => {

console.log(index);

console.log(value);

if (index % 2 === 0) {

// 通过返回值来设置背景颜色属性

return '#00f'

} else {

return '#0f0'

}

})

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<title>Document</title>

<style>

.box {

width: 100px;

height: 100px;

border: 1px solid black;

}

</style>

</head>

<body>

<div>

<div class="box">1</div>

<div class="box">2</div>

<div class="box">3</div>

<div class="box">4</div>

<div class="box">5</div>

<div class="box">6</div>

</div>

</body>

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

<script>

let $box = $('.box')

console.log($box);

// eq() 该函数将返回对应索引位置的jquery对象

$box.eq(2).css('background-color', '#000')

// 使用eq函数得到的是jquery对象

// 用索引获取到的是dom对象

// jquery对象类似一个数组，可以获取上述jquery对象的dom对象，如下：

console.log($box[3]);

$box[3].style.backgroundColor = '#ff0'

// 也可以通过函数get来获取，

// 与 $box[0]等价

$box.get(0).style.backgroundColor = '#0f0'

</script>

</html>