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

RIA技术

常见的RIA技术

Ajax

Sliverlight

Flex

什么是框架？

框架是程序员将一个又一个功能进行封装，供其他人使用的程序组件，了解为模板而已。我们使用框架是为了简化开发进程。

jQuery库文件

导入：

复制代码

jquery-1.版本号.js（开发版）和 jquery-1.版本号.min.js（发布版）

第一个jQuery程序

复制代码

$(document).ready()是整个运行的核心。

练习

复制代码

jQuery选择器

$("h2").css("background","#08F");复制代码

类CSS选择器

过滤选择器

基本选择器

#id $(‘#test’) id为test.class $(“.test”) class为testelement $(‘p’) 所有的* $(‘*’)选取所有的元素复制代码

层次选择器

$(‘div span’)：选取
    
     里所有的
     元素$(‘div > span’)：选取
      
       下元素名是
       的子元素$(‘.one + div’)：class为one的下一个
        
         元素$(‘#two ~ div’)：id为two的元素后面的所有
         
          兄弟元素复制代码

过滤选择器

语法特点是使用“:”

分类如下：

基本过滤选择器

属性过滤选择器

子元素过滤选择器

可见性过滤选择器

内容过滤选择器

表单对象属性过滤选择器

$(" li:first" )：选取所有

元素中的第一个

元素

$(" li:last" )：选取所有

元素中的最后一个

元素

$(" li:even" )：选取索引为偶数的所有

元素

$(" li:odd" )：选取索引为奇数的所有

元素

$(" li:not(.three)" )：选取class不是three的元素

$(":header" )：选取网页中所有标题元素

$(":focus" )：选取当前获取焦点的元素

$("li:eq(1)" )：选取索引等于1的

元素，eq-gt-lt，gt为大于，lt为小于。

特殊符号的转义


    
     a
    
$("#id\\#a");
    
     b
    
$("#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()方法

代码：

基本过滤选择器用户交互设计学习参考书
     
     JavaScript DOM编程
 
     锋利的JQuery
 
     JQuery入门与提高
 
     JavaScript高级编程
 
     JQuery权威指南
 
     JQuery实战
    
复制代码

代码：

可见性过滤选择器

萝莉是什么意思？

萝莉是洛丽塔的缩写。“洛丽塔”原指1955年由俄裔美国作家的小说《洛丽塔》，或指小说中的女主角12岁的洛丽塔，后在日本引申发展成一种次文化，用来表示小女孩，或用在与其相关的事物，例如罗莉塔时装。第一个被世人公认的萝莉角色是1982年推出的《甜甜仙子》里的主角Momo公主。第一代萝莉萌王是《魔卡少女樱》里的主角木之本樱。

复制代码

效果展示

“ul li:odd”选择列表ul中奇数项，用css()方法，设置背影判断class为tips，调用show()方法显示，调用hide()方法隐藏

基本过滤选择器
    
     用户交互设计学习参考书
	
     		
      JavaScript DOM编程
		
      锋利的JQuery
		
      JQuery入门与提高
		
      JavaScript高级编程
		
      JQuery权威指南
		
      JQuery实战
	
     
    
	复制代码

复制代码

JavaScript与CSS交互

Style属性

document.getElementById("title").style.color="#f00f00";复制代码

常用事件

onclick单击onmouseover鼠标移到某元素之上onmouseout鼠标移开onmousedown鼠标被按下复制代码

visibility

visible可见的

hidden不可见的

JavaScript改变样式

使用style属性

使用className属性

结语

小礼物走一走 or 点赞

目录