目录

  1. JavaScript框架种类及其优缺点
  2. jQuery库
  3. 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");
  1. 类CSS选择器
  2. 过滤选择器

基本选择器

#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\\]");

内容过滤选择器

  1. :contains(text)
  2. :empty
  3. :has(selector)
  4. :parent

选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的结果。

要求

  1. 选择器
  2. 基本选择器
  3. 层次选择器
  4. 过滤选择器
  5. 表单选择器

技能

（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

  1. visible可见的
  2. hidden不可见的

JavaScript改变样式

  1. 使用style属性
  2. 使用className属性

结语

jQuery基础与JavaScript与CSS交互-第五章的更多相关文章

  1. [书籍翻译] 《JavaScript并发编程》第五章 使用Web Workers

    本文是我翻译<JavaScript Concurrency>书籍的第五章 使用Web Workers,该书主要以Promises.Generator.Web workers等技术来讲解Ja ...

  2. 5种JavaScript和CSS交互的方法

      分享   分享   分享   分享   分享   随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需 ...

  3. 5种你未必知道的JavaScript和CSS交互的方法

    随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css ...

  4. JavaScript高级程序设计：第五章

    引用类型 一.object类型: 创建object实例的方式有两种.第一种是使用new操作符后跟Object构造函数,如下所示: var  person = new  Object(): person ...

  5. 《JAVASCRIPT高级程序设计》第五章(1)

    引用类型是一种将数据和功能组合到一起的数据结构,它与类相似,但是是不同的概念:ECMAScript虽然是一门面向对象的语言,但它不具备传统的面向对象语言所支持的类和结构等基本结构.引用类型也被称为“对 ...

  6. javascript面向对象精要第五章继承整理精要

    javascript中使用原型链支持继承,当一个对象的[prototype]设置为另一个对象时, 就在这两个对象之间创建了一条原型对象链.如果要创建一个继承自其它对象的对象, 使用Object.cre ...

  7. 《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 操作方法 ...

  8. HTML与CSS入门——第五章 使用文本块和列表

    知识点: 1.在页面上对齐文本的方法 2.三种HTML列表的使用方法 3.在列表中放置列表的方法 5.1 在页面上对齐文本: 父元素内子元素文本的居中:在控制父元素的text-align:center ...

  9. 《JAVASCRIPT高级程序设计》第五章(2)

    一.Date类型 Date类型类型用于保存日期,有以下几种创建方式: //获取当前时间 var now = new Date(); //获取当前时间的毫秒数 var nowSecond = Date. ...

随机推荐

  1. maven项目发布到tomcat的错误

    Could not publish to the server. java.lang.IndexOutOfBoundsException "Updating status for Tomca ...

  2. 使用jQuery+huandlebars循环遍历中使用索引

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...

  3. python 关于文件的操作

    1.打开文件: f=open(r'E:\PythonProjects\test7\a.txt',mode='rt',encoding='utf-8') 以上三个单引号内分别表示:要打开的文件的路径,m ...

  4. java处理url中的特殊字符%等

    java处理url中的特殊字符(如&,%...) URL(Uniform Resoure Locator,统一资源定位器)是Internet中对资源进行统一定位和管理的标志.一个完整的URL包 ...

  5. eosjs

    [eosjs] Javascript API,用于帮助访问与 EOSIO RPC API. 1.安装 npm install eosjs@beta 2.Signature Provider The S ...

  6. java学习笔记（四）：import语法

    Import 语法是给编译器寻找特定类的适当位置的一种方法. 创建一个Employee 类,包括四个实体变量姓名(name),年龄(age),职位(designation)和薪水(salary). p ...

  7. 解决find命令报错： paths must precede expression

    eg: find . -name *.c -or -name *.cpp 需要将模糊搜索词用引号括起来: find . -name "*.c" -or -name "*. ...

  8. 远程连接ORACLE服务

    远程服务端操作系统: Windows Server 2003 Enterprise Edition sp2ORACLE 版本: Oracle 9.2.0.1.0 正式版 本地客户端操作系统: Wind ...

  9. Python练习-循环及切片-2018.11.27

    #直接用while循环去除.ad l=['xuyutao.ad','wangjun.ad','liuchao.ad','liuyan1.ad'] n=0 L=[] while n < 4: A= ...

  10. thinkphp5中使用excel导出数据表格（包涵图片）

    首先使用composer require phpoffice/phpexcel下载安装phpexcel包. 将包放入extend下面. 不附加图片的导出 /** * 导出excel(不带图片) * @ ...