标题图
目录
JavaScript 框架种类及其优缺点
jQuery 库
jQuery 对象 $
掌握基本选择器
掌握过滤选择器
掌握表单选择器
RIA 技术
常见的 RIA 技术
- Ajax
- Sliverlight
- Flex
什么是框架?
框架是程序员将一个又一个功能进行封装, 供其他人使用的程序组件, 了解为模板而已. 我们使用框架是为了简化开发进程.
jQuery 库文件
导入:
<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
jquery-1. 版本号. js(开发版) 和 jquery-1. 版本号. min.js(发布版)
第一个 jQuery 程序
- <script src="jquery-1.11.1.min.js"></script>
- <script>
- $(document).ready(function(){
- alert("开启 JQuery 的学习之旅!");
- });
- </script>
$(document).ready() 是整个运行的核心.
练习
<script type = "text/javascript">
function init(){
alert(1);
alert(2);
}
$(document).ready(init);
$().ready(init);
$(init);
$(document).ready(function(){
alert(11);
alert(12);
});
$().ready(function(){
alert(11);
alert(12);
});
$(function(){
alert(11);
alert(22);
});
</script>
jQuery 选择器
$("h2").CSS("background","#08F");
类 CSS 选择器
过滤选择器
基本选择器
#id $('#test') id 为 test
.class $(".test") class 为 test
element $('p') 所有的 < p>
* $('*') 选取所有的元素
层次选择器
$('div span'): 选取 < div > 里所有的 < span > 元素
$('div> span'): 选取 < div > 下元素名是 < span > 的子元素
$('.one + div'):class 为 one 的下一个 < div > 元素
$('#two ~ div'):id 为 two 的元素后面的所有 < div > 兄弟元素
过滤选择器
语法特点是使用 ":"
分类如下:
基本 过滤选择器
属性 过滤选择器
子元素 过滤选择器
可见性 过滤选择器
内容 过滤选择器
表单对象属性 过滤选择器
$("li:first" ): 选取所有 < li > 元素中的第一个 < li > 元素
$("li:last" ): 选取所有 < li > 元素中的最后一个 < li > 元素
$("li:even" ): 选取索引为偶数的所有 < li > 元素
$("li:odd" ): 选取索引为奇数的所有 < li > 元素
$("li:not(.three)" ): 选取 class 不是 three 的元素
$(":header" ): 选取网页中所有标题元素
$(":focus" ): 选取当前获取焦点的元素
$("li:eq(1)" ): 选取索引等于 1 的 < li > 元素, eq-gt-lt,gt 为大于, lt 为小于.
特殊符号的转义
- <div id="id#a">a</div>
- $("#id\\#a");
- <div id="id[3]">b</div>
- $("#id\\[3\\]");
内容过滤选择器
- :contains(text)
- :empty
- :has(selector)
- :parent
选择器的书写规范很严格, 多一个空格或少一个空格, 都会影响选择器的结果.
要求
选择器
基本选择器
层次选择器
过滤选择器
表单选择器
技能
(1) 基本过滤选择器
(2)jQuery 对象的 click() 方法
(3)jQuery 对象的 css() 方法
(4) 选择器
(5)is() 方法
(6)show() 方法
(7)hide() 方法
(8)addClass() 方法
(9)mouseout() 方法
(10)mouseover() 方法
图片
代码:
<html>
<head>
<title > 基本过滤选择器 </title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js">
</script>
</head>
<body>
<h2 > 用户交互设计学习参考书 </h2>
<ul>
<li>JavaScript DOM 编程 </li>
<li > 锋利的 JQuery</li>
<li>JQuery 入门与提高 </li>
<li>JavaScript 高级编程 </li>
<li>JQuery 权威指南 </li>
<li>JQuery 实战 </li>
</ul>
</body>
</html>
图片
代码:
<html>
<head>
<title > 可见性过滤选择器 </title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<p > 萝莉是什么意思?</p>
<div class="tips">
萝莉是洛丽塔的缩写."洛丽塔" 原指 1955 年由俄裔美国作家的小说洛丽塔, 或指小说中的女主角 12 岁的洛丽塔, 后在日本引申发展成一种次文化, 用来表示小女孩, 或用在与其相关的事物, 例如罗莉塔时装. 第一个被世人公认的萝莉角色是 1982 年推出的甜甜仙子里的主角 Momo 公主. 第一代萝莉萌王是魔卡少女樱里的主角木之本樱.
</div>
</body>
</html>
效果展示
"ul li:odd" 选择列表 ul 中奇数项, 用 css() 方法, 设置背影
判断 class 为 tips, 调用 show() 方法显示, 调用 hide() 方法隐藏
- <html>
- <head>
- <title > 基本过滤选择器 </title>
- <script type="text/javascript" src="jquery-1.10.1.js"></script>
- <style type="text/css">
- #id1{
- background: blue;
- }
- #div{
- width: 500px;
- margin: 0px auto;
- }
- </style>
- </head>
- <body>
- <div id="div">
- <h2 id="id1"> 用户交互设计学习参考书 </h2>
- <ul>
- <li>JavaScript DOM 编程 </li>
- <li > 锋利的 JQuery</li>
- <li>JQuery 入门与提高 </li>
- <li>JavaScript 高级编程 </li>
- <li>JQuery 权威指南 </li>
- <li>JQuery 实战 </li>
- </ul>
- </div>
- <script type="text/javascript">
- $("#id1").click(function(){
- $lis = $("ul li:odd");
- $lis.css("background","#ffe773");
- });
- </script>
- </body>
- </html>
- <script type="text/javascript">
- $tips = $(".tips");
- $tips.hide();
- $("p").click(function(){
- if ($tips.is(":hidden")) {
- $tips.show();
- }else{
- $tips.hide();
- }
- });
- </script>
JavaScript 与 CSS 交互
Style 属性
document.getElementById("title").style.color="#f00f00";
常用事件
onclick 单击
onmouseover 鼠标移到某元素之上
onmouseout 鼠标移开
onmousedown 鼠标被按下
visibility
visible 可见的
hidden 不可见的
JavaScript 改变样式
使用 style 属性
使用 className 属性
结语
小礼物走一走 or 点赞
送
来源: http://www.jianshu.com/p/69e2deee076c