JQuery学习笔记2015-8-15(第94天)

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>

 

posted on 2015-08-15 23:12  张小国  阅读(158)  评论(0)  编辑  收藏  举报

导航