Jquery学习笔记一
程序员文章站
2024-03-05 14:52:26
...
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>
效果：