三者之间的关系

  • 结构（html）:对网页元素进行整理和分类

  • 表现（css）：网页版式、颜色、大小等外观

  • 行为（js）：网页模型的定义及交互的编写

HTML语法

标签分为单标签和双标签

  • <关键词> ==标签

  • <关键词></关键词>

    • 结尾通常加/

    • 一对标签出现称为双标记（标签）

  • <关键词/>

    • 单标签（特殊）

结构关系：包含关系并列关系

  • 包含关系：

    • html---head、html---body、head---title

    • <body>

      <a></a>

      </body>

  • 并列关系：

    • head---body

    • <tr></tr>

HTML根标签（起始点）

  • 包含：head、body

CSS简介

  • 是叠层样式的简称，一般也称为CSS样式或级联样式表

  • 主要用于设置HTML页面中文本内容

  • 可以让网页更加丰富

CSS语法规范

  • 由选择器和一个或多个声明组成

  • 选择器是用于指定CSS样式的HTML标签

  • 属性和属性值以“键值对”的形式出现

CSS基础选择器

  • 选择器的作用

    • 找到HTML中的标签

    • 设置标签的样式

选择器分类

  • 基础选择器

    • 由单个选择器组成

    • 包括：标签选择器、类选择器、id选择器和通配符选择器

  • 复合选择器

标签选择器

  • 以HTML标签名称作为选择器，按标签分类

  • 作用：将某一类标签全部选择出来

  • 优点：能快速为页面中的同类型标签设置样式

  • 缺点：不能设置差异化样式，只能选择全部的当前标签

类选择器

  • 单独或某几个标签，可以选择类选择器

CSS三大特性

层叠性

  • 主要解决样式冲突

  • 遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

  • 样式不冲突，不会层叠

继承性

  • 子标签会继承父标签的某些样式

  • 简化代码，将复杂性减低

  • 子元素可以继承父元素的样式

JavaScript

  • 是一门轻量级、弱类型、面向对象的解释型脚本语言

JS的作用

  • JS用于控制HTML元素的行为

    • 可以在页面中动态嵌入HTML元素

    • 可以操作浏览器

    • 与用户进行数据交互

      ......

JS写在哪里

写在某个标签的事件中

写在<script></script>标签中

将js写到一个独立的.js文件中，再通过<script>标签导入

JS中的输出语句

  • 弹出警告框

    alert("hello");

  • 控制台输出

    console.log("hello")

  • 页面中输出

    document.write("hello");

JS中的注解

//单行注释
/*多行注释*/

JS的组成

ECMAScript

  • 简称ES，是JS的前身，也是JS的标准

  • 其中要学习JS的核心语法，如数据类型、定义变量、控制语句等

BOM

  • 浏览器对象模型，可以通过js的BOM控制浏览器的行为。

DOM

  • 文档对象模型，这里的文档指HTML页面。

  • 可以通过js的DOM控制页面中的元素。

ECMAScript

数据类型

基本类型和引用类型。

由于JS是弱类型语言，定义变量时不需要指定数据类型，所以这些类型作为了解既可

基本类型

基本类型 说明
数值型number 整数、小数都称为数值型
字符串string 用引号引起来的都是字符串
布尔型boolean true/false
空null 某个引用类型变量通过null设置为空
未定义undefined 当某个变量没有声明或没有值时

引用类型

数组、对象、函数等都是引用类型

JS中定义变量

var 变量名;
//或
let 变量名;
​
var stu_name,age;
let sex;

JS中标识符的命名规则

标识符：变量名、方法名、类名统称为标识符

  • 由字母、数字、下划线和$符号组成

  • 不能以数字开头

  • 不能使用JS中的关键字

  • 命名时尽量使用单词或拼音，达到"见名知意"

变量的初始化

与java不同的是，JS中给某个变量赋什么值，它就是什么类型。

//先定义后赋值
var name;
name="小米";
//定义的同时赋值
var age=20,sex="男";

运算符

JS中的true可以用1表示，false可以用0表示。

算术运算符

//+ - * / %
​
var a = 5,b = 3.2;
//+两端都是数值当做相加，有一端为字符串当做拼接
console.log(a + b);//8.2(number)
console.log("" + a + b);//53.2
console.log(a + b + "");//8.2(string)
console.log("xxx" + (a + b) + "xxx");xxx8.2xxx
// - * / % 必须是两个数值之间进行运算，如果有非数字参与运算，结果为NaN
//"2"可以参与运算，"b"不可以
//除+外，字符串类型的数字可以运算
console.log(a / "a"); //NaN  not a number
console.log("5"/ "2");//2.5
// 除法正常显示结果
console.log(5 / 2);//2.5
// a%b  a<b  结果为a
console.log(4 % 7);//4

关系运算符

//> < >= <= == !=  === !==
​
//> < >= <=用法同java
//js中的==表示判断两个数据字面量是否相同，不会比较数据类型
console.log("123" == 123);//true
//js中的===和!==表示判断两个数据的数据类型和字面量是否相同
console.log("123" === 123);//false
console.log("123" === "123");//true
console.log("123" !== 123);//true

逻辑运算符

//&& || !
//用法同java
//&&如果有一个为false,结果就为false,只有都为true,结果才为true。
//||如果有一个为true,结果就为true,只有都为false,结果才为false。
//!将原结果取反

赋值/复合赋值运算符

//= += -= *= /= %=
//a+=b表示a=a+b;
var a=3,b=4;
//a+=b;
//console.log(a);//7//将符号两端的数据进行运算后，赋值给符号左侧的变量中
//a*=b+c相当于a=a*(b+c)
a*=b+5;//a=3*(4+5)
console.log(a);//27

自增自减运算符

//++ --
//a++表示a=a+1或a+=1
//--a表示a=a-1或a-=1//如果符号在后，先使用后加减
//如果符号在前，先加减后使用
var n = 10;
// n++;
// ++n;
// console.log(++n);//11
// console.log(n);//11
// console.log(n++ + n); //10 + 11
// console.log(++n + n); //11 + 11
console.log(n++ + ++n); //10 + 12
console.log(n-- - --n); //12-10

条件运算符

//表达式一?表达式二:表达式三
//执行表达式一，如果为true,执行表达式二，如果为false，执行表达式三
//相当于双分支if语句if(表达式一){表达式二}else{表达式三}

运算符的优先级

小括号>>>单目运算符(++ -- !)>>>算术运算符>>>关系运算符>>>逻辑运算符>>>条件运算符>>>复合赋值/赋值运算符

流程控制语句

条件语句

  • 单分支if

    if(布尔值){}

  • 双分支

    if(布尔值){}else{}

  • 多分支

    程序从上往下执行，如果有某个if满足条件，则不再判断后续的if

    if(布尔值){}else if(布尔值){}else{}

  • if嵌套

    if(布尔值){if(布尔值){}
}else{if(布尔值){}
}

  • switch

    js中的switch语句的小括号可以判断任意类型的变量，case后数据的类型也可以不同。其它特性同java

    switch(变量){case 可能的情况:break;case 可能的情况:break;case 可能的情况:break;default:没有任何case匹配时break;
}

如果条件能一一例举出来，使用switch语句，语法更为简洁。

如果条件是范围，只能使用if语句。

循环语句

  • while

    while(循环条件){循环体;
}
如果条件不成立则会停止循环。所以while循环有可能一次都不执行。

  • do-while

    do{循环体;
}while(循环条件);
先执行一次后再判断是否循环。所以do-while循环至少执行一次。

  • for

    for(初始化循环变量;循环条件;更新循环变量){循环体;
}

数组

创建方式：1、var a = [1,2,3] 2、var a = new Array() ; a[0] = 1

length 数组的长度

push 向后添加一个元素或者数组

pop 将数组 末尾 去掉并返回一个元素

shift 将数组 头部 去掉并返回一个元素

unshift 向前添加一个元素或者数组

join 将所有数组的元素·通过某个字符进行组合

内置对象

new Date() 过时了

现在建议的事件获取方式：Date.now()

System.currentMillons

DOM

获取元素的方式：

document.querySelector 根据选择器 获取标签

document.querySelectorAll 根据选择器 获取所有标签

document.getElementXXXXX

监听事件

onmousedown up over out move

onkeypress

onclick

设置事件的方式（绑定事件的方式）

1、div.onclick = function(){}

2、div.addEventListener('click',function(){})

设置元素的属性样式

<div style="color:red"></div> 内联样式

color -> style -> div

div.style.color = 字符串属性

<div style="background-color:red"></div>

div.style.background-color 错误=> div.style.backgroundColor 正确

div.style['background-color'] = 字符串属性

<div class="a"></div>

div.class 错误=> div.className 正确

value

1、表单标签中的属性 所以只能用于标签标签

2、不同的type属性标签，那么value的意义的不同

3、既可以用来设置value属性，也可以用来获取value属性 （get set）

输入狂 type = "text" "password" "number"....

value 输入的内容

单/多项框 type = “radio” “check'box”

value 输入的内容就是value中定义的内容

选项框 select + option

value option的标记内容

按钮 type="button"

value 按钮的名称

style.属性

只能设置标签的属性，不能获取标签的属性 （除非该标签定义的是行内样式）

获取属性值的函数 ： document.getComputedStyle(标签对象，属性名称)

函数

函数的定义

常用

function abc(){}

变量的方式

let abc = function(){}

注意点：事件设置

box.onclick = abc
box.onclick = abc() 错误  abc()会提前执行

形参自动接收的数组对象 => 重载

arguments

函数会被浏览器引擎解析， 当HTML结构加载完成，引擎会事先将函数加载至缓存中

（ 函数无论定义在调用前还是后，都可以使用）

对象

对象中也有属性 和 方法

JS中对象就是以键值对的方式组合，用花括号包裹起来的内容

对象调用

student.age => student['age']

对象属性自定义

如果需要在对象中新增一个属性

对象. 属性 = 属性值 （新增了一个属性）

对象 包含了 document.querySelector 中取出的标签对象

因此我们时常可以在标记存入一些具有特殊意义的变量

定时器的使用

1、setInterval（function(){}, duration） 执行函数 和 间隔时间

2、clearInterval

DOM 节点

节点树 （文本、属性、元素）

元素节点树 （元素（标记））

创建标记

createElement(标记名称)

append 父元素末尾添加子元素 （appendChild）

prepend 父元素开头添加子元素

删除标签

remove 将标签本身删除

empty 将标记的内容清空

removeChild 父元素将指定的子元素删除

设置标记属性

对象.属性 = 属性值

对象.setAttribute(属性，属性值)

事件使用

onmouseover

onmouseout

onmousedown

onmouseup

onmousemove

onclick

ondblclick

onchange 针对输入框标记有效

onblur 失去焦点

onfocus 获取焦点

事件event

clientX 当前元素在显示区域中的X坐标位置

clientY 当前元素在显示区域中的Y坐标位置

offsetX 当前元素在具有定位级的父元素中的X坐标位置

offsetY 当前元素在具有定位级的父元素中的Y坐标位置

event 在不同事件中事件中的属性的个数。类别是不同的

onmousemove中 X,Y...

onkeypress 中 key keyCode...

事件绑定

addEventListener（事件名称，函数） 绑定

removeEventListener(事件名称，函数) 解绑

一个事件可以绑定多个函数

一个函数绑定多个事件

组织事件冒泡

 //阻止事件冒泡
event.cancelBubble = true

window

window.document

window.history go(数字) 跳转到对应的缓存页面 forward back ...

window.location reload 重新加载当前网页 replace将网页内容替换

window.open 打开一个新的网页

window.localStorage 本地储存（关闭浏览器消失）

jQuery入门导读

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

jQuery是一个主流的优秀的JavaScript类库，是由John resig在2006年1月创建的。

jQuery库包含核心库、UI、插件和jQuery Mobile等模块。（LayUI）

jQuery凭借着强大的选择器、链式操作以及出色的浏览器兼容性，极大的简化访问和更新HTML页面、DOM操作、事件处理以及执行动画等操作。

“写得少，做的多“

JavaScrit库

jQuery 库包含以下功能：

  • HTML 元素选取 √

  • HTML 元素操作 √

  • CSS 操作 √

  • HTML 事件函数 √

  • JavaScript 特效和动画

  • HTML DOM 遍历和修改 √

  • AJAX √

  • Utilities

jQuery概述

通过封装JS代码的方式简化 操作

jQuery基本使用-文档就绪事件

$(document).ready(function(){//代码内容});

还有更简洁的做法

$(function(){// 开始写 jQuery 代码...});

jQuery顶级对象$

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

  • 美元符号定义 jQuery

  • 选择符（selector）"查询"和"查找" HTML 元素

  • jQuery 的 action() 执行对元素的操作

实例:

  • $(this).hide() - 隐藏当前元素

  • $("p").hide() - 隐藏所有 <p> 元素

  • $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

  • $("#test").hide() - 隐藏 id="test" 的元素

DOM对象和jQuery对象

1、jQuery获取的对象，不能直接使用DOM中的方法

2、JQuery获取的对象加上[] 后可以使用DOM中的内容（包括使用get() 方式）

$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、同一函数实现set和get

$("#msg").html();                      //  返回id 为msg 的元素节点的html 内容。
$("#msg").html("<b>new content</b>");  // 将“<b>new content</b>” 作为html 串写入id 为msg 的元素节点内容中, 页面显示粗体的new content
$("#msg").text();                      //  返回id 为msg 的元素节点的文本内容。
$("#msg").text("<b>new content</b>");  // 将“<b>new content</b>” 作为普通文本串写入id 为msg 的元素节点内容中, 页面显示<b>new content</b>
$("#msg").height();                    // 返回id 为msg 的元素的高度
$("#msg").height("300");             // 将id 为msg 的元素的高度设为300
$("#msg").width();                     // 返回id 为msg 的元素的宽度
$("#msg").width("300");              // 将id 为msg 的元素的宽度设为300
$("input").val(");                       //  返回表单输入框的value 值
$("input").val("test");                 // 将表单输入框的value 值设为test
$("#msg").click();                     //  触发id 为msg 的元素的单击事件
$("#msg").click(fn);                   // 为id 为msg 的元素单击事件添加函数

4、集合处理

使用each 配合函数可以做集合的遍历和处理

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})   // 为索引分别为0 ，1 ，2 的p 元素分别设定不同的字体颜色。
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})   // 实现表格的隔行换色效果
$("p").click(function(){alert($(this).html())})     // 为每个p 元素增加了click 事件，单击某个p 元素则弹出其内容

5、扩展 JQuery对象

$.extend({min: function(a, b){return a < b?a:b; },max: function(a, b){return a > b?a:b; }
});   // 为jquery 扩展了min,max 两个方法

6、链式写法

$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

7、元素操作

$("#msg").css("background");          // 返回元素的背景颜色
$("#msg").css("background","#ccc") // 设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200");      // 设定宽高
$("#msg").css({ color: "red", background: "blue" });// 以名值对的形式设定样式
$("#msg").addClass("select");        // 为元素增加名称为select 的class
$("#msg").removeClass("select");   // 删除元素名称为select 的class
$("#msg").toggleClass("select");    // 如果存在（不存在）就删除（添加）名称为select 的class

jQuery常用AI导读

JQuery中文手册

jQuery基本和层级选择器

基础选择器的使用

复合选择器的使用

jQuery隐式迭代

 let arr = document.querySelectorAll('li')for(let i = 0;i < liArr.length;i++) {arr[i].onclick = function () {console.log('原生循环');}}// 隐式迭代实现$(function () {$('li').on('click',function () {console.log('隐式迭代');})})//可以用无序列表体验一下

jQuery筛选选择器

属性筛选选择器
[att=val] 选取att属性等于val的标记[att] 选择有att属性的标记[att|=val] 选取att中以val开头的属性[att~=val] 选取att中包含val的属性[att^=val] 选取att中以val开头的属性[att*=val] 选取att中包含val的属性[att$=val] 选取att中以val结尾的属性[att!=val] 选取att中不包含val的属性

jQuery筛选方法-选取父子元素

jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，
比如$("span").parent()或者$("span").parent(".class")jQuery.parents(expr),类似于jQuery.parents(expr),
但是是查找所有祖先元素，不限于父元素jQuery.children(expr).返回所有子节点，这个方法只
会返回直接的孩子节点，不会返回所有的子孙节点jQuery对象返回，children()则只会返回节点jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点jQuery.prevAll()，返回所有之前的兄弟节点jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点jQuery.nextAll()，返回所有之后的兄弟节点jQuery.siblings(),返回兄弟姐妹节点，不分前后jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是
从初始的jQuery对象集合中筛选出一部分，而jQuery.find()
的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从p元素开始找,等同于$("p span")

新浪下拉菜单

jQuery其他筛选方法

在jQuery对象数组中，过滤出一部分元素 ：
1)、首先获取ul中所有的li子元素，即会产生一个li数组uls
var uls =$("ul>li");2)、first()：获取数组uls中的第一个元素，即第一个li标签.
ls.first().css({"background":"pink"});3)、last()：获取数组uls中的最后一个元素，即最后一个li标签.
=uls.last().css({"background":"pink"});4)、eq(index):从数组uls中找到下标为2的元素.uls.eq(2).css({"background":"pink"});4.1)、从数组uls中找到倒数第2个元素.uls.eq(-2).css({"background":"yellow"});
5)、filter(selector)：匹配到类名为sa的元素。
uls.filter(".sa").css({"background":"yellow"});5.1)、匹配到有属性title，并且值为a的元素.uls.filter("[title=a]").css({"background":"yellow"});
5.2)、匹配到属性title的值不为a的元素uls.filter("[title!=a]").css({"background":"yellow"});5.3)、匹配到有title属性，且属性值不为a的元素.uls.filter("[title][title!=a]").css({"background":"yellow"});5.4)、从数组uls中过滤出有title属性的元素集合.uls.filter("[title]").css({"background":"blue"});6)、has(selector)：从数组uls中过滤出有<span>标签的元素集合.uls.has("span").css({"background":"blue"});7)、从数组uls中过滤出没有title属性的元素集合.uls.not("[title]").css({"background":"blue"});

jQuery排他思想

1、siblings

    语法：siblings(selector)用法：$(".frist").siblings(“li”)

说明：查找兄弟节点，不包括自身元素

2、排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

16-淘宝服饰精品案例

jQuery链式编程

jQuery修改样式css方法

css() 设置或返回匹配元素的样式属性。
height() 设置或返回匹配元素的高度。
offset() 返回第一个匹配元素相对于文档的位置。
offsetParent() 返回最近的定位祖先元素。
position() 返回第一个匹配元素相对于父元素的位置。
scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。
width() 设置或返回匹配元素的宽度。

jQuery修改样式操作类

  • addClass() - 向被选元素添加一个或多个类

  • removeClass() - 从被选元素删除一个或多个类

  • toggleClass() - 对被选元素进行添加/删除类的切换操作

  • css() - 设置或返回样式属性

tab栏切换案例

jQuery类操作和className区别

jquery 相当于类名的追加

className相当于覆盖

jQuery显示与隐藏效果

show()

hide()

jQuery滑动效果以及事件切换

jQuery停止动画排队stop

jQuery淡入淡出以及突出显示案例

jQuery自定义动画animate方法

王者荣耀手风琴案例布局分析

王者荣耀手风琴案例制作

jQuery属性操作

方法 描述
attr() 设置或返回匹配元素的属性和值。
removeAttr() 从所有匹配的元素中移除指定的属性。

购物车模块-全选（上）

购物车模块-全选（下）

jQuery内容文本值

$("#msg").html();                      //  返回id 为msg 的元素节点的html 内容。
$("#msg").html("<b>new content</b>");  // 将“<b>new content</b>” 作为html 串写入id 为msg 的元素节点内容中, 页面显示粗体的new content
$("#msg").text();                      //  返回id 为msg 的元素节点的文本内容。
$("#msg").text("<b>new content</b>");  // 将“<b>new content</b>” 作为普通文本串写入id 为msg 的元素节点内容中, 页面显示<b>new content</b>
$("input").val(");                       //  返回表单输入框的value 值
$("input").val("test");                 // 将表单输入框的value 值设为test

购物车模块-增减商品数量

购物车模块-修改商品小计

jQuery遍历对象each方法

$('div').each(function(){if($(this).is(':hidden')) return;//跳过隐藏的元素//对可见的元素操作
});

jQuery遍历数据$.each

var myArray = ["apple", "mango", "orange", "grapes", "banana"];
$.each(myArray, function (index, value) {console.log(index+' : '+value);
});

购物车模块-计算总件数和总额

创建、添加、删除元素

创建元素

$("<li></li>"); // 动态创建了一个li标签

内部添加

// 把内容放入到元素的最后面
element.append("内容");
// 把内容放入到元素的最前面
element.prepend("内容");

外部添加

// 把内容放到元素最后面
element.after("内容");
// 把内容放到元素最前面
element.before("内容");

删除元素

// 删除匹配元素本身 自杀
element.remove();
// 删除匹配元素中所有的子节点 也就是删除孩子
element.empty();
// 清空匹配的元素内容 也是删除孩子
element.html("");

购物车模块-清理购物车

购物车模块-选中商品添加背景颜色

jQuery尺寸方法

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

jQuery位置方法

$(".btn1").click(function(){x=$("p").offset();$("#span1").text(x.left);$("#span2").text(x.top);
});

事件方法

方法 描述
bind() 向匹配元素附加一个或更多事件处理器
blur() 触发、或将函数绑定到指定元素的 blur 事件
change() 触发、或将函数绑定到指定元素的 change 事件
click() 触发、或将函数绑定到指定元素的 click 事件
dblclick() 触发、或将函数绑定到指定元素的 double click 事件
delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die() 移除所有通过 live() 函数添加的事件处理程序。
error() 触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
event.pageX 相对于文档左边缘的鼠标位置。
event.pageY 相对于文档上边缘的鼠标位置。
event.preventDefault() 阻止事件的默认动作。
event.result 包含由被指定事件触发的事件处理器返回的最后一个值。
event.target 触发该事件的 DOM 元素。
event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type 描述事件的类型。
event.which 指示按了哪个键或按钮。
focus() 触发、或将函数绑定到指定元素的 focus 事件
keydown() 触发、或将函数绑定到指定元素的 key down 事件
keypress() 触发、或将函数绑定到指定元素的 key press 事件
keyup() 触发、或将函数绑定到指定元素的 key up 事件
live() 为当前或未来的匹配元素添加一个或多个事件处理器
load() 触发、或将函数绑定到指定元素的 load 事件
mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove() 触发、或将函数绑定到指定元素的 mouse move 事件
mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件
mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件
mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件
one() 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready() 文档就绪事件（当 HTML 文档就绪可用时）
resize() 触发、或将函数绑定到指定元素的 resize 事件
scroll() 触发、或将函数绑定到指定元素的 scroll 事件
select() 触发、或将函数绑定到指定元素的 select 事件
submit() 触发、或将函数绑定到指定元素的 submit 事件
toggle() 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger() 所有匹配元素的指定事件
triggerHandler() 第一个被匹配元素的指定事件
unbind() 从匹配元素移除一个被添加的事件处理器
undelegate() 从匹配元素移除一个被添加的事件处理器，现在或将来
unload() 触发、或将函数绑定到指定元素的 unload 事件

事件处理on绑定一个或者多个事件

  • jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法

  • 语法格式：$(selector).on( events [, selector ] [, data ], handler )

  • 参数介绍：

    • 第一个参数：events，事件名

    • 第二个参数：selector,类似delegate

    • 第三个参数: 传递给事件响应方法的参数

    • 第四个参数：handler，事件处理方法

      例如： //绑定一个方法 $( "#dataTable tbody tr" ).on( "click", function() { console.log( $( this ).text() ); }); //给子元素绑定事件 $( "#dataTable tbody" ).on( "click", "tr", function() { console.log( $( this ).text() ); }); //绑定多个事件的方式 $( "div.test" ).on({ click: function() {

      $( this ).toggleClass( "active" );

      }, mouseenter: function() {

      $( this ).addClass( "inside" );

      }, mouseleave: function() {

      $( this ).removeClass( "inside" );

      } });

one绑定一次事件的方式

  • .one( events [, data ], handler )

    例如：

    $( "p" ).one( "click", function() {alert( $( this ).text() );});

    delegate方式（推荐，性能高，支持动态创建的元素）

    • 语法格式：$(selector).delegate( selector, eventType, handler )

    • 语法说明：

      • 第一个参数:selector， 子选择器

      • 第二个参数：事件类型

      • 第三个参数：事件响应方法

        例如：

        $(".parentBox").delegate("p", "click", function(){//为 .parentBox下面的所有的p标签绑定事件});

    *优势：效率较高

off解绑事件

$("button").click(function(){$("p").off("click");
});
$(selector).undelegate(selector,event,function)

jQuery自动触发事件

<div class="login-btn"><input type="button" value=“登录” οnclick="checkLogin"/>
</div>
$("login-btn input").trigger("click")

关于HTML/CSS/JS的总结相关推荐

  1. 【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决

    Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决: 1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty\j ...

  2. html及js试题,HTML+css+js试题..docx

    HTMLcssjs试题. HTML+CSS+JS面试题一.单项选择(165题)1.HTML是什么意思?A)高级文本语言B)超文本标记语言C)扩展标记语言D)图形化标记语言2.浏览器针对于HTML文档起 ...

  3. css/js压缩工具

    css/js压缩工具 http://ajaxmin.codeplex.com/

  4. html css js书写规范

    无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...

  5. 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...

  6. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button οnclick="returnTop()& ...

  7. web静态资源访问规则||webjars的访问配置——webjars是maven库里面对css js image打的一个jar包

    Html css js image  txt   web项目中 放在 Webapp 在springboot项目中  静态资源放置的位置 Springboot默认的静态资源目录 (1)在src/main ...

  8. asp.net MVC发布iis无法加载css,js和图片

    今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual s ...

  9. 采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)

    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  10. html css js 实战案例_使用html+css+js实现弹球游戏

    php中文网最新课程 每日17点准时技术干货分享 使用html+css+js实现弹球游戏 代码如下,复制即可使用: <head> <style type="text/css ...

最新文章

  1. DL练习1：基于boston_house_prices的BP神经网络
  2. 一份关于kaggle特征构建技巧和心得
  3. Docker学习笔记之二，基于Dockerfile搭建JAVA Tomcat运行环境
  4. 去中心化数据库Bluzelle公布2021年路线图，将于2月3日上线主网
  5. blog转到CNBlog了
  6. archivedDataWithRootObject NSUserDefaults
  7. Tkinter实现模拟鼠标单击四位数字验证码自动刷新功能
  8. keil安装GD32 pack包安装不上 不显示 没有了
  9. 液晶显示屏的LED背光辉度公式计算？
  10. 渗透工具SharpXDecrypt：Xshell全版本凭证一键恢复工具，针对Xshell全版本在本地保存的密码进行解密
  11. 在html中页面不全,网页显示不全,教您网页显示不全怎么办
  12. 已写完的二十本最经典原创小说巨作！你都看过吗？
  13. java生成签名的方法
  14. ffmpeg实现视频和音频分离，并且将声音切片
  15. “微信教父”张小龙2021最新演讲，视频号、直播、创作者透漏了几大重要趋势丨国仁网络
  16. python计算多边形面积
  17. R语言使用mgcv包中的gam函数拟合广义加性模型（Generalized Additive Model，GAMs)：从广义加性模型GAM中抽取学习到的样条函数（spline function）
  18. SpringBoot项目中怎么保证提供的接口不会被调崩
  19. minio分布式解决方案
  20. 提取官方原生(RUU/.exe)ROM刷机文件

热门文章

  1. 工业喷嘴检测喷雾角度视觉测量
  2. 高新技术企业申报有哪些常见问题
  3. 部署tomcat+php
  4. 计算两数的乘积，求最大值
  5. html按钮四钟状态,简单JS+HTML动态网页（时钟）设计
  6. Deployment 回滚
  7. mysql冷门语句_MySQL稍微冷门的问题汇总
  8. bat ping 返回值_英雄联盟手游ping信号怎么发 怎么给队友发信号_英雄联盟手游
  9. 2021最新分享苹果cms10资讯采集接口,无广告超清通用解析接口
  10. jeecms系统使用介绍