jQuey基础思维导图梳理1

jQuery具体内容：

ECMAScript: 核心语法

变量声明

数据类型:

原始类型: Null String Number Boolean Undefined

引用类型:

运算符:

语句:

函数:

普通函数

匿名函数

事件:

onload

onsubmit

onclick

onchange

onblur

onfocus

事件和事件源绑定:

绑定事件:

直接在事件源(标签)上添加事件属性 <xxx onclick="函数()"></xxx>

派发事件:

<script>
 //1.获取事件源对象
 //2.派发事件
    对象.事件名 = function(){
    
    }
</script>

BOM: 操作和控制浏览器

window: 窗口对象

使用该对象的方法或属性时,window关键字可以省略不写

方法:

alter()

prompt()

confirm()

定时器:

setInterval(函数名,毫秒值);

setTimeout("函数名()",毫秒值);

history: 历史对象

go(1)

location: 连接对象

location.href : 获取当前页面的完整路径

location.href = 值; 跳转到指定的页面

DOM: 操作和控制整个html页面

文档节点: 整个html页面 document

元素节点: 具体的标签对象

属性节点: 标签上的指定属性

文本节点: 标签体的文本信息

获取元素对象:

document.getElementById("id");

.....

获取元素对象上的属性:

元素对象.属性名;  获取

元素对象.属性名 = 值; 设置

文本:

元素对象.innerHTML; //获取标签体的所有内容(包含子标签)

元素对象.innerText; // 获取标签体中的所有文本信息(不包含子标签)

元素对象.innerHTML = "值" ; //在设置值时,可以解析值中的标签对象

元素对象.innerText = "值"; //在设置值时,将值都充当文本信息,放入标签体内

概述

jQuery是一个优秀的javascript框架(js类库)，兼容css3和各大浏览器，提供dom，events，animate，ajax等简易的操作。并且jQuery有非常丰富的插件，大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more. (写的更少,做的更多)

jq本质上就是一个外部的js文件(jQuery.js),在该文件中封装了很多js代码,实现了很多功能.

我们管jq文件叫做 js 框架或 js 类库.

插件: 实现了指定功能的js代码

jQuery入门

jQuery和html整合

• 下载

• 下载地址:www.jquery.com

• jQuery 2.0 以后不再支持ie 6 7 8.

• 使用script的src属性即可eg:<script src="jquery-x.x.x.js"></script>

  ==语法==

  
  $("选择器") 或  jQuery("选择器")
   var  元素对象  = $("选择器");
    eg: var 元素对象 = $("#id值"); 
     元素对象.val();  // 获取当前对象上value属性的值
   需求: 获取输入框的value属性的值
    js方式:
    jQuery方式:

javaScript和jquery区别

• 注意事项: 使用jquery的方式获取的对象称为jquery对象,

  jQuery对象本质上是js对象数组.

  使用dom的方式获取的对象称为dom(js)对象, 两者的方法和属性不能混用, 使用jquery的方法和属性时,必须保证对象是jquery对象.

• js对象和jquery对象之间的转换

• 方式1:jQuery对象[index]

• 方式2:jQuery对象.get(index)

• $(js对象);

• jQuery(js对象);

• js对象  →  jquery对象

• jquery对象  →   js对象 (jQuery对象本质上是js对象数组.)

事件(event)

回顾:

js的事件:

onload: 页面加载事件

onclick: 单击事件

onsubmit: 表单提交事件

onblur: 失去焦点

onfocus: 获取焦点

onchange: 改变事件

鼠标事件和键盘事件要求见到认识.

onkeyup:

js的事件和事件源绑定:

方式1: 绑定事件

<xxx onclick="fun()"></xxx>

方式2:派发事件

在js代码中获取事件源对象

var 元素对象 = document.getElementById("id");

  元素对象.事件名称 = function(){}

在js的事件中,事件前加on,在jq的事件中没有on,直接写名称即可

• 页面加载成功事件

• 格式1:$(document).ready(function(){});

• 格式2:$(function(){});

• 注意:在同一个页面内,jquery的页面加载成功事件可以出现多次,随机执行(jQuery3.0以后),js的页面加载成功事件能出现多次,但只有最后一个生效

• 2.0以前,先执行jq的页面加载成功事件(有序执行的)

• 重点事件

• click(fun())

• change(fun())

• submit(fun())

• focus(fun())

• blur(fun())

• jquery事件和事件源的绑定

  如果你想将jq代码写在head标签中,那么要保证页面加载成功后,才能使用jq的事件

• jquery对象.事件名称(function(){});

jQuery的选择器

基本选择器:★

• * 所有

• # id

• .class

• 标签选择器(标签名)

• 多个选择器用","号隔开   a,b

层级选择器:★

• a b:选择a的b的后代

• a>b:选择a的b孩子

• a+b:选择a的b大弟弟

• a~b:选择a的所有的b弟弟

属性选择器★

// [属性名] 获取元素上带有该属性名的元素对象
// [属性名='值'] 获取元素上带有该属性名且值为'zhi'的元素对象
属性选择器使用时一般都有和标签选择器联合使用
 div[属性名='值']

基本过滤: ★

• :first 第一个

• :last  最后一个

• :even 偶数

• :odd 奇数

• :eq(index) 索引=

• :gt(index) 索引>

• :lt(index) 索引<

• :not(选择器)

表单对象属性★

• :enabled    可用的

• :disabled          不可用的

• :checked           选中的(针对的是单选框和复选框)

• :selected          选中的(下拉选)

jQuery的DOM操作

操作HTML代码/文本/值 ★

• val() : 对value属性的操作

• jq对象.val();       获取value属性的值

• jq对象.val("值");       设置value属性的值

• html() : 对标签体的操作  (等同于js的innerHTML属性)

• jq对象.html();      获取标签体的内容

• jq对象.html("值");     设置标签体的内容

• text() : 对标签体的操作  (等同于js的innerText属性)

• jq对象.text();       获取标签体的内容

• jq对象.text("值");     设置标签体的内容

• html和text区别设置内容: html可以将内容解析,text只是作为普通文本获取内容:html获取所有源码内容,text只是获取文本内容

文档处理

内部插入:  作为子标签插入

• append a.append(c)     将c插入到a的内部的后面

• prepend        a.prepend(c)    将c插入到a的内部的前面

外部插入: 作为兄弟标签插入

• after     a.after(c)         将c插入到a的后面

• before                a.before(c)         将c插入到a的前面

删除:

• empty():清空元素 (清空所有的子标签)

• remove():移除 (自杀)

属性

• attr():设置或者获取元素的属性

• 格式1:设置单个属性jq对象.attr("属性名","值");

• 格式2:设置多个属性jq对象.attr({ "属性":"值", "属性1":"值1"});

• 设置属性(给标签添加属性)

• 获取属性的值 jq对象.attr("属性名");

• 移除属性(删除属性) jq对象.removeAttr("属性名");

• prop():使用方式和attr一样,优先使用attr方法,若attr方法不能用,换prop方法(版本升级后的产物)checked 和 selected 使用prop获取

class操作

• 元素.addClass("属性值");添加class属性

• 元素.removeClass():移除指定的样式

• 元素.toggleClass("属性值"): 有class属性就删除,没有class属性就添加.

css样式

• css

• 格式1:设置单个属性jq对象.css("属性","值");

• 格式2:设置多个属性jq对象.css({ "属性":"值", "属性1":"值1"});

• 设置css样式

• 获取css样式的值 jq对象.css("属性名称");

• 获取元素的宽和高

• jq对象.width()

• jq对象.height()

案例:

案例1-表格隔行换色

需求分析:
 当页面加载成功后,给表格的奇数行和偶数行添加不同的背景颜色,表头除外.
技术分析:
 jQuery:
  页面加载成功事件:
   $(function(){})
   $(document).ready(function(){});
  选择器: 
  css样式: css方法
 步骤分析:
 ....

案例2-全选和全不选

需求分析:
 当点击头部的复选框时,让其他的复选框的状态和头部复选框状态保持一致.
技术分析:
 jQuery
  单击事件: click
   获取checked属性的值
   获取其他复选框并设置值
步骤分析:
 //1.给头部复选框添加点击事件
 //2.获取头部复选框的状态
 //3.获取其他复选框,并设置状态

案例3-QQ表情添加