www.301.net动用jQuery快捷便捷制作网页交互特效

1、jQuery简介:

第一节jQquery初步认知

首先提供一个知识点外资源:

**● jQuery由美国人John Resig于2006年创建**

javaScript概念:

在线编程:无需编程环境:

**● jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装**

1.基于js语言的API和语法组织逻辑,通过内置window和document对象,来操作内存中的DOM元素

  

**● 它的设计思想是write less,do
more(以更少的代码,实现更多的功能);**

jQuery概念

  添加jQuery库:

                                 
 www.301.net 1

1.基于javaScript的,同上,提高了代码的效率

    Settings–>JavaScript–>quick-add–>jQuery

●jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装。

它可以帮我们做什么(有什么优势)

 

●jQuery是继Prototype之后又一个优秀的javaScript库,是由美国人 Johh 
Resig于2006年创建的开源项目。

轻量级、体积小、使用灵巧(只需引入一个js文件)

 jQuery:

  • ●jQuery只是javaScript的程序库,只相当于它的一个子集,并不能完全取代javaScript。

强大的选择器

基于js研发的封装库:可以屏蔽之前书写js代码考虑浏览器兼容性的问题。问题交给框架的编写者

●为什么要使用jQuery:与javaScript相比,使用jQuery制作交互特效的语法更为简单,代码量大大减少,不存在浏览器兼容性的问题。

出色的DOM操作的封装

 

●jQuery与其他javascript库:

出色的浏览器兼容性(jQuery 2.X开始不再支持Internet Explorer 6,7,8)

企业生成环境经常使用js库jQuery是以后学习其他封装的基础库,99%企业都在使用jQuery

按照使用占比,几大javaScript库占比如下:

jQuery的使用步骤

 

  1. jQuery      (62%)
  2. Bootstrap         (22%)
  3. Zepto        (6%)
  4. Ext   (5%)
  5. YUI   (5%)

1.引入jQuery的js文件

高级库:

比例图: 

<script type=”text/javascript” src=”jquery.js”></script>

  Bootstrap(
可视化布局),zepto,YUI,easyUI,jQuery UI,Ext js(非常笨重,页面效果非常华丽,适合局域网)

www.301.net 2

2.使用选择器定位要操作的节点

  Vue

2、 jQuery的用途:

3.调用jQuery的方法进行操作

  Angular

1)访问和操作DOM元素:使用jQuery可以很方便的获取和修改页面中的制定元素,无论是删除、移动还是复制元素,jQuery都提供了一套方便快捷的方法。

2)控制页面样式:通过引入jQuery,开发人员可以很快捷的控制页面的CSS文件。

3)对页面事件的处理:引入jQuery后,可以使页面的表现层与功能开发分离,开发者更多的关注于程序的逻辑与功效;页面设计者则侧重于页面的优化与用户的体验。通过事件绑定机制,可以很轻松的实现两者的结合。(比如鼠标的点击事件)

4)方便使用jQuery插件:引入jQuery后,可以使用大量的jQuery插件来完善页面的功能和效果,如jQuery UI插件库,Form插件,Validate插件等。使得原来使用javaScript代码实现起来非常困难的功能通过jQuery插件可以轻松的实现。

                         Eg:3D幻灯片就是由jQuery的Slicebox插件来实现的。

5)与Ajax技术的完美结合:利用Ajax异步读取服务器数据的方法,极大的方便了程序的开发,增强了页面的交互,提升了用户的体验,引入jQuery后,通过内部对象或函数,加上几行代码就可以实现复杂的功能。

6)处理了与浏览器兼容性的问题:在jQuery库里帮我们写了兼容性的代码。

●jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高开发效率;

讲解$(function(){});

  React

3、 jQuery的优势

1.$是jQuery别名。如$()也可jQuery()这样写,相当于页面初始化函数,当页面加载完毕,会执行jQuery()。

jQuery:

1)轻量级。jQuery的体积小,压缩之后,约等于100KB。

2)强大的选择器。jQuery支持几乎所有的CSS选择器,以及jQuery有自定义特有的选择器。

3)出色的DOM封装。jQuery封装了大量的DOM操作,使的开发者在编写DOM操作相关程序时更加得心用手。

4)可靠的事件处理机制。jQuery的事件处理机制吸收了javaScript中事件处理函数的精华,非常的可靠。

5)出色的浏览器兼容性。

6)隐式迭代。使用jQuery查找相同名称(类名、表签名等)时,会返回一个结果集合,无需用户一一遍历,并且有快捷的查找所匹配的值的方法,简化了编程。

7)丰富的插件支持。jQuery的易扩展性,吸引了来自全球的开发者来编写jQuery的扩展插件,目前已有成百上千的官方支持的插件。

2.希望在做所有事情之前,jQuery操作DOM文档。必须确保在DOM载入完毕后开始执行,应该用ready事件做处理HTML文档的开始。

  所有高级库的基础

4、jQuery的版本及配置

3.$(document).ready(function(){});

  高于js ,但又低于其他高级库

●获取jQuery的最新版本:进入jQuery的官方网站(http://jquery.com),在页面右侧的 Download  jQuery区域下载最新的版本。

               ★jQuery类库说明:jQuery类库一个插件分为两个版本:开发版(完整无压缩)和发布版(GZIP压缩过的版本)。

                              版本号为1.开头的jQuery插件才能支持IE6~IE8的兼容性。

                              推荐的版本是:jquery-1.8.3.min.js和jquery-1.12.4.js

名称

大小

说      明

jquery-1.版本号.js(开发版)

约286KB

完整无压缩版本,主要用于测试、学习和开发

jquery-1.版本号.min.js(发布版)

约94.8KB

经过工具压缩或经过服务器开启Gzip压缩,主要应用于发布的产品和项目

 

●jQuery的引用方式:

    1. 页面引用(引用本地):<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

    2. 引用网络存储的,引用地址实用网络存储的绝对地址。

    ★注:1.   要使用jQuery的功能,需要首先引用jQuery库文件,首先引入jQuery插件文件,再引用自己的.js文件。否则可能无法识别或编译。

     ★注:在一个页面中使用了多个库文件,变量冲突:

      1、使用jQuery.noConflict()方法解决对变量$的jQuery的控制权,即释放jQuery对$变量的控制权。

      2.如果页面仅使用jQuery的一个库文件,则不需要noConflict()方法;

类似于js的window.onload事件函数,但是ready事件要先于onload事件执行

  万事万物皆方法(将js属性功能封装为方法)

5、jQuery语法

window.onload=function(){};

  设计思想:写最少的代码,做最好的事情

●jQuery的加载:

4.jQuery的ready事件不等于js的load:

      Write less,do more

  $(document).ready(function() {

www.301.net 3

搭建jQuery开发环境:

           //执行的代码;

什么是jQuery对象

  引用jQuery库

  });

www.301.net 4

www.301.net 5

 

jQuery对象与DOM对象的关系

 

  这种语法等同于javaScript代码:

www.301.net 6

 

 

DOM对象转换为jQuery对象

jQuery能做什么?

  Window.onload=function(){

—DOM对象可以直接转换为jQuery对象

  1.Js能做的都可以做

           //执行代码;

比如:$(DOM对象)

  2.访问和操作DOM元素

  };

jQuery有哪些功能(API);

  3.控制页面样式

Window.onload于$(document).ready()的对比

选择器、过滤器、事件、效果、ajax

  4.对页面事件进行处理

 

jQuery选择器(定位元素后施加样式和施加行为):

  5.扩展新的jQuery插件

Window.onload

1.基本选择器2.层次选择器3.过滤选择器4.表单选择器

  6.与Ajax技术完美结合

$(document).ready()

基本选择器:

元素选择器:依据标签名定位元素      比如:$(“标签名”);

类选择器:根据class属性定位元素     比如:$(“.class属性名”);

id选择器:根据id属性定位元素           比如:$(“#id”);

选择器组:定位一组选择器所对应的所有元素   比如:$(“#id,.important”);

优势:

执行时机

层次选择器:

在select1元素下,选中所有满足select2的子孙元素  比如:$(“select1
select2”);

在select1元素下,选中所有满足select2的子元素  比如:$(“select1>
select2”);

在select1元素中,选中所有满足select2的下一个弟弟元素  比如:$(“select1
+select2”);

在select1元素中,选中所有满足select2的所有弟弟  比如:$(“select1
~select2”);

  1.体积小

必须等到页面中的所有元素(图片,Flash,视频等)

基本过滤选择器(根据元素的基本特征定位元素,常用于表格和列表中)

-:first/last          第一个/最后一个元素 
比如:$(“tr:first”)、$(“tr:last”)

-:even/odd        选中偶/奇数行

-:not(selector)    把selector排除在外

-:eq(index)         下标等于index的元素

-:gt(index)/:lt(index)   下标大/小于index的元素

  2.强大的选择器:精确定位(重点)

加载完毕后才能执行

内容过滤选择器(根据文本内容定位元素)

-:contains(text)    匹配包含给定文本的元素     
比如:(p:contains(‘月饼’))

-:empty                匹配所有不包含子元素或文本的空元素

  3.出色的DOM封装

网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、flash、视频等)并没有加载完;

可见性过滤选择器(根据可见性定位元素):

-:hidden   匹配所有不可见元素,或type为hidden的元素   
比如:$(“input:hidden”)

-:visible   匹配所有的可见元素

  4.可靠的事件处理机制

编写的个数

属性过滤选择器(根据属性定位元素)

-[attribute]    匹配具有attribute属性的元素

-[attribute =value]   匹配属性等于value的元素  比如:
$(“input[value=’你好’]”)

-[attribute !=value]    匹配属性不等于value的元素

  5.浏览器兼容

同一个页面不能编写多个

状态过滤选择器(根据状态定位元素)

-:enabled   匹配可用的元素

-:disabled   匹配不可用的元素

-:checked  匹配选中的checkbox

-:selected  匹配选中的option    比如:$(“input:selected”)

  6.隐式迭代简化编程

就算写入多个,也只会有一个效果

表单选择器:

-:text      匹配文本框       比如:$(“:text”)

-:password      匹配密码框

-:radio             匹配单选框

-:checkbox      匹配多选框

-:submit          匹配提交按钮

-:reset            匹配重置按钮

-:button          匹配普通按钮

-:file               匹配文本框

-:hidden         匹配隐藏框

  7.丰富的插件支持

同一个页面可以编写多个

jQuery操作DOM(行为:读写、增删、样式、遍历):

 

编写N个则有N次效果

1.读写节点

读写节点的HTML内容

-obj.html()/obj.html(“<span>123<span>”);

读写节点的文本内容

-obj.text()/obj.text(“123”);

读写节点的value属性值

-obj.val()/obj.val(“abc”);

读写节点的属性值

-obj.attr(“属性名”)/obj.val(“属性名”,“属性值”);

装载的先后次序:

简化写法

2.增删节点

  jQuery封装库在上

没有

创建DOM节点

$(“节点内容”)    比如:$(“<span>你好</span>”)

  Js代码在下

$(document).ready(function() {

插入DOM节点

parent.append(obj)     做为最后一个节点添加进来

parent.prepend(obj)    做为第一个子节点添加进来

brother.after(obj)         做为下一个兄弟节点添加进来

brother.before(obj)       做为上一个兄弟节点添加进来

删除DOM节点

obj.remove()              删除节点

obj.remove(selector)  只删除满足selector的节点

obj.empty()                  清空节点

 www.301.net 7

         //执行的代码;

3.样式操作

.addClass(” “)追加样式

.removeClass(” “)移除指定样式

.removeClass()移除所有样式

.toggleClass(” “)切换样式

.hasClass(” “)判断是否有某个样式

.css(” “)读取css的值

.css(” “,” “)设置多个样式

 

});

4.遍历节点

.children/children(selector)   直接子节点

.next()/next(selector)            下一个兄弟节点

.prev()/prev(selector)            上一个兄弟节点

.siblings()/siblings(selector)   所有兄弟

.find(selector)                         查找满足选择器的所有后代

.parent()                                  父节点

使用jQuery实现事件绑定

1.语法:

-$obj.bind(事件类型,事件处理函数)

-如:$obj.bind(‘click’,fn)

-简写形式$obj.click(fn)                注:代表触发了click事件。

2.获得事件对象event

只需要为事件处理函数传递任意一个参数             
比如:$obj.click(function(e){…})

e就是事件对象,但已经经过jQuery对底层事件对象的封装,封装后的事件对象可以方便的兼容各种浏览器。

3.事件对象的常用属性

获取事件源e.target,返回值是DOM对象

获取鼠标点击的坐标:e.pageX和有e.pageY

语法结构:

可以简写成

如何取消事件冒泡(e.stopPropagation())

$(‘a’).click(function(e){

alert(‘点击了一个链接’);

e.stopPropagation();

})

$(document).ready()=function(){};

$(function(){

jQuery的合成事件种类

.hover(mouseenter,mouseleave)模拟光标悬停事件

.toggle()在多个事件响应中切换

$(function(){});

   //执行代码

模拟操作的语法

$obj.trigger(事件类型)

如:$obj.trigger(“focus”);

简写开式$obj.focus();

 www.301.net 8

}

jQuery动画

 

 

显示、隐藏的动画效果

show()/hide()

作用:通过同时改变元素的宽度和高度来实现显示或者隐藏

用法:$obj.show(执行时间,回调函数);

执行时间:show,normal,fast或毫秒数

回调函数:动画执行完毕之后要执行的函数

注:$(function(){})执行顺序在window.onload之前

●2.jQuery的语法结构:

上下滑动式的动画实现

slideDown()/slideUp()

作用:通过改变高度来实现显示或隐藏的效果

用法同show()/hide()

语法结构:

  jQuery语句主要包含三大部分:$()、document和ready();它们在jQuery中分别称为:工厂函数、选择器和方法。

深入浅出动画效果

fadeIn()/fadeOut()

作用:通过改变不透明度opacity来实现显示或者隐藏

用法同show/hide

1. 工厂函数$():将DOM对象转化为jQuery对象、$(selector).action();

    语法:$(selector).action();

自定义动画效果

animate(偏移位置,执行时间,回调函数)

偏移位置:{}描述动画执行之后元素的样式

执行时间:毫秒数

回调函数:动画执行结束后要执行的函数

$(“div”).click(function(){

       $(this).animate({‘left’:’500px’},4000);

       $(this).animate({‘top’:’300px’},2000);

})

2. 选择器selector:选择器

       
★工厂函数$():在jQuery中,美元符号“$”等价于jQuery,即S()=jQuery()。

 

        $()的作用是将DOM对象转换为jQuery对象,只有将DOM对象转换为jQuery对象后,才能使用jQuery的方法。

 

        注:当$()的参数是DOM对象时,该对象无须使用双引号包裹起来,如果获得的是document对象,则写作$(document);

 

★选择器selector: 语法:$(selector);

方法:

★方法action():jQuery中提供了一系列的方法。在这些方法中,一类重要的方法就是事件处理方法,

  1. $(selector).addClass()

    Eg:如许多基础的事件:鼠标事件、键盘事件和表单事件等,都可以通过事件方法进行绑定。

    A. 向被选元素添加一个或多个类样式

●CSS样式操作的方法:

    B. 可以是一个,也可以是多个

  1)为元素添加新的样式

  2. $(this)

      语法:jQuery 对象.addClass([样式名]);

    A. 是一个jQuery对象

    注:样式名不用带“.”类符号,区别于选择器

    B. 指向鼠标指针当前移向的一菜单级

  2)设置新的CSS样式属性

    C. 代表当前

         语法:jQuery 对象.css (“属性”,”属性值”);
    //设置一个css样式

  3. $(selector).css()

                  jQuery 对象.css
({“属性1”:”属性1值”,”属性N ”:”属性N的值”});     //设置多个css样式

    A. css(“属性”,”属性值”);//设置一个css属性

  3)显示/隐藏元素

    B. css({“属性1”:”属性值1”,属性2””:”属性值2”……});//同时设置多个css属性

           语法:$(selector).show();     //显示元素

  4. $(selector).children()

                          $(selector).hide ();     //隐藏元素

    A. jQuery中遍历后代的一种方法

●CSS与addClass的区别:

    B. 用作查找元素的所有直接子元素

  ★css()方法为所匹配的元素设置给定的样式;

  5. $(selector).show()

  ★addClass()方法向所匹配的元素添加一个或多个类,该方法不会删除已存在的类,尽在原有的基础上追加新的类样式;

    显示元素

  ★基于结构与样式分离的原则,通常在实际应用中,为某元素添加样式,使用addClass()方法比css()方法的频率高很多,因此建议使用addClass()添加样式;

  6. $(selector).hide()

6、jQuery代码风格:

    隐藏元素

●“$”的使用:在jQuery程序中,使用最多的是“$”,无论是页面元素的选择器,还是功能函数的前缀,都
必须使用该符号。它“$”等同于jQuery。

论css()方法与addClass方法的区别:

      Eg:$(document).ready()=jQuery(document).ready()

  A. css()方法为所匹配的元素设置给定的css样式

      $(function(){…})=jQuery (function(){…})     

  B. addClass()方法向所匹配的元素添加一个或多个类,改方法不会删除已经存在的类,仅在原有基础上追加新的类样式

●链式操作:对一个对象进行多重操作,只调用一个对象,并将操作结果返回给该对象

  C. 基于结构与样式分离的原则,通常在实际应用中,为谋元素添加样式,使用addClass()方法比css()方法的频率高很多,因此建议使用addClass()方法为元素添加样式

             
注:使用next()方法可以获得当前元素的下一个同胞元素。

jQuery程序的代码风格

Eg1: 鼠标移入和移除事件代码结构:

  1. ”$”的使用

  $(“h1”).mouseover(function(){

    A. jQuery程序的标志

         //代码1;

    B. $==jQuery

  }).mouseout(function(){

    C. 无论页面元素的选择器,还是功能函数的前缀,都必须使用改符号

              //代码2;

  2. 链式操作

  });

    A. 在对DOM元素进行多个操作时。为避免过度使用临时变量或不必要重复代码

Eg2:将标题颜色变成浅蓝色,并且单击标题显示下方的元素;

    B. 链式编程:可以对一个对象进行多重操作,将操作结果返回给该对象

  $(“h2”).css(“background-color”,”#ccffff”).next().css(“display”,”block”);

    C. 栗子:光棒效果

 www.301.net 9

HTML:

●1隐式迭代:在jQuery中获取一个集合后,会默认遍历内部的所有元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="../jquery-1.12.4.js"></script>
<script type="text/javascript" src="Day01.js"></script>
<body>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>西雅图</li>
    </ul>
</body>
</html>

       Eg:下面的代码会将所有的li变成红色:

 

      $(document).ready(function() {

jQuery:

       
      $(“li”).css({“font-weight”:”bold”,”color”:”red”});

$(function () {
    $("li").mouseover(function () {
        $(this).css("background-color","pink");
    }).mouseout(function () {
        $(this).css("background-color","");
    });
});

             });

 

●添加注释

 

阶段

说明

开发阶段

为代码添加注释,可以增加代码的可读性,能够让别人很容易的读懂你的代码,便于后期维护

维护阶段

建议把关键的模块形成开发文档,便于后期维护,即便后期删除代码注释,也不影响后期维护

产品正式发布

建议删除注释,减少文件大小,加快下载速度,提高用户体验

 

 

3. 隐式迭代

7、jQuery对象和DOM对象:

  $(“li”):一行代码即可获取页面所有的li标签,可以为其所有li表示绑定事件或设置样式等

●DOM模型:浏览器把HTML文档的元素转换成节点对象,所有节点组成了一个树状结构;

                                    

●DOM对象:直接使用javaScript获取的节点对象就是DOM对象。

  在javaScript中,使用getElementsByTagName()或getElementById()来获取元素的节点,通过该方式得到的DOM元素都是DOM对象。

      Eg:var objDOM=document.getElementById("title");

          var objHTML=objDOM.innerHTML; 

●jQuery对象:使用jQuery包装DOM对象后产生的对象,它能够使用jQuery中的方法;

       Eg:  $("#title").html( );

      等同于

      document.getElementById("title").innerHTML;

注:DOM对象和jQuery对象分别拥有一套独立的方法,不能混用;

jQuery对象无法直接使用DOM对象的任何方法。

DOM对象也无法直接使用jQuery对象的方法。

jQuery对象名前缀带有“$”

    ●DOM对象转jQuery对象:对于一个DOM对象,只需要使用$()函数将DOM对象包装起来,就可以获得一个jQuery对象。

          使用$()函数进行转化:$(DOM对象)

            Eg: var  text=document.getElementById(“text”);      //DOM对象

                var  $text=$(text);                             //jQuery对象

              注:jQuery对象命名一般约定以$开头,在事件中经常使用$(this),this是触发该事件的对象

●jQuery对象转换成DOM对象:

    ★jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象

        Eg:var  $text=$(“text”);       //jQuery对象

           var  text=$text[0];         //DOM对象

     ★通过get(index)方法得到相应的DOM对象

        Eg:var  $text=$(“text”);       //jQuery对象

            var  text=$text.get[0];     //DOM对象

4. 添加注释

8、 附加:

  A. 开发阶段:

■初识jQuery >> jQuery的引用

●网页中使用JS嵌入网页时有3种方式:

1、在HTML中直接使用&lt;script&gt;标签

2、使用外部JavaScript文件

3、直接在HTML标签中写JS代码

  • ●引入外部JS文件是使用<script>标签中的“src”属性;
  • ●JS文件可以在HTML页面的<head>标签和<body>标签中引入;
  • ●jQuery可以把源码放在<script>里,然后使用jQuery;

●jQuery中JS的引用属性是 src

href是用在样式的引用,

url是指定的地址一般指jquery的Ajax路径。

ref是css的属性用于指定当前文档与被链接文档的关系

●jQuery的引用的方法:对于jQuery的引用,可以将其js文件下载到本地引用,也可以在线引用。对jQuery的引用应该在使用了jQuery框架的js文件之前

    a) 为代码添加注释,可以增加代码的可读性

 

    b) 能够让别人很容易地读懂你的代码

 

    c) 便于后期维护

■初识jQuery >> jQuery的基本概念和优势测试分析

●javaScript和jQuery的概念理解及javaScript和jQuery的关系:

  ★Js是脚本语言,边解释边执行;

  ★jQuery就是封装的js库,所以jQuery能解决的问题js都可以解决,反之亦正确,但是这并不能说明jQuery就可以替代js。

●jQuery的主要功能包括:遍历HTML文档、操作DOM、处理事件、执行动画、开发Ajax的代码;

●jQuery选择器分类:类选择器:基本选择器、层次选择器、属性选择器过滤选择器:基本过滤选择器、可见性过滤选择器表单选择器:内容过滤器:

●jQuery是基于JavaScript的一个JS封装库。 JavaScript 与jQuery可混合使用,他们自己可以相互转化,使用jQuery方法时须先引入jQuery库文件

●jQuery 是一个 JavaScript 库,就是把用javascript写的对象和函数放到一个*.js文件中;使用时,必须先引入这个JavaScript 库文件;且因为本身就是用javascript写的,所以可以和javascript一起使用

  B. 维护阶段:

 

    a) 建议把关键的模块形成开发文档

■初识jQuery >> DOM模型的概念和原理测试分析;

●找不到的DOM对象返回为null,

  找不到jQuery对象返回空数组对象

 

Jquery中访问对象的size方法的返回值和Jquery对象中的length属性

●jQuery DOM 元素方法。而DOM元素包含 .get()、.index()、.size()、.toArray()这四种方法

  get()是:获得由选择器指定的 DOM 元素

  .index()是:返回指定元素相对于其他指定元素的 index 位置

  .size()是:返回被 jQuery 选择器匹配的元素的数量

  .toArray()是:以数组的形式返回 jQuery 选择器匹配的元素

●attr代表的是属性节点,att是设置属性的方法.html()方法是获得某个选择器里的所有内容;

   text代表文本节点text()是获得某个选择器的文本内容.

●jquery删除dom元素的方法,jquery定义了两种删除元素的方法,remove() – 删除被选元素(及其子元素),empty() – 从被选元素中删除子元素。

    b) 便于后期维护,即便后期删除代码注释,也不影响后期维护

 

  C. 产品正式发布:

 

    a) 建议删除注释

■初识jQuery >> jQuery的基本语法结构(工厂函数、选择器、方法)测试分析

●$(document)得到的是一个jQuery对象

●Disabled 是禁用input元素的函数

●hide()是用于隐藏可见元素,show()用于显示隐藏元素,toggle()实现切换元素的可见状态,fadeIn()淡入效果。

 ●each() 方法为每个匹配元素规定要运行的函数。

    提示:返回 false 可用于及早停止循环。

  语法

    $(selector).each(function(index,element))

  参数  描述

    function(index,element)   必需。为每个匹配元素规定运行的函数。

    index – 选择器的 index 位置。

    element – 当前的元素(也可使用 "this" 选择器)

●each() 函数就像是 Java 里的一个 Iterator,它允许你遍历一个元素集合。你可以传一个函数给 each() 方法,被调用的 jQuery 对象会在其每个元素上执行传入的函数。其中 text() 方法返回选项的文本

●标签选择器直接写标签的名称,不需要写尖括号,“.”开头的是类选择器,“#”开头的是id选择器;

●siblings() 方法返回被选元素的所有同胞元素

●jQuery的核心功能是根据选择器查找HTML元素,然后对这些元素执行相应的操作;

●slideDown是JQuery里面向下滑动的效果,

animate是JQuery移动元素的动画效果,

slideUp是向上滑动的效果。

slideToggle是通过使用滑动效果(高度变化)来切换元素的可见状态

●appendTo:追加到元素的末尾用;

●jQuery本身是对javascript的包装,因而也属于javascript语言。,其$和jquery函数的作用类似,一个是符号表达式,一个是命名函数。jQuery中可以将dom对象转化为jQuery对象,同时可以实现所有javascript的功能。

●ajaxSend( callback ) 在一个AJAX请求发送时,执行一个函数

  height()返回id为msg的元素的高度

  toggle( fn, fn ) 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数

●jquery获取Value值两种形式 val() 、attr(‘value’) 均可

●Jquery程序的开发过程,Jquery的方法有很多, ajaxComplete(),ajaxSuccess(),ajaxSend()的作用都是AJAX 请求完成时执行函数。

Ajax 事件, XMLHttpRequest 对象和设置作为参数传递给回调函数;

只有$.post()才是jquery的ajax的全局事件,

Ajax请求使用GET方法

●AJAX即“AsynchronousJavascriptAndXML”(异步JavaScript和XML)整体技术包括JavaScript和xml;

●Ajax基础中的XMLHttpRequest返回状态,0 初始化状态,

  1 open()方法已调用,但是 send() 方法未调用。请求还没有被发送,

  2 send()方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应,

  3 所有响应头部都已经接收到。响应体开始接收但未完成,

  4 HTTP 响应已经完全接收。

 datagrid是jQuery EasyUI的插件所,Datagrid的columns属性可以用于定义表格的列

 ●dialog、 tabs 、menu 都是jQueryUI的插件

●JQuery的方法:bind()是绑定事件、hover()是鼠标悬停时触发、toggle()是连续单击时触发

●激活的所有元素的方法是enabled;

●html()方法可以获取匹配元素的html内容或文本内容

●jquery选择器的表单元素过滤器

表单元素过滤选择器:

  $(":enabled")             选择所有的可操作的表单元素

  $(":disabled")            选择所有的不可操作的表单元素

  $(":checked")            选择所有的被checked的表单元素

  $("select option:selected") 选择所有的select 的子元素中被selected的元素

●隐藏可见的  元素

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

     $("p").hide();

       });

●显示出隐藏的P标签

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

   $("p").show();

  });

●toggle() 方法切换元素的可见状态:如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

●jQuery的基本语法:改变属性值的方法有attr()和css()   

●JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,

前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间,用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

另一方面,jQuery ready() 函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它,浏览器会按它们在 HTML 页面里出现的顺序执行它们,

相反对于 onload 技术而言,只能在单一函数里使用。鉴于这个好处,用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。

●jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少,做的多"的JavaScript库。

jQuery库包含以下功能:HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities,除此之外,Jquery还提供了大量的插件。

●JQuery UI自动完成方法的实现。JQuery UI autocomplete是JQuery UI的自动完成组件;

●.html(),.text(),.val()三种方法都是用来读取选定元素的内容;

  ★.html()是用来读取元素的HTML内容(包括其Html标签),

  ★.text()用来读取元素的纯文本内容,包括其后代元素,

  ★.val()是用来读取表单元素的"value"值。

  其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;另外.html()方法使用在多个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。

    b) 减少文件大小,加快下载速度

 

    c) 提高用户体验

 

DOM对象与jQuery对象:

■初识jQuery >> jQuery对象与DOM对象的相互转换

●jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象

jQuery本身提供,通过.get(index)方法,得到相应的DOM对象

●jQuery对象与DOM对象能相互转换,如$(selector).get(0)转为DOM对象     

jQuery对象不可以使用getElementById() 方法

$(document.getElementById(“box”))是把id为box标签元素转换为jQuery对象

●DOM对象转换成JQuery 对象可以通过$()工厂来实现,$(DOM对象) 这样就可以转成对应的JQuery对象了,而document.getElementById(id名称) 可以通过id来得到对应的DOM 对象;

●jQuery对象与DOM对象的相互转换,jQuery只是js的一个函数库不能完全取代js,不管jQuery对象还是DOM对象都只能使用自己的函数和属性;

●jQuery转DOM对象:jQuery对象是一个数组对象,可以通过[index]的丰富得到相应的DOM对象,还可以通过get[index]去得到相应的DOM对象。

DOM对象转jQuery对象:$(DOM对象);

●innerHTML是js对象的html()是jquery对象的js对象转换成jquery对象 在外套一个$()

一. DOM对象

 

  1. 文档对象模型 (Document Object Model)

  2. 每个HTML页面都有一个DOM,每个DOM都可以表示一棵树

 

简要图:

www.301.net 10

 

 

论DOM拿文本值:

1. inner HTML:拿到的是标签与文本值

2. inner Text:拿到的是金文本值

3. Value:表单元素的value值

二.jQuery对象

  jQuery对象就是通过jQuery包装DOM对象后产生的对象,就能够使用jQuery中的方法

  栗子:

$(“#box”).html();
//获取id为box元素内的html代码

 

jQuery不可使用DOM对象一系列方法,它有自己的资源

 

论jQuery拿文本值:

4. html():拿到的是标签与文本值

5. text():拿到的是金文本值

6. val():表单元素的value值

 

三.互转

DOM:土鳖

jQuery:土豪

1. DOM–>jQuery(土鳖变土豪)拿钱砸:$

Var txtName = document.getElementById(“txtName”);

Var $txtName = $(txtName);

2. jQuery–>DOM(土豪变土鳖)分解

Var $div = $(“#box”);

Var div = $div[0];

www.301.net,操作样式:

1. dom:三种

(1) Dom.style.fontSize=”属性值”;

(2) Dom.className = “class属性值”;

(3) Dom.style.cssText=”A:B;C:D”;

2. jQuery:三种

(1) Jquery.css(“属性”,”属性值”);

(2) Jquery.css({“属性1”:”属性值1”,属性2””:”属性值2”……});

(3) jQuery.addClass(“类的属性值”);

事件注册:

1. dom: 有 on前缀

Dom中所有事件的开始都是有on的

栗子:

Dom.onclick=function(){};

2. jQuery:  无on前缀

直接上栗子:

jQuery.click(function(){});

 

经典栗子:使用jQuery变换网页效果:

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="../../../../../jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<body>
<h1>你是人家的四月天</h1>
<div>
    <p> 笑响亮了四面风</p>
    <p> 轻灵在春的光艳中交舞看变</p>
    <p>你是一月早天的云烟</p>
    <p>黄昏吹着风的软</p>
    <p>....</p>
    <p><a href="#">查看全部</a></p>
</div>
<hr/>
<div>
    你是人间四月天是永正图书推出的“比烟花寂寞”系列之三。“比烟花寂寞"系列包括《民国女子》《爱眉小札》《你是人间四月天》《你是我眉心未完的诗》。这系列以前所未有的包装形式推出,引起读者尖叫连连。一经上市,便引发各大报纸、媒体的一致报道。
    有人崇拜她,把她当做女神、偶像;也有人放出话来,“喜欢她的女人,品行有问题;喜欢她的男人,脑子有问题。”
    她是缺乏幽娴品德的女人,她喜好与人辩论,她用诗句表达她的哀愁,她精通文理,学贯中西。她对文学和艺术,具有本能的、直接的感悟。生长富贵,命运坎坷,修养让她把热情藏在里面,热情却是她生活的支柱。
    她,就是那个万千宠爱于一身的一代才女——林徽因。
    《你是人间四月天》是林徽因的一本小说、诗歌、散文、剧本集,几乎收录了林徽因所有的经典文学作品。其散文成就颇大,虽然数量不多,但风格独特,知识性强。诗歌尤
</div>
</body>
</html>

 

jQuery:

$(function () {
    var $div = $("div:last");
    var $a = $("a");
    $div.hide();
    $a.click(function () {
        if ($a.text() == "查看全部") {
            $div.show();
            $a.text("折叠");
        }else {
            $div.hide();
            $a.text("查看全部");
        }
    });
});

 

 

 

 

 

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注