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中提供的两个循环函数
1 $.map(array,callback(element,index));对于数组array中的每个元素,调用回调函数,返回一个新的数组,原数组不变 2 element:当前循环的数组元素 3 Index:当前下标 4 $.each(array,fn) 5 遍历数组,return false退出循环 6 使用this表示当前元素的值 7
$.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
转载于:https://www.cnblogs.com/wolf-sun/p/3205619.html
jquery基础总结相关推荐
- 【Java Web开发指南】JQuery基础笔记
文章目录 JQuery 基础: 1. JQuery 基础:1. 概念2. 快速入门3. JQuery对象和JS对象区别与转换4. 选择器5. DOM操作6. 案例 JQuery 基础: 1. 概念: ...
- Jquery基础之DOM操作
Jquery基础之DOM操作 Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DO ...
- Ajax、jQuery基础入门视频教程
关注公众号,免费获取资料 本视频是Ajax和jQuery基础入门视频,该视频针对接触过javaScript基础的学员录制,授课讲究通俗易懂.通过该视频的学习,相信您能够轻轻松松地掌握Ajax和jQue ...
- jQuery小测试系列之jQuery基础知识
日期:2012-4-17 来源:GBin1.com 这是jQuery小测试系列第一部分:基础知识. 来源:jQuery小测试系列之jQuery基础知识
- JQuery-学习笔记04【基础——JQuery基础案例】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- JQuery-学习笔记01【基础——JQuery基础】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- 06 Jquery 基础
06 Jquery 基础 前端学习之jquery: jQuery:一个库 Jquery的基础语法: $(selector).action() 基本选择器: <script>//基本选择器/ ...
- java与jquery的选择器区别_java day44【JQuery 基础:概念,快速入门,JQuery对象和JS对象区别与转换,选择器,DOM操作,案例】...
第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...
- java jquery基础_day20:JQuery基础(超系统的JavaWEB全套教程)
今日内容 1.JQuery 基础: 概念 快速入门 JQuery对象和JS对象区别与转换 选择器 DOM操作 案例 JQuery 基础: 1.概念: 一个JavaScript框架.简化JS开发 jQu ...
- 《jQuery基础》总结
目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的<jQuery基础>(jQuery Fundamentals).这本书虽然是入门教材,但也足足有100多页.我 ...
最新文章
- python大佬养成计划----flask_sqlalchemy操作数据库
- WeX5 -- xcode7+iphone免费帐号打包详解
- linux bash shell for 循环使用简介
- vue的指令绑定、事件、冒泡
- reverseinverse
- ansible自动化部署(一)
- asp.net发布网站的详细步骤
- ipad导入pdf_Ipad笔记法①日常笔记篇
- HTML5---2.语义化标签的兼容性问题以及解决方案
- 计算机软件系统包括选择题,青书学堂: (单选题) 计算机软件系统包括 ( )(本题2.0分)...
- 学习笔记-大数据之路-数据模型篇-建模综述
- 2021-07-02
- html字幕精灵图标,视频加字幕精灵
- Java爬取喜马拉雅非付费音频【优化】
- 异步时间扭曲(Asynchronous Timewarp简称ATW)一种生成中间帧技术
- 鹏业BIM三维安装算量软件一次购买还是收年费
- idea复制项目导致sources root复用了另一个项目
- 计算机中汉字的顺序有什么排列,汉字演变过程的时间排序是什么?
- 高等数学 宋浩 笔记一
- matlab死亡时间推测实验,尸检——关于死亡时间推测的基本手法及操作方式