jQuery基础与JavaScript与CSS交互-第五章

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>兄弟元素

过滤选择器

语法特点是使用“:”

分类如下：

基本过滤选择器
属性过滤选择器
子元素过滤选择器
可见性过滤选择器
内容过滤选择器
表单对象属性过滤选择器
1. $(” li:first” )：选取所有
2. 元素中的第一个
3. 元素
4. $(” li:last” )：选取所有
5. 元素中的最后一个
6. 元素
7. $(” li:even” )：选取索引为偶数的所有
8. 元素
9. $(” li:odd” )：选取索引为奇数的所有
10. 元素
11. $(” li:not(.three)” )：选取class不是three的元素
12. $(“:header” )：选取网页中所有标题元素
13. $(“:focus” )：选取当前获取焦点的元素
14. $(“li:eq(1)” )：选取索引等于1的
15. 元素，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交互-第五章相关推荐

java js获取css方法_5种JavaScript和CSS交互的方法
原标题:5种JavaScript和CSS交互的方法随着浏览器不断的升级改进,CSS和Java之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合 ...
响应式网页设计之JavaScript与CSS交互
JavaScript与CSS交互补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来. 文章目录 JavaScri ...
5种你未必知道的JavaScript和CSS交互的方法
随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.cs ...
5种JavaScript和CSS交互的方法
英文 | https://davidwalsh.name/ways-css-javascript-interact 译文 | https://www.webhek.com/post/ways-css- ...
jQuery基础，javascript
1.获取标签id赋值 $("#data1").text("fwefewfewfwe"); 2.获取表单输入值 var data = $("#myFor ...
javaScript和css交互
1.如何给图片加边框 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
小白读《锋利的jQuery（第2版）》第五章学习笔记（表单、表格）
表单应用表单3个组成部分表单标签表单域表单按钮单行文本框应用获取和失去焦点改变样式. 示例: HTML <form action="#" method=" ...
计算机硬件技术基础（太原理工大学）：第五章
复习点一.指令和指令系统 1.指令 a.指令格式 b.指令的操作码 c.指令的地址码 2.指令系统二.80X86的寻址方式 1.指令寻址 (1)顺序寻址 (2)跳转寻址 a.相对寻址(较为常用) ...
《javascript高级程序设计》第五章知识点总结
第五章知识点总结 1.object类型访问对象的方法:①点表示法 (people.name) : ②方括号表示法 (people[name]). 常用方法:h ...