jQuery-3~5章

JQuery003-JQuery中的DOM操作

jQuery中的DOM操作：

1、查找节点

A．查找元素节点

B． 查找属性节点

var s1 = $("ul li:eq(1)");

var li_txt = s1.txt();

alert(li_txt);

var $para = $("p");

var p_txt = $para.attr("title");

alert(p_txt);

2、创建节点

为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。
      var box =
$('<div id="box">节点</div>'); //创建一个节点
     
$('body').append(box); //将节点插入到<body>元素内部

创建元素节点

创建文本节点

var s1 =
$("<li></li>"); // 创建第一个li元素

var s2 =
$("<li></li>"); // 创建第二个li元素

3、插入节点

在创建节点的过程中，其实我们已经演示怎么通过.append()方法来插入一个节点。但除了这个方法之余呢，jQuery 提供了其他几个方法来插入节点。

 
 

4、删除节点

remove()方法

detach()

empty()方法

从DOM节点中删除所有匹配的元素，传入的参数作用于根据jQuery表达式来筛选元素。

$('div').remove(); //直接删除 div 元素
注意：.remove()不带参数时，删除前面对象选择器指定的元素。而.remove()本事也可以
带选择符参数的，比如：$('div').remove('#box');只删除 id=box 的 div。

和remove()方法一样是从DOM中去掉所有匹配的元素。这个方法不会吧匹配的元素从jQuery对象中删除，因而可以在将在再使用这些匹配的元素。所有绑定的事件，附加的数据等都会保留下来。

清空节点而不是删除节点。

5、复制节点

可以使用clone()方法来实现。

6、替换节点

replaceWith()

replaceAll()

将所有匹配的元素都替换成HTML或者DOM元素

颠倒了replaceWith()操作，其作用和功能和replaceWith()是一样的。

7、包裹节点

wrap()方法：该方法对于要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。

jQuery 提供了一系列方法用于包裹节点， 那包裹节点是什么意思呢？其实就是使用字符串代码将指定元素的代码包含着的意思

 
 

8、属性操作

用attr()方法来获取和设置元素属性

用removeAttr()来删除元素属性

如果要获取<p>元素的属性title，只需给attr()方法传递一个参数—属性名称

如下代码

$("p").removeAttr("title");
//删除<p>元素的属性title

9、样式操作

获取class和设置class都可以使用attr()方法来完成

var p_class =
$("p").attr("class");

追加样式：addClass()方法

10、           
设置和获取HTMl、文本和值

html()方法

text()方法

val()方法

该方法类似于JS中的innerHTML属性

该方法类似于JS中的innerText属性，可以用来读取或者设置某个元素中的文本内容

该方法类似于JS中的value属性，可以用来设置和获取元素的值

11、           
遍历节点

children()

用于取得匹配元素的子元素集合

next()

用于取得匹配元素后面邻近的同辈元素

prev()

取得匹配元素前面紧邻的同辈元素

sibling()

取得匹配元素前后所有的同辈元素

closest()

取得最近的匹配元素

parent()
,parents() , closest()三个方法的区别

12、           
CSS-DOM操作

几种经常使用的方法

offset()

获取元素在当前视窗的相对便宜。返回对象包含两个属性：top和left。只对当前元素有效

position()

获取元素相对于最近一个position样式属性设置为realitive或者absolute的祖父节点的相对便宜，和offset()一样，返回对象包含两个属性top和left

scrollTop()

获取元素滚动条距离顶端的距离

scrollLeft()

获取元素滚动条距离左侧的距离

JQ004-jQuery中的事件和动画

一、          
jQuery中的事件

1、加载DOM

JS的onload事件只能保存对一个函数的引用，后面的会自动覆盖前面的函数。而jQuery的ready()方法可以很好的处理这个问题。调用$(document).ready()方法都在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。如下代码：

 

简写：如下

一般写法

简单写法
   

2、事件绑定

使用band()方法来进行对匹配元素进行特定事件的绑定。调用格式如下

bind( type [,
data ] , fn );

bind()方法有三个参数：

事件类型：如：blur , focus , load , resize , scroll ,
unload , click , dbclick , mousedown , mouseup , mousemove , mouseover ,
mouseenter , mouseleave , change , select , submit , keydown , keypress ,
keyup , error等

可选参数，作为event.data属性值传递给事件对象的额外数据对象

用来绑定的处理函数

怎么用css样式把相应的内容隐藏起来？？

使用：display:none;

 

简写事件绑定：

 

3、合成事件

jQuery有两个合成的事件。类似于之前的ready()事件。hover()  toggle()方法都书序jQuery自定义的方法：

hover()

toggle()

用于模拟光标悬停事件，光标悬停在特定元素上时，触发事件

语法结构：toggle(fn1 , fn2 , fn3 , ……fnN);

该方法用于模拟鼠标连续单击事件，第一次单击元素触发指定的第一个函数，以此类推。

4、事件冒泡

从里往外执行。

事件冒泡会带来问题，要如何停止事件冒泡：

 

事件捕获：从外往里执行

5、事件对象的属性

jQuery在遵循w3c规范的情况下，对事件对象的常用属性进行了封装，使得事件在各大浏览器中都可以正常运行，而不需要进行浏览器类型判断。

event.type

event.preventDefault()方法

event.stopProgation()方法

event.target

获取到事件类型

阻止默认的事件行为

阻止事件的冒泡

获取到触发事件的元素

event.relatedTarget

event.pageX和event.pageY方法

event.which

event.metaKey

用来访问mouseover和mouseout的相关元素

获取光标对于页面的x坐标和y坐标（如果页面中有滚动条，要加上滚动条的宽度和高度）

获取到鼠标单击事件中获取到鼠标的左中右事件，在键盘事件中的键盘按键

为键盘事件中获取<ctrl>键

6、移除事件

unbind()方法。

参数类型如下：

没有参数：移除所有事件

有参数：移除该类型事件

把绑定时传递的处理函数作为第2个参数，则这个特定参数被删除

7、模拟操作

trigger():完成模拟触发操作。

$(‘#btn’).trigger(“click”);      模拟点击事件

$(‘#btn’).
click();  简写

自定义触发事件：

$('#btn').bind("myClick"
, function(){

$('#test').qppend("<p>
myClick <p>");

});

$(‘#btn’).trigger(“myClick”)

如果只想触发绑定的focus事件不想触发浏览器默认事件，可以使用triggerHandler()方法。

$(“input”).triggerHandler(“focus”);

8、其他用法

bind()方法不经能够为元素绑定浏览器支持的具有相同名称的事件，也可以绑定自定义事件。此外bind()方法还能做很多事情。

1、绑定多个事件类型 （可以一次性绑定多个事件类型）

$(function(){

$("div").bind("mouseover
mouseout", function(){

$(this).toggleClass("over");

});

});

当光标移动到div时，该元素的class切换为over

2、添加事件命名空间，便于管理（为元素绑定的多个事件类型用命名空间规范起来）

$(function(){

$("div").bind("click.plugin",
function(){

$("body").append("<p>
click 事件 <p>");

});

$("div").bind("mouseover.plugin",
function(){

$("body").append("<p>
mouseover 事件 <p>");

});

$("div").bind("dbclick ",
function(){

$("body").append("<p>
dbclick 事件 <p>");

});

$("button")click(function(){

$("div")unbind(".plugin");

});

});

3、相同事件名称，不同命名空间执行方法

$(function(){

$("div").bind("click",
function(){

$("body").append("<p>
click 事件 <p>");

});

$("div").bind("click.plugin",
function(){

$("body").append("<p>
click. plugin 事件 <p>");

});

$("button").click(function(){

$("div")trigger("click!");

});

});

注意最后一个click后面的感叹号！。它的作用是：匹配所有不包含在命名空间中的click方法。

 

二、          
jQuery中的动画

1、show() 和 hide() 方法

show() 和hide() 方法

相当于css的display：none或者inner、block、innerblock

让show() 和hide() 方法动起来

修改元素的属性：高度宽度和不透明度

可以为他们 一个速度参数：slow

$("element").show("slow");

关键字还有normal 和 fast（事件长度分别为：600毫秒、400毫秒、200毫秒）。可以直接填写时间数据，单位为毫秒：

$("element").show(1000);

2、fadeIn() 和 fadeOut()
方法

这两个方法值改变元素的不透明度，淡入，淡出

3、dlideUp() 和
dlideDown() 方法

只改变元素的高度

4、自定义动画方法animate()

语法结构为: animate(params, speed, callback);

参数说明如下:

1、params:一个包含样式属性及值的映射

2、speed 速度参数，可选

3、callback 在动画完成时执行的函数，可选

累加累减动画

$(this).animate({left:"+=100px"},
100)  //在当前位置累加100px

多重动画

$(this).animate({left:"+=100px"},
100)

.animate({height:"+=200px"},
100);

综合动画

$(function(){

$("#panel").css("opacity","0.5");

$("#panel").click(function(){

$(this).animate({left:"+=100px",
height:"+=200px", opacity:"1"}, 3000)

.animate({top:"+=200px",
width:"+=100px"}, 3000)

.fadeOut(5000)

.fadeIn(5000)

});

});

5、动画回调函数

如果最后面只是想改css样式，而不是要让动画淡入或者淡出。但是css样式方法并不会加入到队列中，而是立即执行。可以对css样式使用函数回调方法。如下代码：

$(function(){

$("#panel").css("opacity","0.5");

$("#panel").click(function(){

$(this).animate({left:"+=100px",
height:"+=200px", opacity:"1"}, 3000)

.animate({top:"+=200px",
width:"+=100px"}, 3000, function(){

$(this).css("border",
"5px solid blue");

})

});

});

6、停止动画和判断试够处于动画状态

使用stop()方法。

该方法有两个可选参数：clearQueue和gotoEnd。都为boolean值

clearQueue

表示是否要清空未完成的队列

$("#panel").hover(function(){

$(this).stop()

.animate({height:
"150", width:"300"}, 2000);

},function(){

$(this).stop()

.animate({height:"22",
width:"60"},3000);

});

gotoEnd

表示是否当即停止动画

判断元素是否处于动画状态。

if(!$(element).is(“:animated”)){

//如果当前没有动画则添加新动画。

}

动画延迟操作：

使用delay()方法

7、其他动画方法

四个用于交互的动画方法：

toggle(speed,
[callback])

切换元素的可见状态，如果是可见的切换为隐藏的，如果是隐藏的切换成可见的。

slideToogle(speed,
[easing], [callback])

通过高度变化来切换陪陪元素的可见性，通过高度变化来改变。（只调整元素的高度）

fadeTo(speed,
opacity, [callback])

把元素的不透明度以渐进方式调整大指定的值。（只调整元素的不透明度）

$(this).fadeTo(6000,0.2);  //参数：事件，透明度

fadeToggle(speed,[easing],
[callback])

通过不透明度变化来切换匹配元素的可见性（只调整元素的不透明度）

8、动画方法概括

方法名

说明

hide()  show()

同时修改多个样式属性：高度、宽度、不透明度

fadeIn()  fadeOut()

只改变不透明度

sildeUp()  slideDown()

只改变高度

fadeTo()

只改变不透明度

toggle()

用来代替hide()和show()方法，会同时修改多个属性

slideToggle()

用来代替sildeUp() 和
slideDown() 方法，所以只改变高度

fadeToggle()

用来代替fadeIn()和fadeOut()方法，所以只改变宽度

animate()

自定义动画方法（可以用来代替所有其他动画方法方法）

 

jQuery-3~4章的更多相关文章

  1. jQuery第十一章

    第十一章 一.jQuery性能优化 1.使用最新版本的jQuery类库. 2.使用合适的选择器 (1)$(“#id”) :使用id来定位DOM元素是最佳提高性能的方式. (2)$(“p”) :标签选择 ...

  2. jQuery系列 第二章 jQuery框架使用准备

    第二章 jQuery框架使用准备 2.1 jQuery框架和JavaScript加载模式对比 jQuery框架的加载模式 <script> window.onload = function ...

  3. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  4. jQuery第七章插件的编写和使用

    1.本章目标 编写jquery插件 2.插件 也称为扩展,是一种按照一定的规范的应用程序接口编写出来的程序 插件的目标是给已有的一系列函数做一个封装,以便在其他的地方复用,方便维护和开发效率 3.jq ...

  5. jQuery 第六章 jQuery在Ajax应用

    1.本章目标 ajax 2.ajax 异步刷新技术,我们的网页不需要全部刷新,按需实现局部刷新,上线后台的交互 用户体验好 地图,前台验证,表单提交,修改,查询等等 原生的js和ajax packag ...

  6. jquery 第四章

    1.回顾 节点.append(内容) 节点.prepend(内容) 节点.remove() 节点.attr("属性","值") 节点.css("样式& ...

  7. jquery 第三章

    1.回顾$(document).ready(function(){    })$(function(){    }) ID选择器.类选择器.元素选择器层次选择器:空格(上文下:tr td{})属性过滤 ...

  8. 好记心不如烂笔头之jQuery学习,第一章

    jQuery对象和DOM对象的转换: 1.jquery对象是对象数组,于是乎: var $cr = $('#cr'); var cr = $cr[0]; 2.使用jquery的自带函数: var $c ...

  9. jQuery第六章

    jQuery与Ajax应用 一.Ajax的优势和不足 1.Ajax的优势: (1)不需要插件支持:不需要任何浏览器插件就可以被绝大多数浏览器支持 (2)优秀的用户体验:能在不刷新整个页面的前提下更新数 ...

  10. jQuery第五章

    jQuery对表单.表格的操作以及更多应用 一.表单应用 1.单行文本框应用 (1)获取和失去焦点改变样式 HTML代码如下: <form action="#" method ...

随机推荐

  1. Oracle 11g 单实例安装文档

    这里介绍在Red Hat Enterprise Linux Server release 5.7 (Tikanga)下安装ORACLE 11.2.0.1.0的过程,本文仅仅是为了写这样安装指导文档而整 ...

  2. php CGI、Fastcgi、PHP-FPM的详细介绍与之间的关系

    以下PHP CGI.Fastcgi.PHP-FPM的一些信息归纳和汇总----->详细介绍与之间的关系 一:CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的 web ...

  3. 机器学习实战笔记(Python实现)-02-决策树

    --------------------------------------------------------------------------------------- 本系列文章为<机器 ...

  4. BOOST.Asio——扫盲

    以下内容来自互联网. 鉴于版权之类的东西,我只贴出标题和URL. (无法考证下述资料是否原创.) asio串口编程                                            ...

  5. spf13-vim安装与使用

    一.简介 spf13-vim是Vim插件与配置的一个发行版本,包含了一整套精心挑选的Vim插件,采用Vundle进行插件管理,并且可以通过下列文件进行个性化配置 ~/.vimrc.local #个性化 ...

  6. 【转】What is an SDET? Part 2 – Skill Matrix of SDET

    What is an SDET? Part 2 ---- Skill Matrix of SDET (Instead of naming it as part 2 of What is an SDET ...

  7. Centos下yum安装PHP

    添加 yum 源 Centos 6.x 的源 # rpm -Uvh http://download.fedoraproject.org/pub/epel/6/x86_64/epel-release-6 ...

  8. 关于JS的编码转换问题

    在进行JS开发过程中,尤其是在开发报表时,报表已集成到Web页面中,通过在页面传递参数至报表中时,会发现有时某些参数值,传递到报表中是显示为问号或乱码等等一系列不能正常显示的情况. 这是由于浏览器和报 ...

  9. VB.NET中图像处理的一些技巧以及其和C#图像处理的差距。

    早期的时候我使用的开发工具是VB6,VB6做图像处理的速度在我的软件Imageshop中有所体现,还是算可以的.目前,我已经改用C#来研究图像算法,C#中有指针,做图像处理起来效率确实要高不少.VB. ...

  10. 与JSP的初次邂逅……

    JSP是可以内嵌在网页中,由服务器端来执行与解释的程序,是一种动态网页技术标准. 在传统的HTML文件(*.htm或*.html)中加入Java程序片段和JSP标记,就构成了JSP网页(*.jsp). ...