jQuery之深入浅出jquery -

lixg425

浏览: 497530 次
性别:
来自: 北京

最近访客更多访客>>

javaboy2010

fengzhou0920

leontius

Mr_冰凉

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery之深入浅出jquery

博客分类：

jQuery

jquery

http://sishuok.com/forum/blogPost/list/2577.html
私塾

jQuery是什么
jquery是一款优秀的javascript框架。
jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的，它有助于简化 JavaScript™ 以及Ajax 编程。它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。
jQuery的特点
1、jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有90K左右。
2、jQuery支持CSS1-CSS3,以及基本的xPath。
3、jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
4、可以很容易的为 jQuery扩展其他功能。
5、能将JS代码和HTML代码完全分离，便于代码和维护和修改。
6、插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。
jQuery有什么【jQuery的核心概念】
选择器
操作元素属性、样式
新建dom对象
事件
动画
ajax
实用工具函数
自定义插件
表单插件
官方UI插件
拷贝jquery的核心包，并在html里引入

java代码：
查看复制到剪贴板打印

    <script type="text/javascript" src="../js/jquery-1.6.1.js"></script>

写出待操作的html

java代码：
查看复制到剪贴板打印

    <div id="div1">xyz</div>
    <div id="div2">abc</div>
    <div id="div3">edf</div>

我们要做的事情，让第一个div的字变成红色，且可以点击
拷入操作的jQuery

java代码：
查看复制到剪贴板打印

    <script type="text/javascript">
    $().ready(function(){
    $("#div1")
    .css("color","red")
    .click(function(){
    alert("ok");
    });
    });
    </script>

慢慢解释我们的helloworld
$().ready(fn);代表在body的onload的时候执行一个方法。就像以前的<body onload=“f()”>。回忆一下，在body的onload的时候执行相当于整个页面已经初始化过了。
$("#div1“).，这就是大名鼎鼎的选择器，里面的字符串用来选择一些已经存在的dom对象，#div1代表选择所有id为div1的dom对象。
$(“#div1“).css(”color”,“red”)；代表要将选中的dom对象加上css属性，其键值对键为color，值为red。

java代码：
查看复制到剪贴板打印

    $(“#div1“).click(function(){
    alert("ok");
    });

代表要将选中的dom对象加上一个监听click事件的方法，其响应仅为弹出一个窗口。
强调两个概念。
连缀api【命令链】。
将JS代码和HTML代码完全分离。
#id【前缀为#】，根据给定的ID匹配一个元素。
document.getElementById(“id”)
element【注意，没有前缀】，根据给定的元素名称匹配所有元素
document.getElementsByTagnames(“input”)
.class【前缀为.】，根据给定的css设置匹配元素
*【整个字符串就是*】，匹配所有元素
select1,select2【,】,将每一个选择器匹配到得元素合并后一起返回
特别强调，在最基本的JavaScript中，所有的操作都必须是针对一个dom对象，即使拿到一个数组也要转换成一个一个对象去操作。但是jQuery的选择器可以同时选中多个dom对象，对这个选择器的操作就是对所有的dom对象的操作。
ancestor descendant 【中间的空格】，根据祖先元素匹配所有的后代元素。

java代码：
查看复制到剪贴板打印

    parent>child【>】，根据父元素匹配所有的子元素
    prev+next【+】，匹配所有紧接在prev元素后的相邻元素
    prev~siblings【~】，匹配prev元素之后的所有兄弟元素
    :first【:first】，获取第一个元素。
    :last【:last】，获取最后一个元素。
    :not(selector)【:not()】，获取处给定选择器外的所有元素。
    :even【:even】，获取所有索引值为偶数的元素，索引号从0开始。

dd【:odd】，获取所有索引值为基数的元素，索引号从0开始。
    :eq(index)，获取指定索引值的元素，索引号从0开始。
    :gt(index)，获取所有大于给定索引值的元素，索引号从0开始。
    :lt(index)，获取所有小雨给定索引值的元素，索引号从0开始。
    :header，获取所有标题类的元素，如h1、h2…
    :animated，获取正在执行动画效果的元素。
    :contains（text）【:contains】，获取包含给定文本的元素。
    :empty【:empty】，获取所有不包含子元素或者文本的空元素。
    :has(selector)【:has()】，获取含有选择器锁匹配的元素的元素。
    :parent【:parent】，获取含有子元素或者文本的元素。
    :hidden【:hidden】，获取所有不可见元素，或者type为hidden的元素。
    :visible【:visible】，获取所有的可见元素。
    [attribute]【[attribute]】，获取包含给定属性的元素。
    $(“input[type=‘text’]”)
    [attribute=value]【[attribute=value]】，获取等于给定的属性是某个特定元素的值。
    [attribute!=value]【[attribute!=value]】，获取不等于给定的属性是某个特定值的元素。
    [attribute^=value]【[attribute^=value]】，获取给定的属性是以某些值开始的元素。
    [attribute$=value]【[attribute$=value]】，获取给定的属性是以某些值结束的元素。
    [attribute*=value]【[attribute*=value]】，获取给定的属性是以包含某些值的元素。
    [selector1][selector2][selector3]【[selector1][selector2][selector3]】，获取满足多个条件的符合属性的元素。
    $("input[id][name$='man']")
    :nth-child(eq|even|odd|index)，获取每个父元素下的特定位置元素，索引号从1开始。
    $(“input[type=‘text’]”)
    :first-child，获取每个父元素下的第一个子元素。
    :last-child，获取每个父元素下的最后一个子元素。

nly-child，获取每个父元素下的仅有一个子元素。
    :input，获取所有input、textarea、select、button。
    :text，获取所有单行文本框。
    :password，获取所有密码框。
    :radio，获取所有单选按钮。
    :checkbox，获取所有复选框。
    :submit，获取所有提交按钮。
    :image，获取所有图像域。
    :reset，获取所有重置按钮。
    :button，获取所有按钮。
    :file，获取所有文件域。
    :enabled，获取表单中所有属性为可用的元素。
    :disabled，获取表单中所有属性为不可用的元素。
    :checked，获取表单中所有被选中的元素。
    :selected，获取表单中所有被选中option的元素。

each(callback) 。获取表单中所有属性为可用的元素。以每一个匹配的元素作为上下文来执行一个函数。
每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。
在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整形）。
返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

java代码：
查看复制到剪贴板打印

    $("button").click(function () {
    $("div").each(function (index, domEle) {
     // domEle == this
    return false;
    });
    });

attr(name)，【读】取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。
注意1：如果选择器可以选择多个dom对象，则只取第一个对象的属性值。
注意2：jQuery选择器和JavaScript对象完全不是一回事，需要各自调各自的方法，比如：
var x = $(“#div1”).attr(“id”);
var x = document.getElementById(“div1”).id;
JavaScript对象可以转换为jQuery对象，只需要再外边加上$()；而jQuery选择器无论如何都会返回一个数组，只需要按照数组操作加上[索引]即可。
attr(key,value)，【写】为所有匹配的元素设置一个属性值。
attr(properties)，【写】 $("img").attr({ src: "test.jpg", alt: "Test Image" });
attr(key,fn)，【写】不提供值，而是提供一个函数，由这个函数计算的值作为属性值。
$("img").attr("title", function() { return this.src });
注意：在方法中使用this代表当前正在计算的dom对象。
removeAttr(name)，【移除】从每一个匹配的元素中删除一个属性
val()，【读】获得第一个匹配元素的当前值。
val(value)，【写】设置每一个匹配元素的值。
val(fn)，【写】设置每一个匹配元素的值。
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
      与上一页ppt相比，attr可以操作任意属性，而val相当于是一个近路，只用于操作value属性。
html()，【读】取得第一个匹配元素的html内容。
html(html)，【写】设置每一个匹配元素的html内容。
html(fn)，【写】设置每一个匹配元素的html内容。
$(‘#div1'). html(function(index, html) {
return html+html;
});
text()，【读】取得所有匹配元素的内容。
text(text)，【写】设置所有匹配元素的文本内容。
text(fn)，【写】设置所有匹配元素的文本内容。
$(‘#div1'). text(function(index, text) {
return text+text;
});
css(name)，【读】访问第一个匹配元素的样式属性。
css(key,value)，【写】在所有匹配的元素中，设置一个样式属性的值。
css(properties)，【写】把一个“名/值对”对象设置为所有匹配元素的样式属性。
css(key,fn)，【写】不提供值，而是提供一个函数，由这个函数计算的值作为样式属性值。
function(index, value)
bind(name,[data],fn)，【注册】为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。和click(fn)等具体注册不同，bind可以注册所有的事件类型，但是需要用第一个参数name来指定。

java代码：
查看复制到剪贴板打印

    function handler(event) {
      alert(event.data.foo);
    }
    $("p").bind("click", {foo: "bar"}, handler);

可以使用unbound来删除已经注册的方法。
one(name,[data],fn)，【注册】这个方法只执行一次，其余与bind一摸一样。
hover(overFn,outFn)【注册两个方法】注册两个方法，当鼠标移入的时候(mouseover)执行第一个方法；鼠标移出的时候(mouseout)执行第二个方法。
toggle(fn,fn) 【注册多个方法】每次点击后依次调用函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
停止事件冒泡【点击一个元素也会触发它的父元素被点击】停止时间冒泡可以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation()方法来停止时间冒泡。

java代码：
查看复制到剪贴板打印

    $("#button1").click(function(event){
    alert("button");
    event.stopPropagation();
    });

append(content)。向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
$("p").append("<b>Hello</b>");
nappendTo(content)。把所有匹配的元素追加到另一个、指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
$("p").appendTo("#foo");

注意比较：appendTo和append真的完全一样吗？你吧appendTo比喻做复制-粘贴还是剪切-粘贴？
show()，显示隐藏的元素。
show(speed,[callback])，以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。
hide()，隐藏显示的元素。
hide(speed,[callback])，以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。
toggle()，切换元素的可见状态。
toggle(switch)，根据switch参数切换元素的可见状态（ture为可见，false为隐藏）。
toggle(speed,[callback])，以优雅的动画切换所有匹配的元素，并在显示完成后可选地触发一个回调函数。

java代码：
查看复制到剪贴板打印

    $("#button3").click(function(){
    $("#div1").toggle(3000,function(){
    if ($("#button3").val()=="隐藏"){
    $("#button3").val("打开");
    }else{
    $("#button3").val("隐藏");
    }
    });
    });

fadeIn(speed,[callback])，通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeOut(speed,[callback])，通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeTo(speed,opacity,[callback])，把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

java代码：
查看复制到剪贴板打印

    $("#button3").toggle(function(){
    $("#div1").fadeOut(2000);
    $(this).val("淡出");
    },function(){
    $("#div1").fadeIn(2000);
    $(this).val("淡入");
    });

slideDown(speed,[callback])。通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。
slideUp(speed,[callback])。通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。
slideToggle(speed,[callback])。通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

java代码：
查看复制到剪贴板打印

    $("#button3").click(function(){
    $("#div1").slideToggle(4000,function(){
    if ($("#button3").val()=="划上"){
    $("#button3").val("划下");
    }else{
    $("#button3").val("划上");
    }
    });
    });

animate(params[,duration[,easing[,callback]]])。用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。

java代码：
查看复制到剪贴板打印

    $().ready(function(){
    $("#img1").click(function(){
    $(this).animate({left:"+=500px"},3000);
    });
    $("#img2").click(function(){
    $(this).animate({width:$("#img2").width()*2,},3000);
    });
    });

<img src= "../image/Commando.jpg" id="img1" width="300px" style="position:absolute">
jQuery.browser。此属性在 DOM 树加载完成前即有效，可用于为特定浏览器设置 ready 事件。浏览器对象检测技术与此属性共同使用可提供可靠的浏览器检测支持。

java代码：
查看复制到剪贴板打印

    $().ready(function(){
    if ($.browser.msie){
       alert("this is msie!");
    }
    if ($.browser.mozilla){
       alert("this is mozilla!");
    }
    });
    lsafari
    lopera
    lmsie
    lmozilla

jQuery.each(obj,callback)。通用例遍方法，可用于例遍对象和数组。不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

java代码：
查看复制到剪贴板打印

    var arr = new Array();
    arr[0] = 1;
    arr[1] = 3;
    arr[2] = 5;
    $.each(arr,function(i,n){
    alert(i+"="+n);
    });

jQuery.map(array,callback)。将一个数组中的元素转换到另一个数组中。作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中。

java代码：
查看复制到剪贴板打印

    var arr = new Array();
    arr[0] = 1;
    arr[1] = 3;
    arr[2] = 5;
    var arr1 = $.map(arr, function(n){
    return [ n, n + 1 ];
    });
    njQuery.inArray(value,array)。确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。
    var arr = new Array();
    arr[0] = 1;
    arr[1] = 3;
    arr[2] = 5;
    alert($.inArray(1,arr1));

jQuery.merge(first,second)。合并两个数组。返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。

java代码：
查看复制到剪贴板打印

    var arr1 = new Array();
    arr1[0] = 1;
    arr1[1] = 3;
    arr1[2] = 5;
    var arr2 = new Array();
    arr2[0] = 11;
    arr2[1] = 33;
    arr2[2] = 55;
    var arr3 = $.merge(arr1,arr2);
    jQuery.get(url,[data],[callback])。通过远程 HTTP GET 请求载入信息。请求成功时可调用回调函数。
    $("#b1").click(function(){
    $.get("/jq/jsp/resp.jsp",{uuid:1,name:"不支持中文"},function(data){
    $("#div1").html(data);
    });
    });

注意：可以传过去中文吗？可以传回中文吗？

java代码：
查看复制到剪贴板打印

    jQuery.post(url,[data],[callback])。除了传参的方式不同，其余与jQuery.get(url,[data],[callback])完全一样。
    jQuery.getJSON(url,[data],[callback])。通过 HTTP GET 请求载入 JSON 数据。与get的不同是它在回调函数的时候，传入的参数不是整个响应字符串而是把响应字符串转换为一个JSON对象。
    $("#b1").click(function(){
    $.getJSON("/jq/jsp/respJson.jsp",{uuid:1,name:"不支持中文"},
    function(jsonObject){
    alert(jsonObject.uuid);
    alert(jsonObject.name);
    });
    });

注意：必须使用标准JSON，即key和value都要用双引号包围起来。

java代码：
查看复制到剪贴板打印

    {uuid:"换了",name:"1"}
    {"uuid":"换了","name":"1"}
    load(url,[data],[callback])。载入远程 HTML 文件代码并插入至 DOM 中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。
    $().ready(function(){
    $("#div1").load("/jq/jsp/resp.jsp",{uuid:1,name:"不支持中文"});
    });

分享到：

MQ 之为什么，何时使用ActiveMQ | slf4j 之使用logback轻松管理日志

2013-08-04 16:46
浏览 1356
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery之深入浅出jquery

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery之 深入浅出jquery

评论

发表评论

相关推荐

jQuery前端网页特效大全

HTML性能优化技巧

jQuery 之 nice Validator 0.2.0发布，jQuery智能表单验证

jQuery 之 跨域访问

jQuery 之 几种常用方法

jQuery 之 1.4十大新特性解读

13333

jQuery 之 用技巧来提高代码质量

JSON 之 利用JSON插件进行数据交换格式

jQuery Dom操作 之 移动和复制dom节点

jQuery 之 纯js实现JSONP跨域

jQuery 之 jsonp跨域原理

jQuery 之 与Dom对象之间转换

jQuery 之 nt-child

jQuery 之 防止重复提交

jquery 之 JSON的解析方式

jQuery 之 ajax json

最近访客更多访客>>

jQuery之深入浅出jquery

jQuery 之跨域访问

jQuery 之几种常用方法

jQuery 之用技巧来提高代码质量

JSON 之利用JSON插件进行数据交换格式

jQuery Dom操作之移动和复制dom节点

jQuery 之纯js实现JSONP跨域

jQuery 之与Dom对象之间转换

jQuery 之防止重复提交