JQuery 学习基础：
什么是JQ？
•一个优秀的JS库，大型开发必备
JQ的好处？
•简化JS的复杂操作
•不再需要关心兼容性
•提供大量实用方法
如何学习JQ？
•www.jquery.com
•JQ只是辅助工具，要正确面对
•需要分阶段学习
JQ设计思想？
•选择网页元素
–模拟CSS选择元素
–独有表达式选择
–多种筛选方法
•JQ写法
–方法函数化
–链式操作
–取值赋值合体
•JQ与JS关系
–可以共存，不能混用
实例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JQuery基础</title>
</head>
<body>
<div class="box" id="div1">test</div>
</div>
<ul>
<li></li>
<li title="hello"></li>
<li class="box"></li>
<li class="box"></li>
<li title="hello"></li>
</ul>
</body>
<script src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
// 选择元素的方式：
//$("#div1").css(‘background‘, ‘blue‘);
//$(‘div‘).css(‘background‘,‘red‘)
//$(‘.box‘).css(‘background‘,‘green‘);
$(‘li:eq(2)‘).css(‘background‘,‘red‘); // eq就相当于数组的下标；
$(‘li:even‘).css(‘background‘,‘black‘);
$(‘li:odd‘).css(‘background‘,‘pink‘);
// even 是奇数的意思； odd是偶数的意思
//$(‘li‘).filter(‘[title=hello]‘).css(‘background‘,‘blue‘);
//$(‘li‘).filter(‘.box‘).css(‘background‘,‘green‘);
</script>
</html>
时间： 2024-10-11 22:19:42