jQuery总结---版本一
day01---
jQuery是一个函数库,简化了DOM操作,屏蔽了浏览器兼容性问题。函数分为4类
(1)DOM操作
(2)事件处理
(3)动画
(4)AJAX
jQuery3的新特性有哪些?
1. 移除旧的IE工作区
2. jQuery 3.0运行在Strict Mode下
3. 引进for...of循环
4. 动画方面采用新的API
5. 对包含特殊含义的字符串提供转义的新方法
6. 类操作方法支持SVG
7. 延迟对象现在与JS Promises兼容
8. jQuery.when()对于多种参数的不同解读
9. 新的显示/隐藏逻辑
10. 对于防止XSS攻击的额外保护
2.jQuery函数的特点
(1) $或者jQuery是一个函数,返回值是一个jQuery类数组对象
(2)即使没有查找到需要的元素,jQuery类数组对象也不会是null/undefined,调用jQuery函数不会报错!
(3)jQuery类数组对象提供的函数都自带for循环遍历每个查找到的元素
(4)jQuery函数底层都是DOM操作,所以可和原生的DOM操作组合使用
(5)原生DOM对象不能调用jQuery提供的函数;jQuery函数返回的类数组对象也不能调用核心DOM成员
(6)原生DOM对象和jQuery对象间如何转换:
原生DOM对象封装到一个jQuery类数组对象
$(domObject)
jQuery类数组中取出封装的DOM对象:
$('button')[index]
(7)jQuery对象方法的返回值一般还是当前选定的类数组对象,可以实现“链式调用”
1.常用核心DOM操作
(1)查找元素方法
document.getElementById("id");
document.getElementsByName("uname");//根据name属性名获取
document.getElementsByTagName("p")//获取所有的p元素
document.getElementsByClassName("className");//根据类名获取元素
document.querySelector("选择器");//根据选择器选择单个元素
document.querySelectorAll("选择器");//根据选择器选择所有匹配元素
(2)遍历节点
node.parentNode
parent.childNodes(节点树) parent.children(元素树)
node.nextSibling node.previousSibling node.nextElementSibling node.previousElementSibling
(3)修改元素属性
element.getAttribute("属性名");
element.setAttribute("属性名","属性值");
(4)修改元素内容
element.innerHTML
element.innerText/element.textContent
(5)修改元素样式
element.style.color="red";
element.className="btn btn-danger";//通过类名来增加样式
(6)修改表单元素属性值
inputElement.value="值";
(7)添加新元素
var newElement= document.createElement("div");
parent.appendChild(newElement);
(8)删除已有元素
parent.removeChild(node)
(9)替换旧元素
parent.replaceChild(oldChild,newChild)
(10)元素克隆
parent.cloneNode();
jQuery操作
jQueryDOM操作——查找节点
jQuery('选择器') =》 类数组对象
基本选择器:
#id、.class、div、*、button,.btn
层级选择器:
parent child
parent > child
prev + next
prev ~ siblings
基本过滤选择器:
:first :last :eq(i) :gt(i) :lt(i)
:odd :even :not(selector)
子代过滤选择器:
:first-child :last-child :nth-child(i)
:nth-child(odd) :nth-child(even)
属性选择器:
[attr="value"]
可见性选择器:
:visible :hidden
内容选择器:
:contains(txt) :has(selector)
:empty :parent
表单元素选择器:
:text :radio :submit
:disabled :enabled :checked :selected
核心DOM操作和jQuery操作对比
1.操作元素的属性
<a href="" title="" data-toggle="dropdown">
核心DOM:
element.getAttribute('title')
element.setAttribute('title', 'abc')
jQuery:
var value = $(..).attr('title') //读取属性的值
$(..).attr('title', 'abc') //设置属性的值
提示:读取和设置元素的data-*扩展属性,可以使用attr()方法,也可以使用data()方法,如: <a data-my-target="1.jpg">
var v = $(...).data('my-target') //读取
$(...).data('my-target', '2.jpg') //设置
2.操作元素的内容
核心DOM:
var h = element.innerHTML;
element.innerHTML = h;
var t = element.innerText/textContent;
element.innerText/textContext = t;
jQuery:
$(..).html( ) //读取innerHTML
$(..).html( 'html' ) //设置innerHTML
$(..).text( ) //读取innerText
$(..).text( 'txt' ) //设置innerText
3.操作元素的样式
核心DOM:
var c = element.style.color //读取行内样式
element.style.color = 'red' //设置行内样式
var n = element.className //读取ClassName
element.className = n //设置ClassName
jQuery:
$(..).css('color') //读取指定样式的值
$(..).css('color', 'red') //设置行内样式
$(..).addClass('alert') //添加一个class
$(..).removeClass('alert') //删除一个class
$(..).hasClass('alert') //判断选定元素是否具有指定class
4.操作表单元素的值
核心DOM:
var v = input.value //读取值
input.value = 'v' //设置值
jQuery:
$(...).val( ) //读取值
$(...).val('value') //设置值
面试题:在操作元素的相关属性时,使用attr()、val()、prop()、data()有何区别?
attr()一般只用于操作元素的HTML字面属性,如src、href、name...
val()操作的是HTML元素对应的JS对象的value属性
prop()操作的是HTML元素对应的JS对象的disabled、readyonly、selected、checked等Boolean类型属性
data()操作的是HTML元素对应的JS对象的扩展数据属性(对象缓存数据),而attr('data-xx')读取/修改的HTML元素字面属性
5.遍历DOM树上的节点
核心DOM:
element.parentNode //寻找父节点
element.childNodes/children //获取子节点
elemnet.nextSibling //获取下一个兄弟
element.previousSibling //获取上一个兄弟
jQuery:
$(..).parent() //返回选定元素的父节点
$(..).children() //返回所有子节点
$(..).next() //返回下一个兄弟
$(..).prev() //返回上一个兄弟
$(..).siblings() //返回所有的同辈兄弟
6.添加新的元素
核心DOM:
var li = document.createElement('li') //创建子节点
//修改li的属性.... //设置其属性
ul.appendChild( li ); //添加到父节点
jQuery:
var li = $('<li class="item">内容</li>') //创建子节点
//li.click(fn)
$('ul').append( li ); //在父节点最后追加子节点
$(li).appendTo( 'ul' ) //子节点追加到父节点最后
-------可以简写为------------------------------
$('ul').append( '<li class="item">内容</li>' )
7.删除已有的元素
核心DOM:
ul.removeChild( li ) //由父元素删除孩子
jQuery:
$('li').remove() //删除当前选定元素
8.替换已有元素
核心DOM:
parent.replaceChild(oldChild, newChild);
jQuery:
$('oldChild').replaceWith( newChild ) //已有节点用新节点替换,返回被删除的旧节点
$('newChild').replaceAll( oldChild ) //新节点替换所有的旧节点,返回新节点
9.克隆节点
核心DOM:
var copy = element.cloneNode( )
jQuery:
var copy = $(..).clone() //返回选定元素的副本
var copy = $(..).clone(copyListener) //参数指示是否复制选定元素绑定的监听函数,默认为false,不复制监听函数
jQuery总结---版本一的更多相关文章
- jquery各版本区别
jquery版本区别: 1.3一般功能够 1.4.2一般功能够而且稳定 1.7+比较新特性 2不支持老IE 兼容的话最好选 1.x.稳定性就用1.7或者1.4,其中1.4的体积相对 ...
- [转]jQuery不同版本区别
原文转载自csdn:http://blog.csdn.net/u010167032/article/details/23666145 了解不同版本之间的差异,与助于选择适合自己项目的版本. ⒈4重要新 ...
- Jquery各个版本的区别
一: 一般原则是越新越好,jQuery版本是在不断进步和发展的,最新版是当时最高技术水平,也是最先进的技术理念. 但个人的角度来看.是最新版本x.x.0的上一版本最好.比如说1.10.0版,上一版本是 ...
- jQuery的版本兼容问题
之前在做头像上传的时候,使用的jQuery是1.8.2的版本,然后头像上传做完后,发现项目用的jQuery版本是3.3.1的.由于两个版本的差距太大了.所以兼容很差. 3.3.1不支持剪切头像的某些函 ...
- jquery()后续版本中,live()取消后使用on()实现功能写法
今天做项目想用live()功能,写完打开浏览器发现报错 然后查了查发现自己用的是jquery是jquery-2.1.1.min.js,而jquery早就取消了live()方法,在后续版本里都已经没有使 ...
- jquery所有版本下载外链地址
jquery-2.1.1 (注!jquery-2.0以上版本不再支持IE 6/7/8) 百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况) 百度压缩版引用地址: <script src= ...
- Jquery各版本下载
jquery-2.1.4 (注!jquery-2.0以上版本不再支持IE 6/7/8) 百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况) 百度压缩版引用地址: <script src= ...
- jquery全部版本
http://www.jb51.net/zt/jquerydown.htm 这个地方实时更新jquery版本
- jQuery各版本CDN
jquery-2.1.1 注:jquery-2.0以上版本不再支持IE 6/7/8)百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况) 百度压缩版引用地址:<script src=”ht ...
- angularjs1+requirejs+ bootstrap+ jQuery低版本配合兼容ie8+浏览器
angularjs兼容低版本IE浏览器(IE8)angularjs在1.3之后的版本都是选择放弃对IE8及更低IE版本的支持,但是就目前的开发形式来看,IE8的使用客户还是蛮多的,最近有个项目要求尽量 ...
随机推荐
- 一些IO流的知识
IO流: 输入流:输出流: 字节流:字符流:为了处理文字数据方便而出现的对象. 其实这些对象的内部使用的还是字节流(因为文字最终也是字节数据) 只不过,通过字节流读取了相对应的字节数,没有对这些字节直 ...
- 【转载】32复用时钟AFIO开启情况
原文:http://blog.csdn.net/u012411027/article/details/44217313 百度了很多结果,打开看几乎全是下面这篇文章,真是天下文章一大抄啊.我也抄一下吧. ...
- 架构设计之Spring-Session分布式集群会话管理
前言 通常在web开发中,回话管理是很重要的一部分,用于存储与用户相关的一些数据.对于JAVA开发者来说,项目中的session一般由Tomcat或者jetty容器来管理. 特点介绍 尽管使用特定的容 ...
- Google Firebase Unity接入的坑
就说跑demo碰到的坑吧 https://firebase.google.com/docs/unity/setup 这是Firebase Unity的setup指南 大概写写步骤: 1. Fireba ...
- C语言学习第四章
今天学习C语言循环结构,为什么要用循环呢?因为有时候我们对一堆的数字进行重复的处理的时候要重复的编写一些相同或者差不多的代码,让程序显得很臃肿,而且写着也麻烦,如果用循环来写的话能简化很多,出错的话也 ...
- MAC系统操作指令汇总
OSX 的文件系统 OSX 采用的Unix文件系统,所有文件都挂在跟目录 / 下面,所以不在要有Windows 下的盘符概念. 你在桌面上看到的硬盘都挂在 /Volumes 下. 比如接上个叫做 US ...
- 请为main函数提供返回值
很多人甚至市面上的一些书籍,都使用了void main( ) ,其实这是错误的.C/C++ 中从来没有定义过void main( ).C++ 之父 Bjarne Stroustrup 在他的主页上的 ...
- linux中移动光标
ctrl + e 光标 移动到 行尾 ctrl + a 光标 移动到 行首
- Typecho - MyTagCloud标签云插件
一.前言: 标签云是博客.CMS类系统的常见功能,读者可以根据标签快速的查找和浏览自己喜欢的文章.个人很喜欢Typecho的简洁,但对于后台不能控制前台标签栏目的显示还是略表遗憾.令人高兴的是Type ...
- angularjs 自定义filter
过滤器(filter)-----过滤器的主要用途就是一个格式化数据的小工具,一般用于服务端存储的数据转换为用户界面可以理解的数据 <!DOCTYPE html> <html> ...