jquery基础总结
什么是jQuery?
就是一个JavaScript函数库,开源的。
jQuery能做什么
JavaScript是做什么的,jQuery就是做什么的,Jquery是对javascript的封装。
JQuery的特点
1、 写少做多——Write Less,Do More
2、 很好的解决了不同浏览器的兼容问题(css还是有问题的)
3、 对于不同控件具有统一的操作方式
4、 体积小,使用简单方便
5、 链式编程、隐式迭代、插件丰富、开源、免费
6、 让编写JavaScript程序更简单,更强大)
优点:
1、 轻量级
2、 强大的选择器
3、 出色的DOM操作的封装
4、 可靠的事件处理机制
5、 完善的Ajax
6、 不污染顶级变量
7、 出色的浏览器兼容性
8、 链式操作方式
9、 隐式迭代
10、 行为层与结构层的分离
11、 丰富的插件支持
12、 完善的文档
13、 开源
jQuery中的顶级对象$
$是jQuery的简写,可以用jQuery代替$
window.onload(fn)和$(document).ready(fn)的区别:
window.onload(fn) | $(document).ready(fn) |
页面完全加载完毕后才会触发 | 只要Dom元素加载完毕就触发,提高相应速度 |
每次注册新的事件都会将前面的覆盖掉 | 可以多次注册事件,最终都会执行 |
使用jQuery实现window.onload的效果:$(window).load(fn);
jQuery中提供的两个循环函数
$.map(array,callback(element,index));对于数组array中的每个元素,调用回调函数,返回一个新的数组,原数组不变
element:当前循环的数组元素
Index:当前下标
$.each(array,fn)
遍历数组,return false退出循环
使用this表示当前元素的值
$.trim(字符串) 去掉两端的空格
jQuery对象和Dom对象的转换
Dom对象转换为jQuery对象:$(Dom对象)
jQuery对象转换为Dom对象:$(Dom对象).get(0);$(Dom对象)[0];
jQuery选择器
Id选择器:$('#id');
标签选择器:$('input'); $('*')获取页面上的所有元素
属性过滤选择器:$('input[name=gender]')
类样式选择器:$('.cls');
标签+类选择器:$('div.cls');
多条件选择器:$('p,div,span.menuitem')//同时选择p标签、div标签和拥有menuitem样式的span标签元素
层次选择器:$('div li')//div下的所有li元素(所有)
$('div>li')//div下直接li子元素
$('.menuitem+div')//样式为menuitem之后的相邻的第一个div元素 = $('.menuitem').next('div')
$('.menuitem~div')//样式为menuitem之后的所有的兄弟div元素 = $('.menuitem').nextAll('div')
基本过滤选择器::first选取第一个元素 $('div:first')
:last选取最后一个元素 $('div:last')
:not选取不满足选择器条件的元素 $('input:not(.cls)')
:even选取索引是偶数
:odd选取索引是奇数
$(':header')选取所有的h1——h6元素
$('div:animated')选取正在执行动画的<div>元素
属性过滤选择器:$('div[id]')//选取有id属性的div
$('div[title=test]')//title属性等于test
$('div[title!=test]')//title属性不等于test或没有title属性
$('input[name^=n]')//name属性以n开头
$('input[name$=n]')//name属性以n结尾
$('input[name*=n]')//name属性包括n
表单对象属性过滤器:$('#form1:enabled')//选取id为form1的表单内所有启用的元素
$("#form1 :disabled")//选取id为form1的表单内所有禁用的元素
$("input:checked”)//选取所有选中的元素(Radio、CheckBox),这个中间不能加空格.
$("select :selected")选取所有选中的选项元素
表单选择器:$(':input')//选取所有的input、textarea、select、button
$(':text')//与$('input[type=text]')差不多,但有一定的区别
$('textarea')//错误
可见性过滤器::hidden
内容过滤器::contains(text)//包含指定文本的元素
:empty//不包含元素或者文本的元素
:has(input)//包含指定元素的元素
:parent//作为父元素的元素
子元素过滤器: $('ul li:first');//只返回一个li元素
$('ul li:first-child’);//为每个父元素ul都返回一个li
:only-child,匹配当前父元素中只有一个子元素的元素
:nth-child(3n),选取3的倍数的元素
:nth-child(3n+1),满足3的倍数+1的元素
.children()方法,只考虑子元素,不考虑后代元素
链式编程
注意:$('div').html('值').val('值')可以
$('div').html().val('值')不可以
括号中没有值的时候是获取值,获取值返回的是获取的字符串而不是对象,所以不能链式编程
end()方法可以恢复链被破坏前的情况
toggleClass('cls')切换样式的显示
hasClass('cls')判断是否应用了某样式
$('p:eq(0)')代表的是第一个元素
$('p:lt(2)')前两个,索引为2之前的
$('p:gt(2)')表示的是后两个
获得兄弟元素的几个方法
next();//当前元素之后的紧邻着的第一个兄弟元素
nextAll();//当前元素之后的所有兄弟元素
prev();//当前元素之前的紧邻着的兄弟元素
prevAll();//当前元素之前的所有兄弟元素
siblings();//当前元素的所有兄弟元素
jQuery的迭代(包装集)
if($('#btn').length<=0)
{
alert("id为btn的元素不存在!");
}
jQuery的Dom操作
$('a:first').html('hello');
$('a:first').text('hello');
$('a:first').attr('href','http://www.baidu.com');
$('a:first').removeAttr('class');删除属性
$('a:first').attr('class','');属性还有
动态创建Dom节点
$("<a href='http://www.baidu.com'>百度</a>").appendTo('body');
$('body').append("<a href='http://www.baidu.com'>百度</a>");
prepend,在元素的开始添加元素(第一个子节点)。增加元素开始(儿子)
after:在元素之后添加元素(添加兄弟)增加元素后面(兄弟)
before:在元素之前添加元素(添加兄弟)增加元素前面(兄弟)
(*)A.insertBefore(B);将A加到到B的前面,等同于B.before(A);
(*)X.insertAfter(Y);将X加到到Y的后面,等同于Y.after(X);
empty()清空某元素下的所有子节点
remove()删除当前元素,返回值为被删除的元素
clone()克隆节点
$('br').replaceWith('<hr/>');用<hr/>替换br
$('<br/>').replaceAll('hr');用<br/>元素替换所有的hr
jquery基础总结的更多相关文章
- jQuery基础课程
环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
- JQuery基础总结上
最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...
- jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- 【jQuery基础学习】09 jQuery与前端(这章很水)
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
- 【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
- 8、网页制作Dreamweaver(jQuery基础:安装、语法)
在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...
- jquery 基础汇总---导图篇
最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...
- jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- python数字图像处理(7):图像的形变与缩放
图像的形变与缩放,使用的是skimage的transform模块,函数比较多,功能齐全. 1.改变图片尺寸resize 函数格式为: skimage.transform.resize(image, o ...
- C语言操作符优先级
C语言操作符优先级 优先级 运算符 含 义 要求运算 对象的个数 结合方向 1 () [] -> . 圆括号 下标运算符 指向结构体成员运算符 结构体成员运算符 自左至右 2 ! 逻辑非运 ...
- 从0开始学Java——@override的作用
早上跟着<jsp&Servlet学习笔记>来学习jsp,在使用eclipse创建了一个servlet类之后,发现自动创建的类和书上相比,doGet方法的前面少了@override, ...
- 20145208 实验五 Java网络编程
20145208 实验五 Java网络编程 实验内容 1.用书上的TCP代码,实现服务器与客户端. 2.客户端与服务器连接 3.客户端中输入明文,利用DES算法加密,DES的秘钥用RSA公钥密码中服务 ...
- 详解.NET IL代码
一.前言 IL是什么? Intermediate Language (IL)微软中间语言 C#代码编译过程? C#源代码通过LC转为IL代码,IL主要包含一些元数据和中间语言指令: JIT编译器把IL ...
- SVN技术交流提纲
SVN技术交流提纲:http://lazio10000.github.io/tech/SVN/#/bored
- mac使用笔记
1.QQ多开 MAC中登录QQ后按CMD+N组合按键即可新打开一个QQ登录窗口 2.关闭左右摇晃鼠标放大 系统偏好设置>辅助功能>显示器,去掉“摇动鼠标以定位”前面的勾即可 3.使用ctr ...
- 百度地图 IOS版开发经验分享
最近刚完成app中地图的应用,感觉非常的曲折,折腾了很久,刚才开始一直不能成功使用百度地图api,报一大堆的错误,后来换到高德地图,又发现服务端使用的百度的经纬度,又从高德换回百度,泪奔. 这里简单比 ...
- node 大牛的blog
node一些基本的核心包的使用 http://cnodejs.org/topic/548e53f157fd3ae46b2334fd node的基本的三种框架的比较 http://cnodejs.o ...
- 第一章 : javaScript框架分类及主要功能
从内部架构和理念划分,目前JavaScript框架可以划分为5类. 第一种是以命名空间为导向的类库或框架,如果创建一个数组用new Array(),生成一个对象用new Object(),完全的j ...