jQuery的一点小结
1、jQuery常用选择器
筛选:
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').eq(5); //选择第6个div元素
选择器的转移:
$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素
$('#box').prevAll(); //选择id是box的元素之前所有的同辈元素
$('#box').next(); //选择id是box的元素后面紧挨的同辈元素
$('#box').nextAll(); //选择id是box的元素后面所有的同辈元素
$('#box').parent(); //选择id是box的元素的父元素//通过儿子找爸爸
$('#box').children(); //选择id是box的元素的所有子元素//通过爸爸找儿子(可指定)children('li')
$('#box').siblings(); //选择id是box的元素的同级元素//可以找到同级中的一个(可指定)siblings('li')具有很强的排他性
$('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素
.eq 根据下标找元素 与 .index获取元素下标 一般是一起使用
还有一类选择器就是css中的选择器 2、具备jQuery特有的方法
jQuery对象.css()
jQuery对象.addClass()
设置class等属性
jQuery对象.addClass() 添加类名
jQuery对象.removeClass() 删除的是类名中的一个值
jQuery对象.toggleClass() 切换类
特点:在removeClass()中不写参数表示全部删除 3、jQuery动画的实现
1、jQuery对象.animate()
jQuery对象.animate(参数一:要改变的样式属性值,写成字典的形式,参数二:动画持续的时间,单位为毫秒,一般不写单位,
参数三:动画曲线,默认为‘swing’,缓冲运动,还可以设置为‘linear’,匀速运动,参数四:动画回调函数,
动画完成后执行的匿名函数)
2、更便捷的动画实现
jQuery对象.hide() 隐藏
jQuery对象.show() 显示
jQuery对象.toggle() 切换隐藏显示
jQuery对象.fadeIn() 淡入
jQuery对象.fadeOut() 淡出
jQuery对象.fadeToggle() 切换淡入淡出
jQuery对象.slideUp() 卷起
jQuery对象.slideDown() 展开
jQuery对象.slideToggle() 切换卷起展开
jQuery对象.fadeTo(时间,透明度(写成小数)) 设置透明度 4、对元素的操作
jQuery对象.prop("src") 根据src获取src的值
jQuery对象.prop("src","具体的值") 设置src的值
jQuery对象.prop({}) 可以写多个键值对
jQuery对象.val() 把value单独提出来,获取value的值
jQuery对象.val("具体的值") 设置value的值 5、jq中的循环
$('li').each(function(aa){
//形参表示的就是标签的索引值
alert()
})
js中参数非常的随意
获取焦点 focus
失去焦点 blur
拥有更多的时机做事情
进入的子元素或者触发或者不触发命令
推到:标签父子级,命令绑定到父级
hover(function(){},function(){})
进入 移出 6、jQuery对象.submit()提交表单
表单提交不会直接选择form标签选择器html5中一个HTML页面可以有很多个form标签,为了保证一致性都是id的形式选择器
工作中不是直接的提交需要条件判断:如果所有表单控件合法提交否则报错不能提交数据
preventDefault()和return false 都是阻止默认时间的发生 7、事件冒泡:
父子级标签且都绑定相同的事件,触发子级的命令会逐层像父级触发
event.stoppropagation() 和 return false 都是阻止事件冒泡
事件的冒泡是客观存在的现象,不会因为没有响应表示没有冒泡
根据自己的需求来确定在哪return false 阻止冒泡
看不见的遍历是隐式迭代浪费资源
8、事件委托/事件代理:委托给这个标签的父标签
$('ul').delegate(事件实际发生在谁身上,事件属性,匿名函数写命令)
作用:1、提高代码的执行效率
2、可以给未来元素绑定命令
拓展:on(事件属性,匿名函数)只能给未来元素绑定命令
DOM 文档对象模型 document object model
js内置:内置的一个结构化表现手法,通过结构化表现手法把所有标签实现了一个倒置的树状结构图
针对性的寻找标签
标记 == 标签 == 元素 小于 节点(标签,标签的属性,标签的内容)
增加删除
增加标签:子级和同级
删除标签:1、声明变量保存节点标签数据
2、使用追加函数节点变量追加到相应的位置
var $li = $('<li>666</li>')
子级:
$('ul')append($li) 添加到子级之后
$li.appendTo($('ul'))
$('ul').prepend($li) 添加到子级之前
$li.prependTo($('ul'))
同级:
$('ul').after($div) 添加到同级之后
$div.insertAfter($('ul'))
$('ul').before($div) 添加到同级之前
$div.insertBefore($('ul'))
删除:
$('ul').remove() 删除节点
$('ul').empty() 清空节点
$(function(){}) 匿名函数
$('div')选择器
$('<li>666</li>')标签
$(this)原函数 9、$.ajax使用方法
常用参数:
1、url请求地址
2、type请求方式,默认是'GET',常用的还有'POST'
3、dataType设置返回的数据格式,常用的是'json'格式,也可以设置为'html '
4、data设置发送给服务器的数据
5、success设置请求成功后的回调函数
6、error设置请求失败后的回调函数
7、async设置是否异步,默认值是'true',表示异步
$.ajax({
url: '/change_data',接口的请求地址接口:为了得到数据的叫接口
type: 'GET',
dataType: 'json',通用数据格式
success:function(dat){
alert(dat.name);
},
error:function(){
alert('服务器超时,请重试!');
}
});
jQuery的一点小结的更多相关文章
- 项目常用jquery/easyui函数小结
#项目常用jquery/easyui函数小结 ##背景 项目中经常需要使用到一些功能,封装.重构.整理后形成代码沉淀,在此进行分享 ##代码 ```javascript /** * @author g ...
- JQuery插件使用小结
JQuery插件使用小结
- C++输入一行字符串的一点小结
C++输入一行字符串的一点小结 原文链接: http://www.wutianqi.com/?p=1181 大家在学习C++编程时.一般在输入方面都是使用的cin. 而cin是使用空白(空格,制表符和 ...
- javascript jquery数组操作小结
----------------------------------------------------------定义数组-------------------------------------- ...
- Jquery操作select小结
每次操作select都要查资料,干脆总结一下. 为select设置placeholder <select class="form-control selOP" placeho ...
- JavaScript自己模仿jQuery的一点小代码
function seter(sId) { var obj = document.getElementById(sId); return new function () { ...
- ExtJS与jQuery的一点细节上的对比
首先说明这不是一篇完整解读ExtJS和jQuery所有方面差异的文章,只是针对我个人刚看了两天的jQuery产生的一些疑问的整理.之前用过一段时间ExtJS,了解ExtJS的一些机制.现在做移动开发, ...
- web一点小结
1, AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX ...
- [转]DevExpress GridControl 关于使用CardView的一点小结
最近项目里需要显示商品的一系列图片,打算用CardView来显示,由于第一次使用,遇到许多问题,发现网上这方面的资源很少,所以把自己的一点点实际经验小结一下,供自己和大家以后参考. 1.选择CardV ...
随机推荐
- 关于Datastage资料库的一点小发现
这里的资料库,指的是Datastage Metadata层,在Datastage7.5以后,需要在安装Datastage时安装一个数据库用于存放用户数据. 昨天领导要求安装Datastage集群/高可 ...
- C++箱子排序
箱子排序 实现 把每个箱子用一个链表实现.在进行节点分配之前,每个箱子都是空的. 基本思想 1.从与排序链表的头部开始,逐个删除节点,并把它放到合适的箱子链表的头部 2.收集并连接每个箱子中的节点,产 ...
- Oracle官网登录下载资源账号密码共享
Oracle帐号:2696671285@qq.com Oracle密码:Oracle123 可爱博主:AlanLee 博客地址:http://www.cnblogs.com/AlanLee 本文出自博 ...
- PHP接收IOS post过来的json数据无法解析的问题
在本地环境下运行解析OK 换到线上的环境解析失败 开始怀疑各种编码问题,解决均无效. 查看phpinfo 发现magic_quotes_gpc =on 终于找到问题所在,更改php.ini文件 mag ...
- 关于easyUI
<input class="easyui-combobox" id="s_dataDicName" data-options="panelHei ...
- [UI] 精美UI界面欣赏[1]
精美UI界面欣赏[1]
- 全网数据定时备份方案[cron + rsync]
1.1.1. Rsync(远程同步)介绍 [Rsync等价scp cp rm共3个命令的和] 1.什么是Rsync: Linux下面开源的,很快,功能很多,可以实现全量及增量的本地或者远程数据同步 ...
- 铁乐学python_Day42_线程池
铁乐学python_Day42_线程池 concurrent.futures 异步调用模块 concurrent.futures模块提供了高度封装的异步调用接口 ThreadPoolExecutor: ...
- 铁乐学Python_day03-字符串常用操作方法
文:铁乐与猫 2018-3-20 1)字符串首个字母大写,其它字母也会转换成小写: S.capitalize() -> str 记忆方法:capital(大写字母) def capitalize ...
- mysql数据库配置文件
一.数据库配置文件 数据库配置文件是很一个很强大的功能,这是数据库管理员经常需要关注的配置文件. my.ini #这是在windows下的配置文件名称. my.conf #这是在linux下的配置 ...