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的一点小结的更多相关文章

  1. 项目常用jquery/easyui函数小结

    #项目常用jquery/easyui函数小结 ##背景 项目中经常需要使用到一些功能,封装.重构.整理后形成代码沉淀,在此进行分享 ##代码 ```javascript /** * @author g ...

  2. JQuery插件使用小结

    JQuery插件使用小结

  3. C++输入一行字符串的一点小结

    C++输入一行字符串的一点小结 原文链接: http://www.wutianqi.com/?p=1181 大家在学习C++编程时.一般在输入方面都是使用的cin. 而cin是使用空白(空格,制表符和 ...

  4. javascript jquery数组操作小结

    ----------------------------------------------------------定义数组-------------------------------------- ...

  5. Jquery操作select小结

    每次操作select都要查资料,干脆总结一下. 为select设置placeholder <select class="form-control selOP" placeho ...

  6. JavaScript自己模仿jQuery的一点小代码

    function seter(sId) {    var obj = document.getElementById(sId);    return new function () {        ...

  7. ExtJS与jQuery的一点细节上的对比

    首先说明这不是一篇完整解读ExtJS和jQuery所有方面差异的文章,只是针对我个人刚看了两天的jQuery产生的一些疑问的整理.之前用过一段时间ExtJS,了解ExtJS的一些机制.现在做移动开发, ...

  8. web一点小结

    1, AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX ...

  9. [转]DevExpress GridControl 关于使用CardView的一点小结

    最近项目里需要显示商品的一系列图片,打算用CardView来显示,由于第一次使用,遇到许多问题,发现网上这方面的资源很少,所以把自己的一点点实际经验小结一下,供自己和大家以后参考. 1.选择CardV ...

随机推荐

  1. ReactNative应用<DCL每日查看>开发总结

    App效果: 功能和交互简单描述: 针对微信使用用户每天的零碎时间来进行天气,新闻要点等查看,免去了打开其他App来查看; 针对每一天可以设置一项重要任务计划,可开启通知提醒,让每一天任务简化,免去太 ...

  2. 让Oracle的 SHOW PARAMETER 命令显示隐藏参数

    转自 http://blog.csdn.net/staricqxyz/article/details/8624549 Find internal of "show parameter&quo ...

  3. 记开发个人图书收藏清单小程序开发(三)DB设计

    主要是参考豆瓣的图书查询接口: https://api.douban.com/v2/book/isbn/:9780132350884 返回内容如下: { "rating": { & ...

  4. unbind() 移除事件内处理方法

    实例: 移除所有 p 元素的事件处理器: $("button").click(function(){ $("p").unbind(); }); 定义和用法: u ...

  5. Linux ulimit命令详解

    ulimit 是一个计算机命令,用于shell启动进程所占用的资源,可用于修改系统资源限制 命令常用参数 -H 设置硬资源限制. -S 设置软资源限制. -a 显示当前所有的资源限制. -c size ...

  6. CSS学习摘要-浮动与清除浮动

    以下从浮动到BFC的段落 摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部 ...

  7. windows 查看端口号,杀进程

    查看端口号: 开始--运行--cmd netstat –and 杀进程: windows任务管理器         查看--显示列-PID 相关知识: 一台机器的80端口被httpd (apache) ...

  8. Linux--面试题-01

    1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统. 3. Linux文件系统中每个文件用 i节点 来标识. 4. ...

  9. 【FLEX教程】#008 开发中的问题笔记(慢更…)

    在这里记录一下个人在FLEX开发中遇到的一些问题.方便一些遇到同样问题的朋友们,能够快速的解决这些问题. 这篇笔记我会慢慢的更新,(PS:有遇到问题就往上面更….) 2015年1月4日 12:53:5 ...

  10. CORS跨域模型浅析及常见理解误区分析

    CORS跨域资源共享是前后端跨域十分常用的一种方案,主要依赖Access-Control-Allow(ACA)系列header来实现一种协商性的跨域交互. 基本模型 其中的具体流程大致可以分为以下几步 ...