标题图
目录
JavaScript框架种类及其优缺点
jQuery库
jQuery对象$
掌握基本选择器
掌握过滤选择器
掌握表单选择器
RIA技术
常见的RIA技术
Ajax
Sliverlight
Flex
什么是框架？
框架是程序员将一个又一个功能进行封装，供其他人使用的程序组件，了解为模板而已。我们使用框架是为了简化开发进程。
jQuery库文件
导入：
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.11.3.js" type="text/javascript"></script>
jquery-1.版本号.js（开发版）和 jquery-1.版本号.min.js（发布版）
第一个jQuery程序
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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为testelement $(‘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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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";常用事件
单击 onmouseover鼠标移到某元素之上 onmouseout鼠标移开 onmousedown鼠标被按下
visibility
visible可见的
hidden不可见的
JavaScript改变样式
使用style属性
使用className属性
作者：达叔小生
链接：https://www.jianshu.com/p/69e2deee076c
共同学习，写下你的评论
评论加载中...
作者其他优质文章
