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. landsat8简介

    简介 2013年2月11号,NASA 成功发射了 Landsat 8 卫星,为走过了四十年辉煌岁月的 Landsat 计划重新注入新鲜血液.LandSat- 8上携带有两个主要载荷:OLI和TIRS. ...

  2. C# 清空sessin

    Session.Abandon();//清除全部Session//清除某个SessionSession["UserName"] = null;Session.Remove(&quo ...

  3. 读取Jar包中的资源问题探究

    最近在写一个可执行jar的程序,程序中包含了2个资源包,一个是images,一个是files.问题来了,在Eclipse里开发的时候,当用File类来获取files下面的文件时,没有任何问题.但是当程 ...

  4. Track files and folders manipulation in Windows

    The scenario is about Business Secret and our client do worry about data leakage. They want to know ...

  5. Android IOS WebRTC 音视频开发总结（六五）-- 给韩国电信巨头做咨询

    本文主要总结咨询过程中的一些问题,文章最早发表在我们的微信公众号上,详见这里,欢迎关注微信公众号blackerteam 韩国电信巨头sk想了解国内移动互联网rtc现状,所以上周请我过去给他们的相关人员 ...

  6. 单列模式（data与business交互）

    public class CommentsBusiness //Business { #region 单列模式 private static CommentBusiness instance; pri ...

  7. 使用nodejs引用socket.io做聊天室

    Server: var app = require('http').createServer(handler) , io = require('socket.io').listen(app) , fs ...

  8. Python在金融，数据分析，和人工智能中的应用

    Python在金融,数据分析,和人工智能中的应用   Python最近取得这样的成功,而且未来似乎还会继续下去,这有许多原因.其中包括它的语法.Python开发人员可用的科学生态系统和数据分析库.易于 ...

  9. mysql之数据库基本概念(mysql学习笔记一)

    数据库系统   数据库管理系统(DBMS)+数据库(DATABASE)(+数据库管理员) DBS=dbms+db 定义: 大量信息进行管理的高效解决方案,按照数据结构来组织.存储和管理数据的仓库 关系 ...

  10. Modoer列表页性能分析及优化

    在 http://www.modoer.org/beijing/item/list-8 的页面中,会执行以下2个sql SELECT s.sid,pid,catid,domain,name,avgso ...