189 8069 5689

jQuey基础思维导图梳理1

jQuey基础思维导图梳理1

多端合一成都响应式网站建设公司:PC+平板+手机,同一后台修改数据多端同步更新提交您的需求,获取网站建设与营销策划方案报价,我们会在1小时内与您联系!

jQuery具体内容：

ECMAScript: 核心语法

变量声明

数据类型:

原始类型: Null String Number Boolean Undefined

引用类型:

运算符:

语句:

函数:

普通函数

匿名函数

事件:

onload

onsubmit

onclick

onchange

onblur

onfocus

事件和事件源绑定:

绑定事件:

直接在事件源(标签)上添加事件属性

派发事件:


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:

    ==语法==


    $("选择器") 或  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: 绑定事件

方式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表情添加


分享标题：jQuey基础思维导图梳理1
网页路径：http://cdxtjz.com/article/igdcoc.html

其他资讯