js&JQuery

2017-09-15 本文已影响24人 chcvn

内容回顾

JS开发步骤
- 确定事件（onclick鼠标点击事件，onsubmit表单的提交事件，onload页面加载完成事件）
- 定义函数实现功能
- 获取标签的控制权, 修改标签样式和属性
BOM(Broswer Object Model,浏览器对象模型)
- window: 浏览器中的窗口
  特点：API调用不需要书写window
  三个框：警告框alert(), 确认框confirm() , 对话框prompt()
  五个函数：
  setInterval(“函数调用”,ms) 周期性的计时器
  setTimeout(“函数调用”,ms) 一次性的计时器
  对应上面两个函数的清除函数
  clearInterval(ID)
  clearTimeout(ID)
  open() 打开新的窗口访问地址
- location: 浏览器的地址栏
  属性：href 改变浏览器地址栏的值
  location.href = "URL"
- history: 浏览器历史记录
- screen: 浏览器显示的屏幕
- navigator: 浏览器的信息
JS常用事件
== onclick 点击事件 ==
==ondblclick双击事件==
==onload 页面加载==
==onsubmit 表单提交事件==
==onchange 下拉列表改变==
==onfocus 获得焦点==
==onblur 失去焦点==
JS的DOM模型
DOM：Document Object Model：文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
==document对象：表示文档在内存中的树状图==
==Element 对象：表示所有的标签==
==Attribute对象：标签中的所有的属性==
常用的API:
- 获得元素
  document.getElementById() 通过ID获得标签
  document.getElementsByName() 通过name属性获得一组标签
  document.getElementsByTagName() 通过标签名称获得一组标签
- 创建元素
  document.createElement(名字)
  document.createTextNode(文字)
- 添加元素
  父标签.appendChild(子标签)
  element.insertBefore(新标签,之前的标签) 某个标签前添加新标签
- 删除元素
  父标签.removeChild(子标签)
内置对象
数组定义
var arr = new Array(length)
var arr = [];
arr = [1,2,3,”aaaa”];
==特点：js数组长度可变并且类型不固定==
String 类似Java

全局函数
parseInt("") 将字符串转换成整数
parseFloat("") 将字符串转换成数字
eval("JS代码"); 执行JS代码

今日重点

jQuery的作用:对于JS的封装，实现动态效果
==jQuery对象与JS对象相互转换==
==jQuery的选择器==
==jQuery对文档的操作==
==jQuery对元素的循环遍历==

要求：

01- 案例一：使用JQ定时弹出广告：需求和JQ的概述

什么是jQuery？
是JS的框架，集成封装了JS的功能模块，快速的实现网页的交互
怎么查询Jquery的文档？
jQuery1.11.0_20140330.chm

02- 案例一：使用JQ定时弹出广告：JQ的入门及JS对象和JQ对象的转换

怎么使用jQuery?
- 引入jQuery的包（后缀名.js）<script src="../../js/jquery-1.11.3.min.js"></script>
- 使用JQ对象
  表示当页面加载完成之后执行代码：
  $(function(){ JQ语句 })
  功能类似
  window.onload=function(){ }
JS对象与JQ对象相互转换
- JS对象转换成JQ对象
```
  // JS对象
  var  ele = document.getElementById(id);
   // JQuery对象
   $(ele);
```
- JQ对象转换成js对象
  $() 获得的对象都是JQ对象
  使用$()[0]或者$().get(0)转换成js对象

03- 案例一：使用JQ定时弹出广告：JQ的效果函数的概述

JQ中三种显示隐藏的方法：
- show()显示/hide()隐藏
- slideDown()向下滑动/slideUp()向上滑动
- fadeIn()淡入/fadeOut()淡出
使用有四种方式（都类似）：
- Jq对象.fadeOut();
- Jq对象.fadeOut(“slow”); // slow,normal,fast
- Jq对象.fadeOut(毫秒值); // 1000
- Jq对象.fadeOut(毫秒值,function(){});

04- 案例一：使用JQ定时弹出广告：代码实现

创建一个HTML的页面.
在页面中创建一个广告部分的DIV,并且设置DIV是隐藏的.
设置定时操作,5秒钟执行一个显示的方法.
setInterval() 或者setTimeout()设置定时
执行完成后清除clearInterval()或者clearTimeout()
显示：show()/slideDown()/fadeIn()
再设置一个定时,5秒钟执行一个隐藏的方法.
setInterval() 或者setTimeout()设置定时
执行完成后清除clearInterval()或者clearTimeout()
显示：hide()/slideUp()/fadeOut()

05- 案例一：使用JQ定时弹出广告：总结：JQ的选择器-基本选择器

JQ强大的选择器提供操作便利（类比CSS当中的选择器去记忆）

基本选择器
- id选择器: 用法:$("#id")
- 类选择器: 用法:$(".class")
- 元素选择器: 用法:$("div")
- 通配符选择器: 用法:$("*")
- 并列选择器: 用法:$("选择器名称, 选择器名称")

06-案例一：使用JQ定时弹出广告：总结：JQ的选择器-层级选择器

层级选择器
- 后代选择器：使用空格" " 所有后代包含孙子及以下的元素
  $("body div") 选中body中所有的div标签
- 子元素选择器：使用">" 第一层的元素（儿子）
  $("body > div") 选中body中直接包含的div
- 下一个元素: 使用"+" 下一个同辈元素
  $("#three + div") 选中ID为three的标签的后一个div
- 兄弟元素:使用"~" 后面所有的同辈元素
  $("#two ~ div") 选中ID为two的后面所有同一级的DIV

07-案例一：使用JQ定时弹出广告：总结：JQ的选择器基本过滤及内容选择器

基本过滤选择器
- ：first 选中第一个
- ：last选中最后一个
- ：not（选择器）取反
- ：eq(index) 选中下标等于某个
- ：gt(index)选中下标大于某个
- ：lt(index)选中下标小于某个
- ：even选中所有偶数个（下标从0开始）
- ：odd选中所有奇数个（下标从0开始）
内容过滤选择器
- $("div:contains('1')")选中div中内容含有1的div标签

08-案例一：使用JQ定时弹出广告：总结：JQ的选择器-属性选择器

属性选择器
- [attribute] 包含某个属性
- [attribute=value] 包含某个属性且值等于value
- [attribute!=value] 包含某个属性且值不等于value
- [attribute^=value] 包含某个属性且值以value开始
- [attribute$=value] 包含某个属性且值以value结束的
- [attribute*=value] 包含某个属性且值中包含value这个字符
- [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用

09-案例一：使用JQ定时弹出广告：总结：JQ的选择器-表单及表单属性选择器

表单选择器
- :input 包含所有表单元素
- :text
- :password
- :radio
- :checkbox
- :submit
- :image
- :reset
- :button
- :file
- :hidden

$(":text") 表示选中表单type=“text”的所有input表单标签

表单属性选择器
- :enabled
- :disabled
- :checked
- :selected

10-案例二：使用JQ完成表格的隔行换色：需求、分析及代码实现

挑选选择器：$(“tr :odd”)/ $(“tr :even”)
改变标签的样式
改变某一个样式：
JQ对象.css(样式属性，样式值)
改变多个样式组成的class
JQ对象.addClass(Class名称)
移除某个class样式
JQ对象.removeClass(Class名称)

11-案例三：使用JQ完成复选框的全选和全不选：需求和分析

添加属性
attr()/prop()
- 使用方法一：$(“”).prop(“src”);
- 使用方法二：$(“”).prop(“src”,”test.jpg”);
- 使用方法三：$(“”).prop({src:”test.jpg”,width:”100”});
删除属性
removeAttr(属性名)/removeProp(属性名)
设置标签体
html()
设置文本: text()
获得value属性值: val()

12-案例三：使用JQ完成复选框的全选和全不选：代码实现

// 简化：
$("#selectAll").click(function(){
    // this表示当前被选中的对象（也就是全选按钮）
     $(":checkbox[name='ids']").prop("checked",this.checked);
});

13-案例三：使用JQ完成省市联动的效果：需求和JQuery的文档操作

添加元素
- append(); ---在某个元素后添加内容.
- appendTo(); ---将某个元素添加到另一个元素后.
- remove(); ---将某个元素移除.

14-案例三：使用JQ完成省市联动的效果：JQ的元素遍历

遍历元素

// 遍历的方式一：
$.each(objects,function(i,n){

});
// 遍历的方式二:
$(“”).each(function(i,n){
});

注意：i表示下标，n表示对应下标的对象

15-案例三：使用JQ完成省市联动的效果：代码实现

var cities = [
            ["杭州市","绍兴市","温州市","义乌市","嘉兴市"],
            ["南京市","苏州市","扬州市","无锡市"],
            ["武汉市","襄阳市","荆州市","宜昌市","恩施"],
            ["石家庄市","唐山市","保定市","邢台市","廊坊市"],
            ["长春市","吉林市","四平市","延边市"]
        ];
                
var $city = $("#city");
// 获得代表省份的下拉列表:
$("#province").change(function(){
    // alert(this.value);
    // alert($(this).val());
    $city.get(0).options.length = 1;

    var val = this.value;
    // 遍历并且判断:
    $.each(cities,function(i,n){
        // 判断:
        if(i == val){
            $(n).each(function(j,m){
                // alert(j+"   "+m);
                $city.append("<option>"+m+"</option>");
            });
        }
    });
});

今日总结

什么是jQuery, 它有什么作用？怎么使用?
jQuery是一个JS的框架，封装了JS的操作（加强版的JS）
优势：它提供了快速查询DOM文档中元素的能力，大大强化了JS中获取页面元素的方式。
作用：实现漂亮的页面动态效果, jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，比如淡入淡出、元素移除等动态特效。
- 引入JQ的包（xxx.js）
- 书写JQ代码
```
$(function(){
    JQ代码
})
```
==JS与JQ的相互转换==
- 将JS转换成JQ对象
  $(js对象)
- 将JQ对象转换成JS对象
  JQ对象.get(0)/JQ对象[0]
JQ对象调用API返回的永远是JQ对象
==JQ选择器==
- ==基本选择器==
  - ID选择器 $(“#ID”)
  - CLASS选择器 $(“.class”)
  - 元素选择器 $(“元素名称”)
  - 通配符选择器 $(“*”)
  - 并列选择器 $(“selector1,selector2……”)
- ==层级选择器==
  - 兄弟选择器 $(“selector + selector”) 选择同辈的下一个元素
  - 选择同辈中往后所有的元素：$(“selector ~ selector”)
  - 子元素选择器：$(父选择器 > 子选择器)
  - 后代选择器：$(父选择器子选择器)
- 基本过滤选择器
  - ：first 选择第一个
  - ：last 选择最后一个
  - ：eq(index) 选择下标为index的元素
  - ：odd/:even 注意：下标从0开始
- 属性选择器
  $(“input[属性名=’属性值’]”)
- 表单选择器(了解)
  ：input
  :text/:password/:radio/:checkbox……
JQ对文档的操作(DOM的crud)
JQ.append() 追加元素
JQ.appendTo(父元素) 将元素追加到父元素
JQ.remove() 删除元素

元素循环遍历

// 方式一
$.each(数组,function(i,n){
    i表示下标
    n表示数组元素
});
// 方式二
$(数组).each(function(i,n){
    i表示下标
    n表示数组元素
});

image.png

js&JQuery

内容回顾

今日重点

01- 案例一：使用JQ定时弹出广告：需求和JQ的概述

02- 案例一：使用JQ定时弹出广告：JQ的入门及JS对象和JQ对象的转换

03- 案例一：使用JQ定时弹出广告：JQ的效果函数的概述

04- 案例一：使用JQ定时弹出广告：代码实现

05- 案例一：使用JQ定时弹出广告：总结：JQ的选择器-基本选择器

06-案例一：使用JQ定时弹出广告：总结：JQ的选择器-层级选择器

07-案例一：使用JQ定时弹出广告：总结：JQ的选择器基本过滤及内容选择器

08-案例一：使用JQ定时弹出广告：总结：JQ的选择器-属性选择器

09-案例一：使用JQ定时弹出广告：总结：JQ的选择器-表单及表单属性选择器

10-案例二：使用JQ完成表格的隔行换色：需求、分析及代码实现

11-案例三：使用JQ完成复选框的全选和全不选：需求和分析

12-案例三：使用JQ完成复选框的全选和全不选：代码实现

13-案例三：使用JQ完成省市联动的效果：需求和JQuery的文档操作

14-案例三：使用JQ完成省市联动的效果：JQ的元素遍历

15-案例三：使用JQ完成省市联动的效果：代码实现

今日总结

猜你喜欢

热点阅读