jQuery基础知识总结二
* DOM操作
*1 基本操作
* html() - 等价于innerHTML属性
* text() - 等价于textContent属性
* val() - 等价于value属性
* attr() - 等价于getAttribute()和setAttribute()
* removeAttr() - 等价于removeAttribute()
* 2 CSS操作
①* attr()方法 - 设置样式(删除原有样式,设置新样式)
* style属性和class属性
②* class操作
* addClass() - 添加样式
* removeClass() - 删除样式
* removeClass() - 删除所有样式
* removeClass(className) - 删除指定样式
* toggleClass(className) - 切换样式
* 判断当前元素是否具有className样式
* 如果有,删除 - removeClass()
* 如果有,添加 - addClass()
* hasClass(className) - 判断是否包含指定样式
③* css()方法
* css(name, value) - 设置一个样式属性
* css({name:value,name:value,...}) - 设置多个样式属性
*3 遍历元素
* 祖先元素与后代元素
* 祖先元素 - parents()
* 后代元素 - find(expr)
* 父元素与子元素
* 父元素 - parent()
* 子元素 - children()
* 兄弟元素
* 前一个兄弟 - prev()
* 前面所有的兄弟 - prevAll()
* 后一个兄弟 - next()
* 后面所有的兄弟 - nextAll()
* 所有兄弟 - siblings()
*4 创建元素 - $(HTML代码)
* 5插入节点
* 内部插入
* append()
* prepend()
* 外部插入
* after()
* before()
* 6替换节点
* replaceWith()
* replaceAll() - 颠倒了的replaceWith()
* 7删除节点
* remove() - 删除自身与后代
* empty() - 保留自身,删除后代
*8 复制节点
* clone(boolean) - 是否复制事件
* 9事件
* ready()方法
* 作用 - 等价于 window.onload
* 与window.onload的区别
* ready()
* 每一个HTML页面中允许存在多个
* 具有简写
* $().ready(function(){})
* $(function(){})
* 速度快 - 只加载DOM结构
* window.onload
* 每一个HTML页面中只能存在一个
* 没有简写
* 速度慢 - 加载页面所有内容
* 10与JS库冲突
* 原因 - $符号的使用权
* 原则 - jQuery主动放弃
* 解决
* jQuery.noConflict(); - 表示jQuery主动放弃
* 利用自调函数
(function($){
})(jQuery);
* 利用ready()方法
$(function($){})
25今天的内容:
25.1 事件
25.1.1 事件的绑定与解绑
* bind(type, data, fn)
* type - 绑定的事件名称
* data - (可选)作为event.data属性值传递给事件对象的额外数据对象
* fn - 绑定事件的对应处理函数
* unbind(type, fn)
* type - 解绑的事件名称
* fn - 解绑事件的对应处理函数
TODO bind()方法绑定多个事件
TODO * type - 如果绑定的是多个事件,中间使用空格隔开
$('h5').bind('mouseover mouseout',function(){
var $div = $(this).next();
if($div.is(':hidden')){
$div.show();
}else{
$div.hide();
}
});
unbind()方法解绑
TODO * 不传递任何参数时 - 表示解绑所有事件
TODO * 传递一个事件名称 - 表示解绑指定事件
TODO * 传递多个事件名称 - 表示解绑多个事件
$('h5').unbind('mouseover mouseout');
unbind()方法的fn参数
TODO * 默认情况下,允许不传递
TODO * 传递解绑的事件处理函数fn - 必须与 bind() 方法的处理函数是同一个
$('#btn').click(function(){
alert('xxx');
});
// TODO trigger()方法 - 用于模拟用户触发指定事件
$('#btn').trigger('click');
* 面试题 - bind()、one()、live()和on()的区别
unbind()、die()和off()的区别
* one() - 事件绑定,只能绑定一次(触发一次即失效)
* live() - 事件绑定,为后面添加的元素绑定事件
* jQuery 1.7版本后,被弃用了
* jQuery 1.7版本后,新增delegate()方法,作用与live()相同
* bind() - 事件绑定
* on() - 统一以上所有事件绑定,on()是bind()的底层逻辑
* jQuery 1.7版本后,新增
24.2 动画
24.2.1 显示与隐藏 - 同时改变宽度和高度
* show() - 显示
* show() - 无参版本,没有动画效果
* show() - 有参版本,具有动画效果
* 参数 - slow、normal和fast预定义,自定义时间(毫秒)
* hide() - 隐藏
* hide() - 无参版本,没有动画效果
* hide() - 有参版本,具有动画效果
* 参数 - slow、normal和fast预定义,自定义时间(毫秒)
* toggle() - show() + hide()
* 显示与隐藏的切换效果
$('h5').click(function(){
$(this).next().slideToggle(3344);
})
* 滑动效果 - 改变高度
* slideUp()
* 注意 - 并没有提供无动画版本
* 不传递参数时 - 底层逻辑默认提供一个动画执行的时间
* slideDown()
* slideToggle() - slideUp() + slideDown()
* 向上滑动与向下滑动的切换效果
$('#navigation ul li:has(ul)').mouseover(function(event){
$(this).children('ul').slideDown();
}).mouseOut(function(){
$(this).children('ul').slideUp();
})
hover(fn,fn)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
$('#navigation ul li:has(ul)').hover(function(){
$(this).children('ul').stop(true,true).slideDown(444);
},function(){
$(this).children('ul').stop(true,true).slideUp("fast");
})
* 淡入淡出 - 改变透明度
* fadeIn() - 淡入
* fadeOut() - 淡出
* fadeTo(speed, opacity) - 将指定元素的透明度改变到指定值
* opacity - 表示设置透明度变化到的值
* fadeToggle() - jQuery 1.4版本以后
* 自定义动画
* ① animate(params, [duration], [easing], [callback])
* params - 表示用于实现动画效果的CSS样式属性
* 格式 - Object 类型
{ name : value, name : value,... }
* duration - 表示用于实现动画所执行的时长,单位为毫秒
* easing - 要使用的擦除效果的名称(需要插件支持)
* callback - 表示动画执行完毕后的回调函数
*② animate(params, options)
* params - 表示用于实现动画效果的CSS样式属性
* 格式 - Object 类型
{ name : value, name : value,... }
* options
* 格式 - Object 类型
* 选项
* duration - 表示用于实现动画所执行的时长,单位为毫秒
* easing - 要使用的擦除效果的名称(需要插件支持)
* complete - 表示动画执行完毕后的回调函数
* queue - 为true时排队效果,为false时并发效果
* 两种用法的效果
* 并发效果 - 同时改变多个CSS样式属性
$('#panel').animate({
left : 400,
top : 400
},3000)
* 排队效果 - 多个CSS样式属性按照先后顺序依次改变
$('#panel').animate({
left : 400
},3000).animate({
top : 400
},3000)
* 注意 - 所有与颜色相关的 CSS 样式属性不能使用
* background-color
* border-color
* color
* jQuery类数组对象
* 特点 - 允许存储多个元素,有序排列
* 属性
* length - 表示长度,指的是当前存储元素的个数
* 方法
* 循环遍历方法
* $().each(function(index,domEle){})以每一个匹配的元素作为上下文来执行一个函数。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
* $.each(object,function(index,domEle){})通用例遍方法,可用于例遍对象和数组。不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。
* toArray()方法(调用toArray()方法打印内容,打印方法的返回值)
* 将jQuery对象转换为真正的数组
* 注意 - 只能操作 jQuery 对象
* $.inArray(value, array)
* 作用 - 表示判断指定的值在指定数组中的位置(是否存在)(索引值)
var arr = [1,2,3,4,5];
console.log($.inArray(1,arr));//0下角标
* 注: 如果数组包含指定的值 - 返回对应的索引值
* 如果数组不包含指定的值 - 返回固定值 -1
TODO $.inArray()不能判断对象中是否包含属性或方法,in可以
TODO $.inArray()方法
TODO * 作用 - 用于判断指定 jQuery 对象中是否包含指定的 DOM 对象
TODO * 如果包含,返回对应的索引值
TODO * 如果不包含,返回 -1
var obj = {
name : 'zhangwuji',
age : 18}
console.log($.inArray('name',obj));//-1
console.log('name' in obj);//true
* $.makeArray(obj)
* 作用 - 将类数组对象转换为数组对象
* 注意 :类数组对象 - 不仅仅只是指 jQuery 对象,所有类数组对象都可以
var $inputs = $('input');
console.log($.makeArray($inputs));//array[5]
* JSON格式
* $.pareseJSON() - jQuery提供了将JSON字符串转换为JSON对象的方法
var jsonObj = {
name : 'zhangwuji',
age : 18
}
var jsonStr = '{"name":"zhangwuji","age":18}';
console.log(JSON.parse(jsonStr));//obj
console.log(JSON.stringify(jsonObj));//{"name":"zhangwuji","age":18}
console.log($.parseJSON(jsonStr));//obj
* jQuery插件
TODO laydate插件
TODO * 最初设计时,以 jQuery 的插件出现
TODO * 后期发展,脱离了 jQery
TODO laydate 插件
TODO * class="laydate-icon" - 插件提供的
TODO * placeholder - HTML5新增属性,提供默认提示内容
TODO * 类似于 <input> 标签中的 value 属性
TODO * 通过事件属性实现
TODO * laydate()方法 - 插件提供的
<input placeholder="请输入日期" class="laydate-icon" onclick="laydate()">
<!-- TODO 老版本提供的 -->
<input placeholder="请输入日期" id="hello1">
<span class="laydate-icon" onclick="laydate({elem: '#hello1'});"></span>
* 日期插件
* 基本用法
* 在HTML页面中引入插件文件
* 为<input>标签设置 onclick 事件属性,值为 laydate() 方法
1 TODO 参考了基本用法 - 自己想到的
$('#mydate').click(laydate);
2 TODO 插件提供的JS方式
TODO * 直接调用 laydate(options) 方法
TODO * options - Object 类型
TODO * 选项
TODO * elem - 设置对应的元素(#ID)
TODO * format - 设置日期格式
TODO YYYY-MM-DD - 标准日期格式
laydate({
elem : '#mydate',
// TODO YYYY-MM-DD
format : 'YYYY/MM/DD',
istoday : false,
isclear : false,
min : '1999-01-01 00:00:00'
});
jQuery插件
表单验证插件:常见的有四种(及管网地址)
TODO effect(effect, options, duration, callback)
TODO * effect - 表示设置的动画效果
TODO * blind
TODO * bounce
TODO * ...
TODO * options - 选项
TODO * duration - 表示动画执行的时长,单位为毫秒
TODO * callback - 表示动画执行完毕后的回调函数
*/
/* $('#effect').effect('blind',{},3000);*/
$('#effect').effect('blind',{},3000);
draggable()方法的选项
* axis - 设置只能在x轴或y轴方向拖动
* containment - 设置在某个区域内拖动
* cursor - 设置拖动时鼠标的样式
* cursorAt - 设置鼠标的相对定位
* handle - 设置指定元素触发鼠标按下事件才能拖动
* cancel - 防止在指定元素上拖动
* revert - 当停止拖动时,元素是否被重置到初始位置
* snap - 拖动元素是否吸附在其他元素
* snapMode - 设置拖动元素在指定元素的哪个边缘
* snap设置为true时该选项有效
* 可选值 - inner|outer|both
$( "#draggable1" ).draggable({ axis: "y" });
$( "#draggable2" ).draggable({ axis: "x" });
$( "#draggable3" ).draggable({ containment: "#containment-wrapper" });
$( "#draggable4" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
$( "#draggable5" ).draggable({ handle: "p" });
$( "#draggable6" ).draggable({ cancel: "p.ui-widget-header" });
$( "#draggable7" ).draggable({ revert: true });
$( "#draggable8" ).draggable({ snap: true });
$( "#draggable9" ).draggable({ snap: "#containment-wrapper", snapMode: "outer" });
dropaable()方法的选项
* accept - 指定可拖动的元素可被接受
* activeClass - 被允许拖放的元素覆盖时,改变样式
* hoverClass - 被允许拖放的元素悬停时,改变样式
droppable()方法的事件
* drop - 该事件在被允许拖放的元素覆盖时触发
$( "#droppable" ).droppable({
accept: "#draggable",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
jQuery基础知识总结二的更多相关文章
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- JQuery基础知识(1)
JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...
- JQuery基础知识(2)
JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...
- 0417 jQuery基础知识
jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...
- Java JDBC的基础知识(二)
在我的上一篇Java JDBC的基础知识(一)中,最后演示的代码在关闭资源的时候,仅仅用了try/catch语句,这里是有很大的隐患的.在程序创建连接之后,如果不进行关闭,会消耗更多的资源.创建连接之 ...
- JQuery基础知识梳理篇
这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...
- LeetCode刷题191130 --基础知识篇 二叉搜索树
休息了两天,状态恢复了一下,补充点基础知识. 二叉搜索树 搜索树数据结构支持许多动态集合操作,包括Search,minimum,maximum,predecessor(前驱),successor(后继 ...
- 【JQuery基础知识/statusCode(状态码)】---初学者必备
今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...
- jquery 基础教程[温故而知新二]
子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...
随机推荐
- php二进制流文件
<?php $img_file = 'test.png'; // $fp = fopen($img_file, 'rb'); // $content = fread($fp, filesize( ...
- Intellij IDEA查看方法的调用栈
在IDEA中,先双击选定要查看的方法,使用快捷键Ctrl+Alt+h,在右侧就会显示该方法的详细信息,再双击右侧的方法,就定位到方法的代码区.如下图:
- 【Android Developers Training】 18. 重新创建一个Activity
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 【Android Developers Training】 78. 序言:执行网络操作
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 【操作教程】SequoiaDB分布式存储教程
1.各模式适用场景介绍 由于SequoiaDB对比其他的NoSQL有更多的方式将数据分布到多台服务器上,所以下面笔者为阅读者一一介绍每种分布式方式适合于哪种场景. 1.1 Hash 方式分布数据 在H ...
- Python 3从入门到精通01-环境搭建
本系列开始介绍Python3的基础教程,为什么要选中Python 3呢?因为最近看到一些资料和课程,都是Python 3授课的,例如,大数据,机器学习,数据挖掘等等:还有一个目的,我想彻底地,系统地学 ...
- python webserver, based on SimpleHTTPServer
#-*- coding:utf-8 -*- #author: lichmama #email: nextgodhand@163.com #filename: httpd.py import io im ...
- Struts 之 通配符 路径匹配 常量用法 配置默认值
Struts 框架学习 Action的开发的几种方式 方式1 : 继承ActionSupport 如果使用Struts校验功能,必须继承此类 方式2 : 实现Action接口 方式3 :不继承 ...
- 详细解析 JavaScript 获取元素的坐标
引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...
- jquery中append与appendTo方法区别
1. append(content)方法 方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为& ...