Jquery学习笔记一

简介: 1、Jquery中$(document).ready()和window.onload的区别2、多个库之间冲突3、简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则。而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象。随后,我们就可以对这个获取到的 D

1、Jquery中$(document).ready()和window.onload的区别

这里写图片描述

2、多个库之间冲突

这里写图片描述

3、简单选择器

在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则。而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象。随后,我们就可以对这个获取到的 DOM 节点进行行为操作了。

#box {
//使用 ID 选择器的 CSS 规则
color:red;
//将 ID 为 box 的元素字体颜色变红
}

在 jQuery 选择器里,我们使用如下的方式获取同样的结果:

$('#box').css('color', 'red');
//获取 DOM 节点对象,并添加行为

除了 ID 选择器之外,还有两种基本的选择器,分别为:元素标签名和类(class):
这里写图片描述
CSS 找到元素后添加的是单一的样式,而 jQuery 则添加的是动作行为。最重要的一点是:CSS 在添加样式的时候,高级选择器会对部分浏览器不兼容,而 jQuery 选择器在添加 CSS 样式的时候却不必为此烦恼。

4、进阶选择器

这里写图片描述

//群组选择器
span, em, .box {
//多种选择器添加红色字体
color:red;
}
//群组选择器 jQuery 方式
$('span, em, .box').css('color', 'red');

//后代选择器
ul li a {
//层层追溯到的元素添加红色字体
color:red;
}
//群组选择器 jQuery 方式
$('ul li a').css('color', 'red');

//通配选择器
* {
//页面所有元素都添加红色字体
color:red;
}
$('*').css('color', 'red');//通配选择器

小注:
在实际使用上,通配选择器一般用的并不多,尤其是在大通配上,比如:$(‘*’),这种使用方法效率很低,影响性能,建议竟可能少用。

组合了多种选择器

$('#box p, ul li *').css('color', 'red');
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Src/jquery.js"></script>
    <meta charset="utf-8" />
    <script type="text/javascript">
        $(document).ready($(function () {
            $('#box p, ul li *').css('color', 'red');
        }))
    </script>
</head>
<body>
    <div id="box">
        <p>pppp1</p>
        div
        <p>pppp2</p>
    </div>
    <p>
        pppp3
    </p>
    <ul>
        <li> <a>aaaa</a></li>
        <li> 2</li>
        <li> 3</li>
    </ul>
</body>
</html>

效果:
这里写图片描述

相关文章
|
4月前
|
JavaScript
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
29 0
|
4月前
|
JSON JavaScript 前端开发
javaweb实训第二天上午——jQuery笔记(3)
JSON格式数据 JSON格式数据概述
35 0
|
4月前
|
JSON JavaScript 前端开发
javaweb实训第二天上午——jQuery笔记(2)
jQuery操作元素或节点的方法 添加:append(),appendTo(),prepend(),after(),before() 删除:remove(),empty() 复制:clone(true)
29 5
|
4月前
|
JavaScript
|
4月前
|
JavaScript 前端开发 Windows
jQuery权威指南学习笔记
jQuery权威指南学习笔记
|
5月前
|
JavaScript 前端开发 UED
前端知识笔记(四)———JQuery 自动刷新页面但不闪烁的实现方法
前端知识笔记(四)———JQuery 自动刷新页面但不闪烁的实现方法
53 0
|
9月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery 选择器全部详细笔记
jQuery 选择器全部详细笔记
57 0
|
9月前
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
|
10月前
|
JavaScript 前端开发 Java
HTML+CSS+JS 学习笔记(四)———jQuery
HTML+CSS+JS 学习笔记(四)———jQuery
|
10月前
|
XML 存储 JSON
【全套jQuery】学了一下午,我敢说这一定是最好的笔记!
【全套jQuery】学了一下午,我敢说这一定是最好的笔记!