web前端--JQuery(day4)

今日任务

使用JQuery完成页面定时弹出广告

定时器:

setInterval     clearInterval

setTimeout    clearTimeout

显示: img.style.display = “block”

隐藏: img.style.display = “none”

img 对象

style属性:  style对象

使用JQuery完成表格的隔行换色

获得所有的行

table.rows[]

修改行的颜色

row.bgColor ="red"

row.style.backgroundColor = "black"

row.style.background = "red"

"background-color:red"

"background:red"

使用JQuery完成复选框的全选效果

checked属性

如何获取所有复选框:

document.getElementsByName   get Elements  By Name  数据库里面

使用JQuery完成省市联动效果

JS中的数组:  ["城市"]

new Array()

DOM树操作:

    创建节点:  document.createElement

    创建文本节点: document.createTextNode

    添加节点:  appendChild

使用JQuery完成下列列表左右选择

select下拉列表

multiple 允许多选

ondblclick : 双击事件

for循环遍历,一边遍历一边移除出现的问题

使用JQuery完成表单的校验(扩展)

事件:

获得焦点事件: onfocus

失去焦点事件: onblur

按键抬起事件: onkeyup

鼠标移入:  onmouseenter

鼠标移出: onmouseout

JS引入外部文件 : script 

今日目标：

掌握JQuery的基本使用

掌握JQuery的基本选择器,层次选择器

会使用JQuery完成DOM的基本操作

1. 使用JQuery完成页面定时弹出广告

1.1 需求分析：

当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告

1.2 技术分析

定时器: setTimeout

显示和隐藏: style.display = “block/none”

什么JQuery:

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

JQuery的作用:

1. 写更少的代码,做更多的事情: write Less ,Do more

2. 将我们页面的JS代码和HTML页面代码进行分离

为什么学习JQuery:

提高我们的工作效率

JQ的入门

【JQ中根据ID查找元素】

全都是根据选择器去找的
#ID{}
.类名{}
$("#ID的名称")

【JQ和JS之间的转换】

• JQ对象,只能调用JQ的属性和方法

• JS对象 只能调用JS的属性和方法

  function changeJS(){
  var div = document.getElementById(“div1”);
  // div.innerHTML = “JS成功修改了内容”
  //将JS对象转成JQ对象
  $(div).html(“转成JQ对象来修改内容”)
  }

          $(function(){
              //给按钮绑定事件
              $("#btn2").click(function(){
                  //找到div1
  

  // (“#div1”).html(“JQ方式成功修改了内容”);  
                      //将JQ对象转成JS对象来调用  
                      var (“#div1”).html(“JQ方式成功修改了内容”);                      //将JQ对象转成JS对象来调用                      var div = (“#div1”);  
  //                  var jsDiv = (“#div1”);  //                  var jsDiv = div.get(0);
  var jsDiv = $div[0];
  jsDiv.innerHTML=”jq转成JS对象成功”;
  });
  });

JQ的开发步骤: (将我们页面的JS代码和HTML页面代码进行分离)

1. 导入JQ相关的文件
2.  文档加载完成事件: $(function)  : 页面初始化的操作: 绑定事件, 启动页面定时器
3. 确定相关操作的事件
4. 事件触发函数
5. 函数里面再去操作相关的元素

显示和隐藏 img.style.display

【JQ中的动画效果】

show()
hide()
slideUp
slideDown
fadeIn
fadeOut
animate : 自定义动画

1.3 步骤分析：

1. 导入JQ的文件
2. 编写JQ的文档加载事件
3. 启动定时器 setTimeout(“”,3000);
4. 编写显示广告的函数
5. 在显示广告里面再启动一个定时器
6. 编写隐藏广告的函数

1.4 代码实现

JQuery中的选择器

让我们能够更加精确找到我们要操作的元素

基本选择器

• ID选择器 : #ID的名称
• 类选择器: 以 . 开头 .类名
• 元素选择器: 标签的名称
• 通配符选择器: *
• 选择器,选择器: 选择器1,选择器2

基本选择器的案例

JQ中的层级选择器

• 子元素选择器: 选择器1 > 选择器2
• 后代选择器: 选择器1 儿孙
• 相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟

• 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟