js&jquery

回顾:
js:
 组成部分:
  ECMAScript
  BOM
  DOM
变量声明 var 变量名=初始化值;
数据类型:
  原始类型
   Undefined Null
   String Number Boolean:伪对象
   通过typeof运算符可以判断出属于那种原始类型
    typeof 值|变量
  引用类型
   Boolean Number
   String
    常用属性:length
    常用方法:
     substring
     split
     replace
   Array
    常用属性:length
    注意:
     array长度可以变化
     array可以存放任意值
   Math
   Date
   RegExp 常用方法:test()
    直接量语法:
     /正则表达式/
   全局
    decodeURI 解码
    eval 计算字符串,解析成js代码执行
运算符:
 关系运算符
 等性运算符 ==  ===
语句:
 选择 循环

BOM(浏览器对象模型)
 window:窗口
  常用属性:
   获取其他的四个对象
    window.location....
  常用方法:
   消息框
    alert confirm prompt
   定时器
    setInterval 周期
    setTimeout 延迟
   打开关闭
    open close
 location:定位
  location.href:设置或者获取url
 history:历史
  go()
///
事件和函数
 掌握的事件:
  焦点:
   onfocus
   onblur
  表单事件
   onsubmit
   onchange 改变
  页面或者元素加载
   onload
    最常用的方式:
     window.οnlοad=function(){};
  单击
   onclick
 函数:
  方式1:
   function 函数名(参数列表){
    函数体
   }
  方式2:
   匿名函数
   例如:window.οnlοad=function(){};
  
事件绑定函数:
 方式1:通过元素的事件属性
  <xxx onxxx="函数名(参数)">  若参数为this:是将当前的dom对象传递给了函数
 方式2:派发事件
  dom对象.onxxx=function(){};
///
DOM(文档对象模型)
 就是我们的html代码加载到内存中会形成一棵document树
 节点:
  文档节点 document
  元素节点 element
  属性节点 attribute
  文本节点 text
 获取一个元素节点:通过document获取
  四个
 操作元素的属性
  dom对象.属性
 操作元素的标签体
  dom对象.innerHTML

以前通过js获取对象的时候
 var obj=document.getElementById("id");
 
 funtion getId(id){
  return document.getElementById("id");
 }
 
 $("选择器")===>获取元素
//
js类库:
 对常用的方法和对象进行封装,方便我们使用.
jQuery:
案例1-弹出广告
技术:
 定时器
 jQuery
///
jquery和html的整合
 jquery是单独的js文件
  通过script标签的src属性导入即可
获取一个jquery对象
 $("选择器")  或者 jQuery("选择器")
dom对象和jquery对象之间的转换
 dom对象===>jquery对象 
  $(dom对象)
 jquery对象===>dom对象
  方式1:
   jquery对象[index]
  方式2:
   jquery对象.get(index)
页面加载:
 js:
  window.οnlοad=function(){}//在一个页面中只能使用一次
 jquery 在一个页面中可以使用多次
  方式1:
   $(function(){...})
  方式2:
   $(document).ready(function(){});
派发事件:
 $("选择器").click(function(){...});
 等价于 原生js中
  dom对象.οnclick=function(){....}
 掌握事件:
  focus
  blur
  submit
  change
  click
jquery中效果:
 隐藏或展示
  show(毫秒数) hide(毫秒数)
 滑入或滑出
  slideDown(毫秒数):向下滑入
  slideUp(毫秒数):向上滑出
 淡入或淡出
  fadeIn(int):淡入
  fadeOut(int):淡出
/
案例1-步骤分析
 1.页面加载成功之后$(function(){...}) 开始一个定时器 setTimeout();
 2.编写展示广告方法
  获取div,然后调用效果方法
  设置另一个定时器 隐藏
 3.编写隐藏广告的方法
  获取div,然后调用效果方法

选择器总结:
 基本选择器★
  $("#id值")  $(".class值")  $("标签名") 
  
  了解:$("*")
  理解:获取多个选择器 用逗号隔开
   $("#id值,.class值")
 层次选择器 ★
  a b:a的所有b后代
  a>b:a的所有b孩子
  a+b:a的下一个兄弟(大弟弟)
  a~b:a的所有弟弟
 基本过滤选择器:★
  :frist 第一个
  :last 最后一个
  :odd  索引奇数
  :even 索引偶数
  :eq(index) 指定索引
  :gt(index) >
  :lt(index) <
 内容过滤:
  :has("选择器"):包含指定选择器的元素
 可见过滤:
  :hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
  :visible
 属性过滤器:★
  [属性名]
  [属性名="值"]
 表单过滤:
  :input  所有的表单子标签  input select textarea button
  //input

案例2-隔行换色
技术分析:
 1.页面加载成功
 2.获取所有的奇数行 添加一个css
 3.获取所有的偶数行 添加一个css

属性和css操作总结:
 对属性的操作:
  attr():设置或者获取元素的属性
   方式1:获取
    attr("属性名称")
   方式2:设置一个属性
    attr("属性名称","值");
   方式3:设置多个属性  json
    attr({
     "属性1":"值1",
     "属性2":"值2"
    })
  removeAttr("属性名称"):移除指定属性
 //添加class属性的时候
 // attr("class","值");
 addClass("指定的样式值"); 相当于 attr("class","指定的样式值");
 removeClass("指定的样式值");

 对css操作:操作元素的style属性
  css():获取或者设置css样式
   方式1:获取 
    css("属性名")
   方式2:设置一个属性
    css("属性名","值")
   方式3:设置多个
    css({
     "属性1":"值1",
     "属性2":"值2"
    });
 获取元素的尺寸:
  width()
  height()
/
案例3-全选或者全不选
需求:
 就是将内容中复选框的选中状态和最上面的复选框状态保持一致
步骤分析:
 1.确定事件 复选框的单击事件
 2.函数中
  a.获取该复选框的选中状态  attr(获取不了checked属性)|prop
  b.获取所有的复选框修改他们的状态
注意:
 若jquery版本>1.6 统一使用 prop操作元素的属性
/
/
/
/
案例4-省市联动
步骤分析:
 1.确定事件 省份的下拉选变化的时候  change
 2.编写函数
  a.获取当前省份的value值
  b.通过数组获取该省下的所有市 返回值:数组
  c.遍历数组,拼装成option元素 追加到市下拉选即可
  注意:每次改变的时候初始化市的值.
///
技术:
 遍历数组
  数组.each(function(){});
  $.each(遍历数组,function(){});
  
 注意:
  each的function中可以加两个参数 index和dom
   index是当前遍历的索引值
   dom指代的是当前遍历的dom对象(开发中一般使用this即可)
 //
 设置或者获取value属性
  jquery对象.val():获取
  jquery对象.val("...."):设置
 /
 设置获取获取标签体的内容
  html()
  text()
  
  xxxxx():获取标签体的内容
  xxxxx("....."):设置标签体的内容
   
   设置的区别:
    html:会把字符串解析
    text:只做为普通的字符串
   获取的区别:
    html:获取的html源码
    text:获取只是页面展示的内容
 //
创建一个元素: $("<标签></标签>")
///
文档操作:
 内部插入
  a.append(c):将c插入到a的内部(标签体)后面
  a.prepend(c):将c插入到a的内部的前面
  
  appendTo
  prependTo
 外部插入
  a.after(c):将c放到a的后面
  a.before(c):将c放到a的前面
  
  a.insertAfter(c)
  a.insertBefore(c)
 删除
  empty() 清空元素
  remove() 删除元素
/
/
/
案例5-左右移动
步骤分析:
 1.确定事件 单击事件
 2.编写函数:
  移动一个:
   右边的下拉选追加一个 左边的选中的第一个
  移动多个:
   左边选中的 追加到右边的下拉选中
  移动全部:
   将左边的所有option追加到右边的下拉选中
  
技术分析:
 表单对象属性过滤选择器
  :enabled   可用的
  :disabled  不可用
  :checked  选中的(针对于单选框和复选框的)
  :selected  选中的(针对于下拉选)

///

///
///
上午回顾:
js类库:
 对常见的方法和对象进行了封装,方便开发.
jquery和html的整合
 script标签的src属性导入即可
获取jquery对象
 $("选择器")  jQuery("选择器")
dom对象和jquery对象之间的转换
 dom>>>jquery 
  $(dom对象)
 jquery>>>dom
  方式1:
   jquery对象[index]
  方式2:
   jquery对象.get(index)
jquery中的选择器:
 基本选择器★
  $("#id值") $(".class值") $("标签名")  $("#one,#two,.mini")
 层次选择器★
  a b:后代
  a>b:孩子
  a+b:大弟弟
  a~b:弟弟们
  
 基本过滤选择器
  :frist :last
  :odd :even
  :eq(index) :gt|lt..
 内容过滤
  :has(选择器)
 可见性过滤
  :visible
  :hidden 指代是 input type=hidden  和 display:none
 表单的过滤
  :input
 属性选择器:
  [属性]
  [属性=值]
 表单对象属性过滤选择器
  :enabled   可用的
  :disabled  不可用
  :checked  选中的(针对于单选框和复选框的)
  ★:selected  选中的(针对于下拉选)
 
///
派发事件:
  jquery对象.事件(function(){.....});
  例如:
   $("#btn1").click(function(){.....});
/
页面加载成功
 $(function(){
  ......
 })
 
 $(document).ready(function(){
  
 });
///
属性和css
 attr():设置或者获取属性(1.6版本之前)
  attr("属性名"):获取
  attr("属性名","值"):设置一个  
  attr({
   "属性名":"值",
   "属性名":"值"
  })
  
 prop():和attr用法一致(1.6版本之后)
 
 (了解)addClass("存在的样式")
 
 removeAttr()
 (了解)removeClass()
 
 css():设置获取获取元素的样式
  css("属性"):获取
  css("属性","值"):设置
  css({
   "":"",
   "":"",
   "":""
  }):设置多个
 
 width()
 height()
/
 文档处理:
  内部插入(2组方法 任意掌握一组)
  外部插入(2组方法 任意掌握一组)
  删除(empty remove)
//
val html text
  val :设置或者获取values属性
  html:获取或者设置标签体内容

遍历数组
 方式1:
  jquery对象.each(function(){});
 方式1:
  $.each(jquery对象,function(){});
/
在jquery中创建元素
 $("<标签名>").prop(属性).html(内容)