使用jQuery快速高效制作网页交互特效-----JavaScript操作DOM对象

一.DOM操作分类使用JavaScript操作DOM时通常分为三类:DOM Core.HTMl--DOM和CSS-DOM 二.访问节点节点属性三.节点信息四.操作节点的属性语法: getArrtibute("属性名"):用来获取属性的值 setAttribute("属性名","属性值") :用来设置属性的值五.删除和替换节点删除和替换节点的方法六.操作节点模式 1.style属性语法: HTML元素.style.样式属性=…

使用jQuery快速高效制作网页交互特效--JavaScript操作BOM对象

JavaScript操作BOM 一.window对象: 二.window对象的属性和方法 1.windows对象的常用属性: 语法:window.属性名="属性值" 2.windows对象的常用方法: 语法:windows.方法名() 3.口的特征属性: 4.history对象的方法: 5.location对象和属性: 三.document对象 document对象的常用属性: referrer的语法:document.referrer URL 的语法: document.URLdoc…

使用jQuery快速高效制作网页交互特效---JavaScript对象及初始面向对象

一.JavaScript中的基本数据类型 number(数值类型) string(字符串类型) boolean(布尔类型) null(空类型) undefined(未定义类型) object:一种复杂的数据类型,该类型实例化的对象是一组数据和功能的集合二.创建对象对象分为两种: 自定义对象内置对象 1.自定义对象创建自定义对象的最简单的方式就是使用操作符new创建一个Object的实例,然后通过“.”为其添加属性和方法语法: var 对象名称=new …

使用jQuery快速高效制作网页交互特效--初始jQuery

一. jQuery基本概念介绍 1.1 什么是jQuery一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可学习jQuery就是学习一些方法 1.2 为什么要学习jQuerywrite less do more 1.3 jQuery的使用a.引包 b.入口函数 c.实现功能二.jQuery的用途 1.访问和操作DOM元素2.控制页面样式3.对页面事件的处理4.方便地使用JQuery插件5.与…

使用jQuery快速高效制作网页交互特效----jQuery中的事件与动画

jQuery中的事件和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现. 事件在元素对象与功能代码中起着重要的桥梁作用. 在JQuery中,事件总体分为两大类,基础事件和复合事件. 基础事件: 1.鼠标事件 2.键盘事件 3.window事件 4.表单事件复合事件 1.鼠标光标悬停 2.鼠标连续点击鼠标事件鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件常用鼠标事件的方法鼠标事件方法的区别键盘事件键盘事件是指当键盘聚焦到W…

使用jQuery快速高效制作网页交互特效

第四章:JQuery选择器 1.Jquery选择器简介 (1) Jquery中的选择器完全继承了CSS的风格,利用Jquery选择器,可以非常便捷和快速的找出特定的Dom元素,然后为他们添加相应的行为,而无需担心浏览器是否支持这一选择器,学会使用选择器是学习Jqeury的基础,Jquery的行为规则都必须在获取到元素后才能生效. 2.jquery选择器的优势 (1) 简洁的写法,$()函数 (2)支持CSS1到CSS3选择器 (3)完善的处理机制 3.选择器分类 (1) 基本选择器:通过元素id…

使用jQuery快速高效制作网页交互特效---jQuery选择器

一.什么是jQuery选择器 Query选择器继承了CSS与Path语言的部分语法,允许通过标签名.属性名或内容对DOM元素进行快速.准确的选择, 而不必担心浏览器的兼容性,通过jQuery选择器对页面元素的精准定位,才能完成元素属性和行为的处理. 二.jQuery选择器的优势 1.简洁的写法 2.完善的处理机制三.jQuery选择器的类型 1.通过CSS选择器选取元素: 基本选择器层次选择器属性选择器 2.通过过滤选择器选择元素基本过滤选择器可见性过滤选择器四.通过CSS选择器选取…

使用jQuery快速高效制作网页交互特效第一章JavaScript基础

JavaScript 一.JavaScript概念: JavaScript面向对象事件驱动具有安全性的脚本语言,面向对象 JavaScript特点: 1.解释性语言,边运行边解释 2.和HTML页面实现交互效果 3.语法类似于Java 4.一搬用于编写客户端脚本 JavaScript组成: 1.ECMAScript:脚本语言规范(标准) 2.BOM Browser Object Model浏览器对象模型 3.DOM Document Object Model文档对象模型二.JavaScript…

使用jQuery快速高效制作网页交互特效---表单校验

表单基本验证技术为什么需要表单验证减轻服务器的压力保证输入的数据符合要求常用的表单验证 1.日期格式 2.表单元素是否为空 3.用户名和密码 4.E-mail地址 5.身份证号码表单选择器表单选择器表单属性过滤选择器验证表单内容使用String对象验证邮箱文本框内容的验证校验提示特效表单验证事件和方法表单验证常用的方法的和事件正则表达式为什么需要正则表达式简洁的代码严谨的验证文本框中的内容什么是正则表达式正则表达式,又称规则表达式(英语:Regular Ex…

使用jQuery快速高效制作网页交互特效---使用jQuery操作DOM

DOM操作分类 1.DOM Core:任何一种支持DOM的编程语言都可以使用它,如getElementById() 2:HTML-DOM:用于处理HTML文档,如document.forms 3:CSS-DOM:用于操作CSS,如element.style.color=”green” jQuery中的DOM操作样式操作 1.设置和获取样式值语法: $(selector).css(name,value) 或者 $(selector).css({name:value,name:value,nam…

JQuery制作网页—— 第二章 JavaScript操作BOM对象

1.window对象: 浏览器对象模型(BOM)是javascript的组成之一, 它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HTML的交互. 它的作用是将相关的元素组织包装起来,提供给程序设计人员使用,从而降低开发人员的劳动量,提高设计Web页面的能力. BOM:浏览器对象模型(Browser Object Model):BOM提供了独立于内容的.可以与浏览器窗口进行互动的对象结构: BOM是一个分层结构: 结构: ★Window对象是整个BO…

使用jQuery快速高效制作网页特效-----------------------------之jQuery事件与动画

1.基础事件分为三个事件 1.1 window事件所谓window事件,就是当用户执行某些会影响浏览器的操作时,而触发的事件. 1.2 鼠标事件鼠标事件顾名思义就是当用户在文档上移动或单击鼠标时而产生的事件. 1.click事件: 单击鼠标时触发 $('p').click(function(){}); 2.mouseover事件: list.mouseover(function(){ $(this).css("background","pink"); }…

JQuery制作网页—— 第三章 JavaScript操作DOM对象

1. DOM:Document Object Model(文档对象模型): DOM操作: ●DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口, ●1988年,W3C发布了第一级的DOM规范,这个规范允许和操作HTML页面中的每个单独的元素,如网页的表格.图片.文本.表单元素等 2.DOM操作分类: ●使用JavaScript操作DOM时分为三个方面:…

JQuery制作网页—— 第一章 JavaScript基础

1. JavaScript(弱类型语言):是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性能的脚本语言. 特点:1.主要用来在HTML页面中添加交互行为. 2.是一种脚本语言,语法和Java类似. 3.一般用于编写客户端的脚本. 4.是一种解释性语言,边执行边解释. 2.JavaScript的组成: 组成:1.ECMAScript标准:规定了脚本语言的标准,主要描述:语法.变量和数据类型…

jquery对象和javascript的dom对象转换

Jquery框架为jquery对象定义了独立使用的方法和属性,它无法直接调用dom对象的方法,dom对象也无法直接调用jquery对象的方法和属性. Jquery对象和dom对象是可以相互转换的,因为他们所操作的对象都是dom元素,只不过jquery对象包含了多个dom元素,而dom对象本身就是一个dom元素,简单地说,jquery对象是dom元素的数组,称为类数组,而dom对象就是单个的dom元素. 1.把jquery对象转换成dom对象 (1)借助数组下标来读取jquery对象集合中的某个d…

JavaScript的DOM对象和jQuery对象的对比

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM对象'&&'jQuery对象对比</title> <script src="../jQuery库/jquery-3.3.1.js"></script> <script> // DO…

一些css3的特效 javascript的window对象定时器延时器等ing...

风车转动代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*创建动画名称*/ @keyframes rotate{ 0% { transform:rotate(0deg);/*旋转*/ /*matrix() 方法需要六个参数,包含数学函数…

JQuery操作DOM对象

1.追加节点( 儿子关系) append() $("已有元素").append("动态添加元素"); 在已有元素的内部的后面追加一个元素 appendTo() $("动态添加元素").appendTo("已有元素");在已有元素的内部的后面追加一个元素 prepend() $("已有元素").prepend("动态添加元素"); 在已有元素的内部的前面追加一个元素 p…

JQuery制作网页——第五章初识 jQuery

1.jQuery简介: ● jQuery由美国人John Resig于2006年创建 ● jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 ● 它的设计思想是write less,do more(以更少的代码,实现更多的功能): ●jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. ●jQuery是继Prototype之后又一个优秀的…

JQuery制作网页—— 第七章 jQuery中的事件与动画

1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件分类 ●基础事件鼠标事件键盘事件 window事件表单事件 ●复合事件鼠标光标悬停鼠标连续点击 2.基础事件: ●语法: 时间名=”函数名()”; 或: DOM 对象.事件名=函数 ●载入事件:在jQuery中,常用的window事件有文档载入事件,它对应的方法是ready(). ●…

Dom对象和JQuery对象的详细介绍及其区别

一直搞不清Dom对象和JQuery对象之间的区别,今天好好总结下 1.dom对象(摘抄自百度百科http://baike.baidu.com/link?url=4L8bZ7kW6kE-it4F-1LUIgaPhjuTTPIVJu9wZafjm-M7QJw5J8kkAWUpItGBb-eoEXK9-q8vwmz6funpAOfQsa) DOM—Document Object Model,它是W3C国际组织的一套Web标准.它定义了访问HTML文档对象的一套属性.方法和事件. DOM是以层次结构组织…

第八章使用jQuery操作DOM

DOM操作: jQuery中提供了一系列操作DOM强有力的方法,它们不仅简化了传统JavaScript操作DOM时繁冗的代码,更加解决了令开发者苦不堪言的跨平台浏览器的兼容. 它还让有页面元素真正动起来,动态的增减修改数据,令用户与计算机交互更加便捷,交互形式更加多样. JavaScript操作DOM时分类: DOM Core(核心) HTML-DOM CSS-DOM 样式操作设置和获取样式值: 追加样式和移除样式: addClass():追加样式,即它依旧保存原有的样式,在此基础上追加新样式…

DOM对象与JQUERY对象的相互转化

普通处理,通过标准JavaScript处理: 1 var p = document.getElementById('imooc') 2 p.innerHTML = '您好!学习jQuery才是最佳的途径'; 3 p.style.color = 'red'; 通过原生DOM模型提供的document.getElementById("imooc") 方法获取的DOM元素就是一个DOM对象,再通过innerHTML与style属性处理文本与颜色. jQuery的处理: 1 var $p =…

jQuery对象和DOM对象之间的相互转换

DOM对象:DOM(Document Object Model,文档对象模型),每一份DOM都可以表示成为一棵树,DOM对象可以使用javascript中的方法. jQuery对象:jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的. DOM对象和jQuery对象彼此之间是不能使用彼此的方法的,通过转换之后就可以了. 1. jQuery对象转成DOM对象把jQuery对象转成DOM对象之后就可以使用DOM对象的方法了.转换方式有两种,即[ind…

jQuery对象与DOM对象

jQuery对象与DOM对象是不一样的可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 通过一个简单的例子,简单区分下jQuery对象与DOM对象: <p id=”myjQuery”></p> 我们要获取页面上这个id为myjQuery的div元素,然后给这个文本节点增加一段文字:“Hello World!”,并且让文字颜色变成红色. 普通处理,通过标准JavaScript处理: var p = documen…

Jquery选择器，操作DOM

刚接触jQuery,她真的是个好东西,操作DOM,修改样式,都很方便,主要获取DOM树的类和子代很方便. 今天用jq做了tab面包屑,不过用的是别人的代码,自己修改的,不错也做出来了,原理也有些明白,不过刚接触,到时间自己些一个,今天主要删除没用的div标记. <div id="top"> <div class="a1"></div> <div class="a2"></div> <…

一周一话题之四（JavaScript、Dom、jQuery全面复习总结<jQuery篇>）

-->目录导航一. 初探Jquery 1. 介绍 2. 基础二. Jquery操作 1. jQuery页面加载 2. 选择器 3. 操作Dom 三. Jquery进阶 1. 隐式迭代与链式编程 2. RadioButton操作 3. 事件 4. 动画 5. jQuery 插件 6. Ajax 四. Jquery练习一. 初探Jquery 在BS系统开发中,Jquery的使用更加是少不了的,通过本文我们来复习一下Jquery的知识,达到温故而知新的目的. 1. 介绍 jQuery就是Java…

jQuery对象与DOM对象的互相转换

jQuery对象转换成DOM对象jQuery提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index).1.jQuery对象是一个数组对象,可以通过[index]的方法得到相应的DOM对象.jQuery代码如下:var $cr=$("#cr"); //jQuery对象var cr=$cr[0]; //DOM对象alert(cr.checked); //检测这个checkbox是否被选中了2.另一种方法是jQuery本身提供的,通过get(index)方…

jQuery学习笔记（一）--jQuery对象与DOM对象相互转换

通过标准的JavaScript操作DOM与jQuyer操作DOM的对比,我们不难发现: 通过jQuery方法包装后的对象,是一个类数组对象.它与DOM对象完全不同,唯一相似的是它们都能操作DOM. 通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短. jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素. jQuery对象转成…

Dom对象和jQuery对象的相互转化

01.jQuery对象 1.jQuery对象就是通过对jQuery包装dom对象后产生的对象. 2.虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法. 3.约定:如果获取的是 jQuery 对象, 那么要在变量前面加上 $. 02.Dom对象转化为jQuery对象对于已经是dom对象,只需要用$()把dom对象包装起来,就可以获得一个jQuery对象了.$(dom对象) 转换后就可以使用jq…

【使用jQuery快速高效制作网页交互特效-----JavaScript操作DOM对象】的更多相关文章