Jquery笔记

最新推荐文章于 2023-02-26 00:38:26 发布

Kari–

最新推荐文章于 2023-02-26 00:38:26 发布

阅读量558

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/ACTYQW/article/details/108946981

版权

JQuery笔记

文章目录

JQuery笔记
CSS()函数
- JQ操作DOM
- JQ访问CSS
- 任务 :比较JQ访问CSS 与 JS访问CSS 各自优缺点
内置函数
JQ访问CSS样式 css()
JQ访问元素类 addClass()
JQ访问元素尺寸 width()
JQ访问元素位置
JQ访问元素内容
JQ访问元素属性
JQ访问表单数据值
jquery操作元素样式
jquery操作元素类
jquery操作元素尺寸
jquery操作元素位置
jquery操作元素属性
jquery操作元素内容
jquery获取表单数据
jquery操作DOM节点
jquery绑定事件
复习操作DOM节点
事件的认识
js绑定事件的五种方法 = 复习
jq绑定事件
页面加载
鼠标事件
焦点事件
改变事件

JS——JavaScript
1995年布兰登·艾奇发明
JS是一种弱数据类型语言
数据的类型区分的不是那么严格

css1、css2、css3，就目前的使用情况而言，css2使用的比较多，因为css1的属性比较少，
而css3有一些老式浏览器并不支持，所以大家在开发的时候主要还是使用css2。css1：id选择器、
类选择器、标签选择器css2标签选择器类选择器id选择器全局选择器组合选择器继承选择器伪类
选择器css3:nth-child属性选择器。

架构：简单的说架构就是一个蓝图，是一种设计方案，将客户的不同需求抽象成为抽象组件，并且能够描述这些抽象组件之间的通信和调用。
框架：软件框架是项目软件开发过程中提取特定领域软件的共性部分形成的体系结构，不同领域的软件项目有着不同的框架类型。框架不是现成可用的应用系统。而是一个半成品，提供了诸多服务，开发人员进行二次开发，实现具体功能的应用系统。
设计模式：是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结，它强调的是一个设计问题的解决方法。

前端开发市场发展趋势

1.前端处于工程化开发阶段
主流框架：vue、react、angular
自动化平台：webpack、gulp
协作工具：git

2.以H5为主的移动端开发正在代替传统的ios/android开发
Hybrid 混合开发模式
微信二次开发
微信小程序
ReactNative.js移动端开发框架

3.逐步成长的全栈开发（node.js）

4.拥抱虚拟现实VR/AR
WebGL（Web Graphics Library）

前端开发常用的IDE及浏览器等
1.网页三剑客
Adobe Dreamweaver
Adobe Fireworks(Adobe Photoshop)
Adobee Flash
目前设计效果图，很多公司都在用sketch
2.Sublime Text （打开速度特别快）
3.Webstorm（推荐）功能强
4.Atom（编辑速度快，基于浏览器）
5.HBuilder

浏览器内核：
前端开发要会使用HTML/CSS/JS编写代码，
编写代码的时候要遵循一些规范(W3C)
开发浏览器就是为了按照W3C的规范识别出开发者编写的代码，
并且在页面中绘制出预想的页面和效果（CPU：显卡）

浏览器兼容：
1.W3c发布的规范都是开发者们不断尝试的结晶
2.每个浏览器为了彰显自己的不同，不按照标准来却把标准中规定的效果用其他方式实现

页面中导入js（三种方式）
JS三种导入方式：
1、行内导入

（onclick是当点击div的时候，alert弹出框的意思）（这个方法慎重使用，不安全） 2、内嵌式

(内嵌导入和外链导入不能合并到一起，如果当前是外链导入，
那么在script脚本块中编写的所有代码都不会再执行)

页面中导入css（四种方式）
1.行内（不推荐，html和css混淆，代码结构乱）：

2.内嵌:

css导入式和外链式区别是什么？
两者最先实现的结果是一样的，都是将独立的css文件引入到网页文件中。但是两者还是有细微的差别的。

其中link是将css布局文件先加载如网页文件中，所以这时无论网速再慢，最终实现的网页效果都是一样的。

而@import则是先将网页文件加载，再加载布局文件，这时候如果网速过慢的话，则会先出现没有布局的网页效果，就会显得很难看。

但是导入样式可以避免过多的网页文件指向一个css布局文件，如果采用link的话，可能会导致由于过多的网页文件同时采用一个布局文件而导致速度下降。
但是使用好的硬盘基本不会出现这样的情况。

一般会把css放在body上面 js放在body末尾
body中编写的都是html的标签，js很多时候需要这些元素，所以要保证元素加载成功，
才可以在js中获取到（js放在结构之后加载，js放在body末尾）
如果js放在html标签前面，
js：window.οnlοad=function(){}页面中所有资源文件都加载完成执行操作

js输出方式：
1.alert(‘66’)；在浏览器中弹出一个提示框输出字符串

2.confirm(‘66’);弹窗有确认和取消
点击确定按钮时收到true，点击取消收到false

3.prompt(‘66’)：在confirm基础上增加让用户输出的效果(可以写入)
用户点击取消按钮，获取结果null，
用户点击确定，获取用户输入内容（用户没输入，获取空字符串）
一般提示框用自己封装插件和组件来实现，不用内置的（使用原生js封装模态框组件）

JavaScript使用控制台输出
方便开发人员调试
F12开启浏览器控制台
控制台输出（输出什么格式显示什么格式）console.log(1);
console.dir(1)比log更详细
console.table(1) 显示表格格式

JavaScript输出到网页
document.writeln(“123”);

JavaScript

ECMA script（ES）规定了JS一些基础核心的知识（变量、数据类型、语法规范、操作语句等）
3/5==6/7

DOM：document object model 文档对象模型，里面提供了一些属性和方法，
可以让我们操作页面中的元素

BOM（字节顺序标记）：browser object model 浏览器对象模型，里面提供了一些属性和方法，
可以让我们操作浏览器

变量和常量：
变量：值可以改变
常量：值不可以改变

var 变量名 = 赋值；（ES6中定义变量使用let）

js中的命名规范：
1、js这种严格区分大小写 2、遵循国际命名规则（驼峰命名法）
3、第一个单词首字母小写，其余每一个有意义单词首字母大写。
4、命名的时候可以使用$、_、数字、字母，但是数字不能作为名字的第一位。
var $xxx:一般都是引用jq获取到的值 var _xxx:一般这样的情况代表变量是一个全局或者公用的变量。
5、js中很多的词都是有特殊含义的，我们这些词叫做关键字；现在没有特殊含义，以后可能会作为关键词的，
我们叫做保留字；而关键字和保留字都不可以随便用来命名。

字符串中的常用方法：
charAt charCodeAt
substr substring slice

js中的数据类型：
基本数据类型（值类型）：
number 数字
String 字符串
boolean：布尔类型
null 空
undefined 未定义

引用数据类型：
object 对象数据类型
{} 普通对象
[] 数组
/^%/ 正则

function 函数数据类型

js中，单引号和双引号包起来都是字符串（单双引号没有区别）

true false =》布尔类型：只有两个值
null
undefined

{name：‘zfpx’,age:8}
/^-?(\d|([1-9]\d+))(.\d+)?$/ 正则
function fn(){}
…

JS中检测数据类型
typeof: 检测数据类型的运算符
instanceof: 检测某个实例是否属于这个类
constructor 获取当前实例的构造器
Object.prototype.toString.call 获取当前实例所属类信息

typeof
使用typeof检测，返回的结果是一个字符串，字符串中包含的内容证明了值是属于什么类型的
【局限性】
1、typeof null不是‘null’而是‘object’：因为null虽然是单
独的一个数据类型，但是它原本意思是空对象指针，浏览器使用
typeof检测的时候会把它按照对象来检测
2、使用typeof无法具体细分出到底是数组还是正则，因为返回的结果都是‘object’

对象数据类型object
每一个对象都是由零到多组属性名（key键）：属性值
（value值）组成的，或者说有多组键值对组成的，每一组
键值对中间用逗号分隔

属性：描述这个对象特点特征的

对象的属性名是字符串或者数字格式的，存储的属性值可以是
任何的数据类型

获取某个属性名对应的属性值：
obj.name 忽略了属性名的单双引号
或者
obj[‘name’] 不能忽略单双引号

如果属性名是数字：
obj【0】/obj【‘0’】不可以用obj.0

如果操作的属性名在对象中不存在：undefined

删除：
假删除：
让属性值赋值为null，但是属性还在对象中obj.sex=null;
真删除：
delete obj.sex; 把整个属性暴力移出

函数数据类型也是按照引用地址来操作的
函数：具备一定功能的方法

function 函数名（）{
//函数体：实现某个功能的具体JS代码
}

输入函数名输出函数本身；
输入函数名() 把函数执行

函数只创建不执行没有意义：因为空间中存储的都是毫无意义的字符串

fun（）函数运行把函数体中的代码执行
浏览器创建一个供函数中代码执行的私有环境= 私有作用域

形参：形式参数（变量）函数的入口

实参：函数执行传递给函数的具体值就是实参

[context].getElementsByTagName(‘tr’)
指定上下文[context]中，通过元素标签名获得一组元素

DOM：
document.getElementById 一个元素
[context].getElementsByTagName 元素集合
[context].getElementsByClassName 元素集合
document.getElementByName 节点集合
document.documentElement 获取整个HTML对象
document.bode 获取整个BODY对象

getElementById
此方法的上下文只能是document
一个html页面中元素的id理论上不能重复
如果id重复获取第一个id对应的元素对象

在ie 7 及更低版本浏览器中，会把表单元素的name值当作id来使用

获取id值为box1的所有元素标签
var allList = document.getElementsByTagName(’*’),

getElementsByTagName
上下文可以自己来指定
获取到的结果是一个元素集合（类数组集合）

1.获取的结果是集合哪怕集合中只有一项，我们想要这一项，也需要从集合中获取出来再操作

2、在指定上下文中，获取所有子子孙孙元素中标签名叫做这个的（后代筛选）

getElementsByClassName
1、getElementsByClassName

jquery的目的
1.简化js代码书写
2.简化js的兼容问题
jq提供了一个工厂函数–实参–实例化$对象
js方式获取文档对象 DOM对象
jq方式获取文档对象 $对象
js==jq

获取父类parent
子选择 children
后代选择 find
var allp =$("#oDiv1".find(“p”));
console.log(allp);
下一个兄弟 next
下面所有兄弟 nextAl
所有兄弟 siblings

js：
childNodes获取当前所有的子节点(节点集合：类数组)
children获取所有的元素字节点（元素集合）
(box.children)
parentNode 获取当前元素的父节点
previousSibling获取当前节点的上一个哥哥节点
nextSibling获取当前节点的下一个弟弟节点
firstChild:当前元素所有子节点中的第一个(不一定是元素节点)
lastChild:当前元素所有子节点中的最后一个

DOM的增删改：
//添加
document.createElement()
在JS中动态创建一个HTML标签

容器.appendChild（新元素）
把当前创建的新元素添加到容器末尾

容器.insertBefore（新元素，老元素）
在当前容器中，把创建的元素添加到老元素之前
//删除
容器.removeChild(元素)
在当前容器中把某个元素移除掉

容器.replaceChild(新元素,老元素)
当前容器中，拿新元素替换老元素

元素.cloneNode(false/true)
把原有的元素克隆一份一模一样的,false:只克隆当前
元素本身，true：深度克隆，把当前元素本身以及元
素的所有后代都克隆

CSS:
1、选择器
优先级别 == 位置 – 就近原则（距离被修饰对象越近）
!important 无条件优先
内嵌式高
内联式次
外联低
注意:CSS出现靠后、优先级别高覆盖前面的样式

			   <div style="width:20px;height:40px;....">
			   
			 style-attr    #id     .class|伪类|属性      元素|伪元素     *   继承
			  1000        0100          0010               0001  
			   
			   
 解释顺序    从右向左   #Odiv .classname li{尽快过滤掉无效对象}
            建议
			  div#Odiv
			  .cls1

##第一部分：JQ选择器== 部分采用CSS选择器，部分扩展 “查”
1、基本选择器 # . * ,
2、层级选择器 > " " + ~
3、过滤选择器
1）基本过滤 :first :last :not() :even :odd :header gt(index) lt(index) eq(index)
注意：index 从0开始
2）可见性过滤 :hidden :visible ==== display type
3）内容过滤 contains() has() empty parent
4）属性过滤 [attr=value] [attr|=value] [attr^=value][attr$=value][attr*=value]
[attr~=value][…]
5）子元素过滤
父元素中所有子元素
:first-child == 获取所有父元素中的第一个子元素
:last-child == 获取所有父元素中的最后一个子元素
:only-child == 获取所有父元素中只有一个子元素的子元素
:nth-child(index) 从1开始获取指定位置元素
:nth-last-child(index)
父元素中所有同类子元素
:first-of-type == 获取所有父元素中同一类子元素的第一个元素
:…
6)表单过滤器
基本过滤器 = 不是CSS选择器，扩展 CSS选择器.filter(":?")
元素标签
:input == 捕获表单中所有的input、select、textarea、button元素
:button
属性 type="?"
:text == 捕获表单中所有input[type=“text”]
:password
:radio
:checkbox
:submit
:image == 捕获所有[type=“image”] 注意:image???
:reset
:button == 捕获所有button、[type=“button”]
:file == 捕获

  方法: show  hide  css  find  next
       nextall siblings parent children get 
  
  
  //状态选择器
  
  :enabled
  :disabled
  :checked
  :selected
  :focus     == 获取焦点
注意: 
  $(":enabled")    *:enabled  
  

第二部分：  
JQ的DOM操作  ==  js的增、删、改
addClass toggleClass  attr  val  text  
append  prepend  empty  clone  each  ....

JQ链式编程  ==  
    返回值：
	   $ ==  大部分情况（所有的设置不存在返回值  -- jquery对象）
	   获取属性 ==  返回属性的字符串， 

特点  :   get  set  all  in   one   方法 
          set   ---  all            
		  get   ---  first
  JS == 集合  、对象
        1)style attribute   ==  字符串 ，对象

一、标签

二、样式  css样式
    js原生  访问  css  三种 方式  
	复习:
	1、元素对象具有属性  ==  标准属性  title  html  href....
	DOM操作API实现  ==  重画  === 影响网页性能
	CSS访问 :  属性   .    性能好
	           API     ==   IE 和 其他   重画    性能
	  
	  
	  根据引入样式的三种方式分别对应三种访问
	  
	  
	  第一种  style
	   elementO.style == 访问到API,
		    cssText --- 内嵌样式字符串    渲染的效果？？？？
            width: 属性
			parentRule:
			捕获标准属性对象   --   border、margin、padding (简、分)、background..
     
	 第二种   API   window
	 访问了接口cssStyleDeclaration
	 /* 
	 通过以下三种方式可以访问API
	   1、元素节点的style属性
	   2、cssStyle对象的style属性
	   3、getComputedStyle()		
	 */
	currentStyle
	CSSStyle
	CSSStyleList
	
	第三种    API   DOM
	//document 访问内联和外链
	styelSheets : 属性   （类数组对象）
	              下标   (styleSheetList)
		 cssRules:属性   (CSSRuleList)
		          下标   (CSSStyleRule)
				style:属性     (CSSStyleDeclaration对象)
				    cssText:属性  （string对象）
	JS的增删改查DOM
	  createElement  appendChild   append   prepend 
	  remove    clone   createTextNode ......

CSS()函数

定义
1、获取css样式属性值（获取符合条件的元素集合内的第一个元素属性值） GET FIRST
2、设置全部CSS样式属性（设置符合条件的元素集合内全部的元素属性） SET ALL
语法
获取 – .css(属性名) 返回值不能链式编程 GET SET ALL in one
– .css([array])
设置 – .css(属性名，属性值) 没有返回值（jquery对象）链式编程
```
       .css(属性名，fun)
```

     计算  :  字符串和数值转换  number()  parseInt()  parseFloat()

操作元素类
addClass() : 添加class名改变样式，不会覆盖，如果class名已存在则忽略
```
     .addClass(classname)
```

     .addClass(function(index,classname){...})指定条件添加

   关于 function中index 指的是当前对象在集合中的下标

removeClass(): 删除class名改变样式

     .removeClass()  == 无参表示删除所有样式

     .removeClass("className") == 移除单个样式

     .removeClass("c1 c2 c3") == 移除多个样式

     .removeClass(function(index,className){})指定条件移除 -

提示:
- css() == 适合样式中属性值不固定情况随机
- addClass()和removeClass() == 适合样式固定情况切换动作
toggleClass() == 切换 className
注意:存在则执行removeClass，否则执行addClass

JQ操作DOM

JQ访问CSS

任务 :比较JQ访问CSS 与 JS访问CSS 各自优缺点

jq访问css的几个函数
css() addClass() removeClass()
事件
js绑定事件操作 : html事件、DOM0级事件、DOM2级事件…
jq绑定事件操作 : hover() 鼠标悬停事件
CSS3效果做一个JQ访问CSS的小练习

JQ常用内置函数分类

文档筛选函数
属性函数 — attr()
文档操作函数
CSS函数 — css()
事件 click、hover

JQ插件

JS和JQ的ajax

内置函数

第一个任务操作CSS样式

定义
1、获取css样式属性值（获取符合条件的元素集合内的第一个元素属性值） GET FIRST
2、设置全部CSS样式属性（设置符合条件的元素集合内全部的元素属性） SET ALL
语法
获取 – .css(属性名) 返回值不能链式编程 GET SET ALL in one
– .css([array])
设置 – .css(属性名，属性值) 没有返回值（jquery对象）链式编程
```
       .css(属性名，fun)
```

     计算  :  字符串和数值转换  number()  parseInt()  parseFloat()

操作元素类

addClass() : 添加class名改变样式，不会覆盖，如果class名已存在则忽略
```
     .addClass(classname)
```

     .addClass(function(index,classname){...})指定条件添加

   关于 function中index 指的是当前对象在集合中的下标

removeClass(): 删除class名改变样式

     .removeClass()  == 无参表示删除所有样式

     .removeClass("className") == 移除单个样式

     .removeClass("c1 c2 c3") == 移除多个样式

     .removeClass(function(index,className){})指定条件移除 -

提示:
- css() == 适合样式中属性值不固定情况随机
- addClass()和removeClass() == 适合样式固定情况切换动作
toggleClass() == 切换 className
注意:存在则执行removeClass，否则执行addClass

图片显示效果练习 picture.zip

第二个任务操作元素的尺寸

width() 获取或设置元素的宽度
innerWidth() 获取或设置元素的宽度+内边距padding
outerWidth() 获取或设置元素的宽度+内边距padding+边框borer
outerWidth(true) 获取或设置元素的宽度+内边距padding+边框border+外边距margin
height() 获取或设置元素的高度
innerHeight() 获取或设置元素的高度+内边距padding
outerHeight() 获取或设置元素的高度+内边距padding+边框borer
outerHeight(true) 获取或设置元素的高度+内边距padding+边框border+外边距margin

第三个任务操作元素的位置

解决布局

position定位 == 默认static、绝对、相对、固定脱离原文档流
float定位 == 浮动
offset() 获取或者设置匹配元素的第一个元素坐标(文档的原点左上角(0,0))left向右为正 top向下为正
position() 获取匹配元素的第一个元素坐标

   （距离最近的定位的父元素的位置，如果该元素前边所有元素都是默认static，则position的返回值与offset一致）

设置元素属性

attr() 获取或设置符合条件的元素的属性文档结构中节点对象的属性
prop() DOM对象的内置属性
浏览器加载html文档后，生成一张由所有标签构成的地图(树状结构节点=元素节点+属性节点+文本节点)DOMAPI

JQ访问CSS样式 css()

JQ访问元素类 addClass()

JQ访问元素尺寸 width()

JQ访问元素位置

offset == 设置或者返回当前匹配元素相对于当前文档的偏移 left top
position == 设置或者返回当前匹配元素相对于已定位的最近的父元素的偏移 left top
offsetParent == 返回距离指定元素最近的已定位的父元素对象
scrollLeft == 获取或设置指定元素相对于滚动条左侧的偏移
scrollTop == 获取或设置指定元素相对于滚动条顶部的偏移
补充CSS1\CSS2\CSS3
传统布局
table 精细化布局
div 灵活性布局
div+table
属性
position = static(默认)、absolute(绝对)、relative(相对)、fixed(固定)、sticky(粘滞)

         static == 页面流中都是static，浏览器解释，top、left失效

```
         top  left属性规定位置
```

         relative = 相对自身的左上角，移位后的元素占位

         absolute = 相对最近的已定位的父元素，移位后元素不占位

         fixed = 相对浏览器的位置，元素位置固定

```
         sticky = relative+fixed
```
float = left、right 不占位
- clear = left 、right、both
display = 终端类型 == 响应式布局
弹性布局flex = 元素(容器)–子元素(项目)–方向(一维) 局部响应
网格布局grid = 行+列全局响应

JQ访问元素内容

html() == 设置或者获取元素的html内容包含标签解释
text() == 设置或者获取元素的文本内容包含标签照原样显示

JQ访问元素属性

attr() == 设置或者获取元素结构属性
注意：value tabindex（异常） type（不要更改） checked selected disabled （更新不及时）
prop() == 设置或者获取元素对象属性

JQ访问表单数据值

-val() == input \ textarea \ select option \button

jquery操作元素样式

css()
获取 css(“属性名”)
```
    css("width")
```
```
    css(["width","height"])
```
设置 css(“属性名”,“属性值”)
```
    css("width","200px")
```
```
    css("width",function(){})
```
```
    css({属性名:属性值})        
```

jquery操作元素类

addClass()
removeClass()
toggleClass()
hasClass()

jquery操作元素尺寸

width()
height()
…

jquery操作元素位置

offset()
position()
scrollLeft()
scrollTop()

jquery操作元素属性

attr()
prop()
…

jquery操作元素内容

html()
text()

jquery获取表单数据

val()

jquery操作DOM节点

创建节点 $()函数
- js == createElement createTextNode
- jq == $(“selector”)
- ```
  $("html标签")  == 创建标签并转换成jquery对象
```
插入节点
父子关系
$(“selector”).append(ele) == 用于在匹配元素的最后一个子元素之后插入ele
$(“selector”).prepend(ele) == 用于在匹配元素的第一个子元素之前插入ele
$(ele1).appendTo(ele) == 将匹配的元素插入ele中的末尾
$(ele1).prependTo(ele) == ？将匹配元素插入ele中的开头
兄弟关系
$(“selector”).before(ele) == 在匹配元素之前插入ele元素
$(“selector”).after(ele) == 在匹配元素之后插入ele元素
$(ele).insertBefor(“selector”) == 同before
$(ele).insertAfter(“selector”) == 同after
删除节点
remove() 删除DOM节点，但是保留jquery对象，不保留相关数据信息 click等事件？
detach() 删除DOM节点，但是保留jquery对象，保留相关数据信息事件-
empty() 清空指定元素的内容
复制节点
clone() 复制DOM节点
替换节点
- replaceWith()
- replaceAll()

*** 预习内容 *** API手册

包裹节点
wrap()
wrapAll()
wrapInner()
遍历节点
隐式遍历 == 适合于按页面流顺序遍历
each() == 适合有条件遍历

练习2:添加删除工具菜单

注意：button 和 input type=button
button 默认有提交功能 type= reset |submit

jquery绑定事件

multiple:是否允许显示多个列表

复习操作DOM节点

append() 有剪切粘贴作用
prepend()
appendTo()
prependTo()
before(ele)
after()
insertBefore()
insertAfter(ele)
remove()
detach()
empty()
clone()
replaceWith()
replaceAll()
包裹节点
wrap(html/jquery/DOM/selector) 为每个匹配到的元素添加父元素
wrapAll() 为全部匹配元素添加一个父元素
wrapInner() 为么个匹配的元素添加子元素
隐式遍历
遍历节点
each(function(index,element))
index : 遍历元素的索引，从0开始
element:当前的元素，一般使用关键字this表示当前元素
span标记不允许包裹块标记 == 建议

事件的认识

事件处理程序即给元素绑定事件

js绑定事件的五种方法 = 复习

jq绑定事件

click()
hide()
show()

页面加载

js页面加载 onload()
1、非window对象 == 当非window对象内容加载完毕后触发…操作
2、window对象 == 整个文档加载完毕后触发…操作，只能加载一次
语法
window.οnlοad=function(){
- 函数的代码
};
jq页面加载 load()
1、非window对象 == 当非window对象内容加载完毕后触发…操作
2、window对象 == 整个文档结构加载完毕后触发…操作
语法：
$(“img”).load(function(){});
$(window).load(function(){…});
简化写法
$(function(){…});

鼠标事件

1、click 单击鼠标左键触发的操作
2、dbclick 双击鼠标左键触发的操作
3、mousedown 按下鼠标触发的操作
4、mouseup 松开鼠标触发的操作
5、mouseover 鼠标移入目标元素（或者子元素）触发的操作
6、mouseout 鼠标移出目标元素（或者子元素）触发的操作
7、mouseenter 鼠标移入元素触发的操作
8、mouseleave 鼠标移出目标元素触发的操作

焦点事件

focus 获取焦点后触发的操作
blur 失去焦点后触发的操作

改变事件

change 元素内容发生变化后触发的操作 input text area、select、radio、checkbox等
绑定事件
例如 $(selector).click(f(){…});
on（）适用于当前对象，适合于动态添加元素
语法
on(事件名称，可选子元素们，可选传入事件处理函数的参数，触发的函数)
提醒 : one() 和on方法一样，但是one方法单次绑定
解绑
off() 解除on方法绑定的事件

Ajzx:可以无刷新状态更新页面
异步提交

Get
$(‘input’).click(function () {
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box').load('tes\dots$ _GET[‘url’] == ‘ycku’) {
echo ‘瓢城Web俱乐部’;
} else {
echo ‘木有！’;
}
POST
$(‘input’).click(function () {
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box').load('tes\dots$ _POST[‘url’] == ‘ycku’) {
echo ‘瓢城Web俱乐部’;
} else {
echo ‘木有！’;
}

$(‘input’).click(function () {
$.getScript(‘test.js’);
});

Kari–

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery笔记

JQuery笔记文章目录JQuery笔记CSS()函数JQ操作DOMJQ访问CSS任务 :比较JQ访问CSS 与 JS访问CSS 各自优缺点JQ常用内置函数分类JQ插件JS和JQ的ajax内置函数第一个任务操作CSS样式操作元素类图片显示效果练习 picture.zip第二个任务操作元素的尺寸第三个任务操作元素的位置解决布局设置元素属性JQ访问CSS样式 css()JQ访问元素类 addClass()JQ访问元素尺寸 width()JQ访问元素位置JQ访问元素内容JQ访问元素
复制链接

扫一扫