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 ...
随机推荐
- JSPatch 可以让你用 JavaScript 书写原生 iOS APP
简介 JSPatch 可以让你用 JavaScript 书写原生 iOS APP.只需在项目引入极小的引擎,就可以使用 JavaScript 调用任何 Objective-C 的原生接口,获得脚本 ...
- 【Android】RxJava的使用(一)基本用法
前言 最近经常看到RxJava这个字眼,也看到很多人在博客中推荐使用RxJava.好奇的我怎么能错过,于是Google了一下,说RxJava好用的和说RxJava难用的都有,于是自己也亲自尝试了一下( ...
- MySql 缓存查询原理与缓存监控 和 索引监控
MySql缓存查询原理与缓存监控 And 索引监控 by:授客 QQ:1033553122 查询缓存 1.查询缓存操作原理 mysql执行查询语句之前,把查询语句同查询缓存中的语句进行比较,且是按字节 ...
- 报表使用hive数据源报java.net.SocketTimeoutException: Read timed out
数据库表的数据量大概50W左右,在报表设计器下创建了hive的数据源,连接正常,由于数据量比较大,就用了润乾报表的大数据报表功能,报表设置好后,发布到页面中报错: 数据集ds1中,SQL语句SELEC ...
- 让索引包含null值的两种方法
1. 把有NULL值的列与一个常数,或者一个带有not null约束的列一同索引 create index ind_01 on t01(col01,1); 或者 create index ind_01 ...
- apache ftp server的简单入门(数据库验证)
apache的简单校验分为两种,一直是前面提到的properties的校验,具体参考:apache ftp server的简单入门(properties验证) 今天来说一种数据库的校验,这种方式在项目 ...
- Django之modelform简介
在django中内置了form类和model类,当页面中的form值和model字段值完全一样时,此时可以通过model生成一个完全一样的form,Django中的modelForm就因此而生. 目标 ...
- python相关知识/技巧文摘
python文件和目录操作 python连接mysql数据库 Python字符编码详解 unicode相关介绍
- 【Redis】命令学习笔记——键(key)(20个超全字典版)
安装完redis和redis-desktop-manager后,开始学习命令啦!本篇基于redis 4.0.11版本,从对键(key)开始挖坑! 准备工作,使用db1(默认db0,由于之前练习用db0 ...
- SQL 中Count()的问题
假如一张表中有如下的数据: 当使用select Count(*) from TableName表示获取表中数据记录的条数: 有时候可以通过select Count(列名) from TableName ...