jQuery基础与JavaScript与CSS交互-第五章
目录
- 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:last" )：选取所有
- 元素中的最后一个
- 元素
- $(" li:even" )：选取索引为偶数的所有
- 元素
- $(" li:odd" )：选取索引为奇数的所有
- 元素
- $(" li:not(.three)" )：选取class不是three的元素
- $(":header" )：选取网页中所有标题元素
- $(":focus" )：选取当前获取焦点的元素
- $("li:eq(1)" )：选取索引等于1的
- 元素，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属性
结语
jQuery基础与JavaScript与CSS交互-第五章的更多相关文章
- [书籍翻译] 《JavaScript并发编程》第五章 使用Web Workers
本文是我翻译<JavaScript Concurrency>书籍的第五章 使用Web Workers,该书主要以Promises.Generator.Web workers等技术来讲解Ja ...
- 5种JavaScript和CSS交互的方法
分享 分享 分享 分享 分享 随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需 ...
- 5种你未必知道的JavaScript和CSS交互的方法
随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css ...
- JavaScript高级程序设计：第五章
引用类型 一.object类型: 创建object实例的方式有两种.第一种是使用new操作符后跟Object构造函数,如下所示: var person = new Object(): person ...
- 《JAVASCRIPT高级程序设计》第五章(1)
引用类型是一种将数据和功能组合到一起的数据结构,它与类相似,但是是不同的概念:ECMAScript虽然是一门面向对象的语言,但它不具备传统的面向对象语言所支持的类和结构等基本结构.引用类型也被称为“对 ...
- javascript面向对象精要第五章继承整理精要
javascript中使用原型链支持继承,当一个对象的[prototype]设置为另一个对象时, 就在这两个对象之间创建了一条原型对象链.如果要创建一个继承自其它对象的对象, 使用Object.cre ...
- 《javascript高级程序设计》第五章 reference types
第5 章 引用类型5.1 Object 类型5.2 Array 类型 5.2.1 检测数组 5.2.2 转换方法 5.2.3 栈方法 5.2.4 队列方法 5.2.5 重排序方法 5.2.6 操作方法 ...
- HTML与CSS入门——第五章 使用文本块和列表
知识点: 1.在页面上对齐文本的方法 2.三种HTML列表的使用方法 3.在列表中放置列表的方法 5.1 在页面上对齐文本: 父元素内子元素文本的居中:在控制父元素的text-align:center ...
- 《JAVASCRIPT高级程序设计》第五章(2)
一.Date类型 Date类型类型用于保存日期,有以下几种创建方式: //获取当前时间 var now = new Date(); //获取当前时间的毫秒数 var nowSecond = Date. ...
随机推荐
- php状态设计模式
状态设计模式的关键就是,环境中拥有所需的全部状态对象,每个状态对象又引用了环境对象:环境对象通过维护一个当前状态属性(用于存放状态对象)从而对所需的全部状态对象产生影响. 下面演示了一个简单的状态设计 ...
- Linux网络编程学习(一) ----- 概论和Linux模型(第一章第二章)
1.什么是计算机网络,通信方式是什么? 计算机网络就是通过通信线路相互连接的计算机的集合,主要通过双绞线.同轴电缆.电话线或者光缆等有形传输介质通信,还有就是通过激光.微波.卫星等实现无线通信 2.W ...
- 微信小程序--预览previewImage（长按保存图片）
最近开发小程序,想实现二维码图片长按保存,发现无法保存,只能让图片先预览,再保存.注意:只有太阳码才有长按保存和识别功能,普通二维码只有长按保存功能. <image class='banner' ...
- [Solution] 973. K Closest Points to Origin
Difficulty: Easy Problem We have a list of points on the plane. Find the K closest points to the ori ...
- git配置正确且权限已开但是pull或push提示无权限
因为之前提示输入用户名和密码时输入错误,之后就一直权限认证失败.这种情况下在git bash中输入: git config --system --unset credential.helper 就会重 ...
- 数据库类型空间效率探索（五）- decimal/float/double/varchar
以下测试为userinfo增加一列,列类型分别为decimal.float.double.varchar.由于innodb不支持optimize,所以每次测试,都会删除表test.userinfo,重 ...
- 使用 Ansible 统计服务器资源利用率
使用 Ansible 统计服务器资源利用率: 3 条 shell 脚本实现统计: CPU 利用率统计: top -bn1 | grep load | awk '{printf "CPU Lo ...
- Git 基础 - 删除暂存区的文件
1 直接删除文件 这个文件会有两个操作:已暂存的修改.未暂存的删除 2 直接删除文件 + 记录删除操作 先在工作目录中删除文件,再使用git rm命令记录此次移除文件的操作(删除暂存区中该文件的修改快 ...
- Git的操作方法
创建仓库 git clone 加上你的远程仓库克隆下来 git add . 把你文件里面的改动更改添加到git里面 git status 查看状态,更新了那些内容 git commit -m" ...
- [leetcode]30. Substring with Concatenation of All Words由所有单词连成的子串
You are given a string, s, and a list of words, words, that are all of the same length. Find all sta ...