jQuey基础思维导图梳理1

发布时间:2020-06-04 16:14:11 作者:dylan的账号
来源:网络 阅读:366

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整合

javaScript和jquery区别

事件(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,直接写名称即可

jQuery的选择器

基本选择器:★

层级选择器:★

属性选择器★


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

基本过滤: ★

表单对象属性★

jQuery的DOM操作

操作HTML代码/文本/值 ★

文档处理

内部插入:  作为子标签插入
外部插入: 作为兄弟标签插入
删除:

属性

class操作
css样式

案例:

案例1-表格隔行换色


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

案例2-全选和全不选


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

案例3-QQ表情添加


推荐阅读:
  1. html_1基础
  2. jQuery思维导图梳理2

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery ue j

上一篇:如何在linux CentOS中安装Percona Server

下一篇:yum安装报错“Error: xz compression not available”

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》