使用免费的代码做网站,谷歌seo代运营,白云建设网站,wordpress卡出翔一、什么是jQuery
框架#xff1a;半成品软件
Jquery就是封装好的js 本质上还是js
jQuery是一个快速、简洁的JavaScript**框架**#xff0c;是继Prototype之后又一个优秀的**JavaScript代码库**#xff08;*或JavaScript框架*#xff09;。
JQuery:封装好的代码库。有一…一、什么是jQuery
框架半成品软件
Jquery就是封装好的js 本质上还是js
jQuery是一个快速、简洁的JavaScript**框架**是继Prototype之后又一个优秀的**JavaScript代码库***或JavaScript框架*。
JQuery:封装好的代码库。有一些大牛官方嫌弃js用着不好很多具有特殊功能的代码的集合。就把这些代码写在一个js文件中名字就叫 jquery.js。
jQuery设计的宗旨是“write LessDo More”即倡导写更少的代码做更多的事情。它封装JavaScript常用的功能代码提供一种简便的**JavaScript设计模式**优化HTML文档操作、事件处理、动画设计和**Ajax交互**。
优点选择器强大 优秀的DOM操作 动画 链式编程一 . 到底
二、jQuery的使用
(一) 基础语法
1. $(选择器).action()
2. 获取DOM元素
$(选择器)
获取 单个 和 多个 DOM元素都是用这个语法
3. 注意 通过$(选择器)获取的DOM元素 被称为 jquery 元素(被jquery二次处理过) 通过 原生js获取的DOM元素 就是标准的DOM元素 jquery DOM对象 只能调用jquery内部提供的方法 原生js DOM对象 只能调用原生js内部的方法
(二) jsDOM对象与 JqueryDOM对象的互相转换 js对象---》jquery对象 $(js对象)
jquery对象-》js对象
jquery对象[下标]
- jquery对象.get(下标)
- jquery对象的遍历
- 普通for循环
- $(选择器).each(function(index,item){ });
- $.each(要遍历的对象/数组,function(index,item){ })
//内置方法 each
$(p).each(function(index,item){
console.log(item,index);})
三、jQuery的属性操作 text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容包括 HTML 标记val() - 设置或返回表单字段的值hide()--隐藏 》display:none; show()--显示 》display:block/inline; length--长度
四、jQuery操作CSS样式 js jq 对象.style.属性 “属性值” css({属性:属性值属性:属性值})//多属性 css(属性名,属性值);//单个属性
五、jQuery的事件绑定
(一) 绑定方法 六、jQuery事件委托的解决办法 也可以直接这样写把标签名放中间
七、jQuery的DOM 操作 (一) jQuery的事件 jquery事件 说明 ready( fn) 页面加载完毕时发生的事件 blur( [ [data], fn ] ) 元素失去焦点时发生的事件 change([ [data], fn ] ] ) 元素的值发生改变时发生的事件 click( [ [data], fn ] ) 单击鼠标时发生的事件 dblclick( [ [data], fn ] ) 双击鼠标时发生的事件 focus( [ [data],fn ] ] ) 元素获得焦点是发生的事件 keydown( [ [data], fn ] ] ) 按下键盘时发生的事件 keyup( [ [data],fn ] ]) 松开键盘时发生的事件 keypress( [ [data] , fn ] 按下并松开键盘时发生的事件 mousedown([[[data],fn ]]) 按下鼠标按钮时发生的事件 mousemove([[[data],fn ]]) 鼠标移动时发生的事件 mouseout([[data],fn ]]) 鼠标离开某元素时发生的事件 mouseover([[data],fn ]]) 鼠标悬浮到某元素上时发生的事件 mouseup([[data],fn ]) 松开鼠标按钮时发生的事件 scroll([[data], fn ]) 页面滚动时发生的事件 select([[data],fn ]]) input元素的选取事件 submit([[data] , fn ]) 表单提交事件 unload([[data],fn ]]) 页面卸载时发生的事件
(二) jQuery事件对象event/e属性 type 获取事件类型 target 获取触发事件的元素 result 获取上一个事件处理函数返回的值 which 获取在鼠标单击事件中获取鼠标的按键值 pagex/y 获取事件发生时相对于页面的坐标 keycode 获取在键盘事件中键盘对应的键值 screenx/y 获取事件发生时相对于屏幕的坐标 data 事件发生时传递的参数的信息都保持在该属性中
事件对象ewindow.event 表示事件对象其中包含事件发生时周围的各种信息。
(三) 事件绑定
$(选择器).click(function(){ })常用
$(父选择器).on(事件类型1 事件类型2。。。 子元素 , function(){});常用动态 绑定 如果想给某个父元素中的子元素绑定事件但是 这个子元素 不存在不是我们自己写的而是通过js代码动态添加的时候此时绑定事件用。
八、DOM操作
一、创建节点 创建节点 $“标签名 属性内容/标签名” $“标签名”
二、添加节点 append() 在被选元素的内结尾追加元素 儿子 prepend() 在被选元素的开头插入内容儿子 after() 在被选元素之后插入内容加的是兄弟 before() 在被选元素之前插入内容加的是兄弟
三、删除节点 remove() 删除被选元素及其子元素 empty() 从被选元素删除子元素/清空子元素
四、复制节点 clone(includeEvents) 生成被选元素的副本包含子节点、文本和属性。 includeEvents 可选。布尔值。规定是否复制元素的所有事件处理。默认地副本中不包含事件处理器。
九、节点属性方法 方法名 含义 parent() 返回被选元素的直接父元素。---》parentNode parents() 返回被选元素的所有祖先元素它一路向上直到文档的根元素 () children() 返回被选元素的所有直接子元素---》children find() 方法返回被选元素的后代元素一路向下直到最后一个后代 contents() 返回被选元素的所有直接子元素包含文本和注释节点 next() 返回被选元素的下一个同胞元素。----nextElementSibling nextAll() 返回被选元素的所有跟随的同胞元素。 prev() 返回被选元素的上一个同胞元素---》previousElementSibling prevAll() 返回被选元素的所有上边的同胞元素 siblings() 返回被选元素的所有同胞元素。 first() 返回被选元素的首个元素。 last() 返回被选元素的最后一个元素。 eq() 返回被选元素中带有指定索引号的元素。
十、工具函数: 方法 含义 $. type( ) 用来测试数据的类型 $.isNumeric() 用来测试数据是否为数字 $.trim() 用来去除字符串两端的空格 $.parseJSON() 用来把字符串解析成JSON对象
对象和json
对象的数据格式
键值对 HashMap
var/let 对象名 {
key1:value1,
key2:value2,
key3:value3,
...
}
//对象的取值
//方法一
//alert(person1.name)
//方法二
alert(person1[name]);
