1、jQuery

(1)jQuery简介

是一个js框架(.js文件)，它的最大特点是，使用选择器(

借鉴了css选择器的语法)查找要操作的节点，并且将这些

节点封装成一个jQuery对象，通过调用jQuery对象提供的

属性或者方法来操作底层的节点。这样做的好处是：

一是不用考虑浏览器兼容性问题，另外一个，

代码会大大简化。

(2)编程的基本步骤  first.html

step1,利用选择器查找节点

step2,调用jQuery对象提供的属性或者方法来完成相应的

操作。

(3)jQuery对象与dom对象的相互的转换

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript"

src="js/jquery-1.4.3.js">

</script>

<script type="text/javascript">

    function f1(){

        //变量之所以用"$"开头，只是一个

        //编程习惯，为了强调这是一个jQuery对象。

        //var $obj = $('#d1');

        //$obj.css('color','red').css('font-size','60px');

        //$obj.css({'color':'red','font-size':'80px'});

        $('#d1').css({'color':'red','font-size':'80px'});

    }

    //dom对象  --- 》 jQuery对象

    function f2(){

        var obj = document.getElementById('d1');

        var $obj = $(obj);

        $obj.html('hello java');

    }

    //jQuery对象  ---》dom对象

    function f3(){

        var $obj = $('#d1');

        //方式一

        //var obj = $obj.get(0);

        //方式二

        var obj = $obj.get()[0];

        obj.innerHTML = 'hello java';

    }

</script>

</head>

<body style="font-size:30px;font-style:italic;">

    <div id="d1">hello jQuery</div>

    <a href="javascript:;" onclick="f3();">Click Me</a>

</body>

</html>

1)dom对象  --- 》 jQuery对象

$(dom对象);

2) jQuery对象  ---》dom对象

方式一:   $obj.get(0);

方式二: $obj.get()[0];
2选择器
1)基本选择器  selecter / s1.html

#id

.class

element

selector1,selector2..selectorn

*

2)层次选择器  sel

ector/s2.html

select1 select2在给定的祖先元素下匹配所有的后代元素

select1>select2在给定的父元素下匹配所有的子元素

select1+select2匹配所有紧接在 select1元素后的select2元素

select1~select2匹配 select1元素之后的所有select2元素

3)过滤选择器

(1)基本过滤选择器 selector/ s3.html

:first

:last

:not(selector)

:even

:odd

:eq(index)

:gt(index)

:lt(index)

(2)内容过滤选择器  selector/s4.html

:contains(text) 匹配包含给定文本的元素

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

:has(selector) 匹配含有选择器所匹配的元素的元素

:parent匹配含有子元素或者文本的元素

(3)可见性过滤选择器  selector / s5.html

:hidden 匹配所有不可见元素，

或者type为hidden的元素

:visible 匹配所有的可见元素

(4)属性过滤选择器 selector / s6.html

selector[attribute]

selector[attribute=value]

selector[attribute!=value]

(5)子元素过滤选择器(下标从1开始)  selector / s7.html

:nth-child(index/even/odd)

(6)表单对象属性过滤选择器 selector / s8.html

:enabled

:disabled

:checked

:selected

4)表单选择器

:input

:text

:pasword

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden

dom操作
     1)、查询   dom / d1.html

节点的html内容: html()

节点的text内容:text()

节点的属性值:attr()

节点的值:val()

2)、创建节点  dom /d2.html

$(html)

3)、插入节点 dom / d2.html

append():向每个匹配的元素内部追加内容

prepend():向每个匹配的元素内部前置内容

after():在每个匹配的元素之后插入内容

before():在每个匹配的元素之前插入内容

4)、删除节点  dom / d3.html

remove()

remove(selector)

empty():清空节点

5)、复制节点  dom / d6.html

clone()

clone(true):使复制的节点也具有行为(将事件

处理代码一块复制)

6)、属性操作 参见  dom / d1.html

读取：attr('');

设置：attr('','') 或者一次

设置多个 attr({"":"","":""});

删除：removeAttr('')

7) 样式操作  dom / d7.html

获取和设置: attr("class","")或者attr("style","");

追加:addClass('')

移除:removeClass('')

或者removeClass('s1 s2')

或者removeClass()//会删除所有样式

切换样式：toggleClass('c1'),有该样式，就删除，没有，

就添加。

是否有某个样式 hasClass('')

读取css('')

设置css('','')或者

css({'':'','':''})//设置多个样式

获得元素偏移信息

offset()

只对可见元素有效

8)、遍历节点  dom /d8.html

children()/children(selector)只考虑子元素，不考虑其它后代元素。

next()/next(selector)下一个兄弟

nextAll()

prev()/prev(selector)上一个兄弟

siblings()/siblings(selector)其它兄弟

find(selector):查找满足selector要求的后代

parent():父节点

过滤元素集

filter（expression）
3事件处理
          1)事件绑订   event / e1.html

bind(type,fn)

2)绑订方式的简写形式

click(function(){

});

3)合成事件  event / e2.html, e3.html

hover(enter,leave) : 模拟光标悬停事件

toggle(fn1,fn2...)：模拟鼠标连续单击事件

4)事件冒泡

(1)什么是事件冒泡?

子节点产生的事件会依次向上抛出给父节点。

(2) 获得事件对象?  event / e5.html

click(function(e){

});

(3)停止冒泡  event / e6.html

event.stopPropagation()

(4)停止默认行为 event / e7.html

event.preventDefault()

5)事件对象的属性

event.type 事件类型(是一个字符串，比如 "click")

event.target:返回事件源(是dom对象!!!)

event.pageX/pageY

6)模拟操作  event / e8.html

          动画
          1)show() / hide()        :  animate / a1.html

(1)作用：通过同时修改节点的宽度和高度来实现显示或者

隐藏的效果。

(2)用法:

show(时间,[callback]);

时间:  slow,normal,fast 或者指定一个毫秒数

callback:回调函数，动画执行完毕之后，会调用该函数。

2)fadeIn() fadeOut():  animate/ a2.html

(1)作用：通过改变不透明度

(2)用法同上。

3)slideUp() slideDown() :  animate / a1.html

1)作用：改变元素的高度

2)用法同show

4)自定义动画 animate(params,speed,[callback]) animate / a4.html

1)用法:

params: 是一个javascript对象，描述动画结束时，

节点的状态。

speed:速度，单位是毫秒。

类数组
     (jQuery对象包含的那些dom节点) array/a1.html

1)length属性：dom节点的个数。

2)each(fn(i)):循环遍历每一个元素,this代表被迭代的dom对象

，$(this)代表被迭代的jQuery对象。i表示正在被遍历的那个

节点的下标(从0开始)。

3)eq(index)：返回index+1位置处的jQuery对象

4)index(obj)：返回下标，其中obj可以是dom对象

或者jquery对象。

5)get()：返回dom对象组成的数组

6)get(index)：返回index+1处的dom对象。

var objects = $(document).find('.move');

objects.each(function(){

if($(this).attr('load')==$('#frameMain').attr('src')){

return;

}

jQuery(this).stop().animate(

{'left': '-' + settings.marginLeft + 'px'},

settings.duration,

settings.easing,

function(){

if(typeof settings.closeFinished == 'function'){

settings.closeFinished();

}

}

);

});
 
trigger
在每一个匹配的元素上触发某类事件。

$("p").click( function (event, a, b) {
  // 一个普通的点击事件时，a和b是undefined类型
  // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

使用cookie保存

$.cookie('style',"css/black.css",{expires:365});

var favstyle = $.cookie('style');

锁住页面

$.blockUI();

解锁

$.unblockUI();

<<adv.html.txt>>

jquery介绍的更多相关文章

  1. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  2. 前端——jQuery介绍

    目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...

  3. 前端-jQuery介绍

    目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...

  4. Day047--JS BOM介绍, jQuery介绍和使用

    内容回顾 DOM 文档对象模型(model) 一个模型就是一个对象(属性和方法 面向对象的三大特性:封装 继承 多态) 为了可扩展性 DOM操作 标签属性操作 获取值 getAttribute() 设 ...

  5. Python自动化 【第十七篇】：jQuery介绍

    jQuery jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在 ...

  6. 2.jQuery介绍

    . jQuery的认识 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的css选择器,并且可对CSS选择器进行扩展:拥有便捷的插件扩展机制和丰富的插件. 和原 ...

  7. jQuery介绍 常用选择器

    jquery现在三个版本, 1.x  2.x  3.x  都在用,越小的版本兼容性越好,ie8以下浏览器也支持,新功能不多.我们通常使用1.x 在html中,css放Head中,js放body尾部 j ...

  8. JQuery -- 介绍，选择器及其示例， 基本选择器，层次选择器，过滤选择器，表单选择器

    1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...

  9. jQuery系列（一）：jQuery介绍

    1.为什么要使用jQuery (1)什么是jQuery jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中 ...

随机推荐

  1. hdu2097

    #include <stdio.h> int sum1(int n,int sign){ ; while(n){ sum+=n%sign; n/=sign; } return sum; } ...

  2. Rich控件一

    Calendar控件 Calendar控件用来在Web页面中显示日历中的可选日期,并显示与特定日期关联的数据. 控件声明代码如下: <asp: Calendar id=" Calend ...

  3. ubuntu 字体 android stuido 汉字 显示 方块

    Ubuntu 12.04 LTS 中安装 windows 字体   ubuntu 中的中文字体看着总觉的有点不爽,于是百度了下,这里记录下怎么在 ubuntu 12.04 中安装 windows 字体 ...

  4. Silverlight动态设置WCF服务Endpoint

    2013-02-02 05:57 by jv9, 1763 阅读, 3 评论, 收藏, 编辑 去年12月收到一位朋友的邮件,咨询Silverlight使用WCF服务,应用部署后一直无法访问的问题,通过 ...

  5. js获取和设置DOM样式函数cssStyle（类似于jquery的$(elem).css()）

    如题,相信这个函数百度一搜一大推,但令人匪夷所思的是这些函数都写的“奇形怪状的”,例如http://www.cnblogs.com/windows7/archive/2010/03/30/170064 ...

  6. linux服务方式启动程序脚本(init.d脚本)

    这才是真正正确的让jar后台启动的脚本,网络上的各种nohoup的脚本都是临时执行一次任务用的. #!/bin/sh # # init.d script # # ### BEGIN INIT INFO ...

  7. mysql批量修改表引擎

    生成修改的语句 SELECT CONCAT('ALTER TABLE ',table_name,' ENGINE=InnoDB;') FROM information_schema.tables WH ...

  8. php如何实现页面回退的两种方法

    发布:thatboy   来源:网络  [大 中 小] 你有没有遇到过这样的情况:表单出错而返回页面时,之前填写的信息全不见了.本文为大家介绍二种支持php页面回退的方法,供大家参考. 本文原始链接: ...

  9. Yii中使用PHPexcel获取excel中数据

    1.view中代码如下: <form name="frmBatchSettle" id="" action="" method=&qu ...

  10. C#高级功能（二）LINQ 和Enumerable类

    介绍LINQ之前先介绍一下枚举器 Iterator:枚举器如果你正在创建一个表现和行为都类似于集合的类,允许类的用户使用foreach语句对集合中的成员进行枚举将会是很方便的.我们将以创建一个简单化的 ...