`

jquery-总结

    博客分类:
  • W3C
 
阅读更多

jQuery的另一好处。控制与html分离

        //不用在html上加,onblur();

        $("#loginname").blur(function(){

 

onchange 绑定2个方法,2个都会执行,按先后顺序。

 

jQuery包裝了各种浏览器版本对DOM对象的操作,因此统一使用$(this)而不再用this应该是比较不错的选择。

但是$(this)只能操作jquery对象。他们的区别是

$(this).attr(’title’, ‘Test’);<==>this.title = "Test";

ajax

$.ajax({

           type: "POST",

           url: "some.php",

           data: "name=John&location=Boston",

           success: function(msg){

             alert( "Data Saved: " + msg );

           }

});

 

遍历循环:

        $("img").each(function(i){

                //this指DOM对象(html元素)其实是JavaScript的操作,$(this)是jquery对象,只能用jquery方法。

                this.src = "test" + i + ".jpg";

        });

        $("img").get(0);

 

 

一、属性:

        属性:

                显示属性$("img").attr("src");

                设置属性$("img").attr("src","test.jpg");

                批量设置属性$("img").attr({ src: "test.jpg", alt: "Test Image" });

                变量值设置属性$("img").attr("title", function() { return this.src });

                删除属性$("img").removeAttr("src");

 

CSS-class

                $("p").addClass("a b");;        

                $("p").removeClass("a");$("p").removeClass();

                $("p").toggleClass("a");//如果存在(不存在)就删除(添加)一个类。

                 $(this).toggleClass("a", count++ % 3 == 0);//表达式为true就加上,否则删除class

 

        html

                .html();

                .html("hello world!");

 

        val

                $("input").val();

                $("input").val("hello world!");

 

三、选择器

        $("#myId")

        $("div")

        $(".myClass")

        $("span,p.myClass")并列

        $("form input")层级

        $("input:[type='button'],[type='reset']")

        p.myClass(p与.myClass同级),p .myClass(父子关系)

 

        $("form > input")父子关系

        $("form input")父,子孙全部后代关系

        $("label + input")//匹配所有(紧接在 prev 元素后的 next 元素)

        $("form ~ input")//匹配 prev 元素之后的所有 siblings(兄弟) 元素

 

:*代表的是过滤条件。        

        $("tr:first")//查找表格的第一行,:first匹配找到的第一个元素

        $("input:not(:checked)")//???用法

        $("tr:even")

        $("tr:odd")//表格的2,4,6行。

        $("tr:eq(1)")//表格的第二行。

        $("tr:gt(0)")//index从 0 开始计数

 

        $("div:contains('John')")//所有包含 "John" 的 div 元素

        $("td:empty")//所有不包含子元素或者文本的空元素

        $("div:has(p)").addClass("test");//给所有包含 p 元素的 div 元素添加一个 text 类

        $("td:parent")//所有含有子元素或者文本的 td 元素

        $("tr:hidden")//查找隐藏的 tr

                style="display:none"或type="hidden"的都查出来。

 

        $("div[id]")//查找所有含有 id 属性的 div 元素

        $("input[name='newsletter']")//查找所有 name 属性是 newsletter 的 input 元素

        $("input[name!='newsletter']") 

        $("input[name^='news']")//查找所有 name 以 'news' 开始的 input 元素

        $("input[name$='letter']")//查找所有 name 以 'letter' 结尾的 input 元素

        $("input[name*='man']")//查找所有 name 包含 'man' 的 input 元素

        $("input[id][name$='man']")//找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的

 

:*下面的也可以理解为过滤条件。???

        $("ul li:nth-child(2)")//在每个 ul 查找第 2 个li

        nth-child(even)(odd)(3n)(2)(3n+1)        

        $("ul li:first-child")//在每个 ul 中查找第一个 li

 

表单        

        $(":input")//查找所有的input元素

        $(":text")//查找所有文本框

                :password,:radio,:checkbox,...

表单属性

        $("input:checked")//查找所有选中的复选框元素

        $(":radio:checked")

 

过滤条件:

        $("p").eq(1)//获取第2个元素,index从0算起。

         $(this).hasClass("protected")//返回true,false

        $("p").filter(".selected, :first")//筛选出第一个以及带有selected类的元素

        $("p").filter(function(index) {return $("ol", this).length == 0;});//筛选出子元素中不含有ol的元素。

        $("p").not( $("#selected")[0] )//删除id="select"的p元素

          $("p").slice(0, 1).wrapInner("<b></b>");//取子集。

          $("div").children(".selected")//所有子元素

        $("p").contents().not("[nodeType=1]").wrap("<b/>");//查找所有文本节点并加粗

        //contents()元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容

        $("p").find("span")//从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同

        $("p").next(".selected")//找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

        $("p").parent()//查找每个段落的父元素//$("p").parent(".selected")

        $("span").parents()//找到每个span元素的所有祖先元素。(不包含根元素)

        $("p").prev()//找到每个段落紧邻的前一个同辈元素。

        $("div").siblings()//找到每个div的所有同辈元素。

        $("div").find("p").andSelf().addClass("border");//选取所有div以及内部的p,并加上border类

 

文档处理:插入时,若已存在,则为移动。

        内部插入:

                $("p").append("<b>Hello</b>");//向所有段落中追加一些HTML。

                $("p").appendTo("div");//把所有段落追加到div中

                $("p").prepend("<b>Hello</b>");//向所有段落中前置一些HTML标记代码。

                $("p").prependTo("#foo");

        外部插入:

                $("p").after("<b>Hello</b>");//在所有段落之后插入一些HTML标记代码。

                $("p").before("<b>Hello</b>");//在所有段落之前插入一些HTML标记代码。

        包裹:

                $("p").wrap("<div class='wrap'></div>");//把所有的段落用一个新创建的div包裹起来

                $("p").wrapInner("<b></b>");//把所有段落内的每个子内容加粗(包裹)

        替换:

                $("p").replaceWith("<b>Paragraph. </b>");//把所有的段落标记替换成加粗的标记。

        删除:

                $("p").empty();//把所有段落的子元素(包括文本节点)删除

                $("p").remove(".hello");//从DOM中把带有hello类的段落删除

 

CSS

        $("p").css("color","red");

        $("p").css({ "margin-left": "10px", "background-color": "blue" });        

        其他略        

 

事件:

        不是所有的元素都有所有的事件。比如p元素就没有blur事件。

        $("p").click();//模拟单击,触发click事件。

        页面载入

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

        事件处理

                bind(type, [data], fn)//绑定一个事件处理器函数。

                 如果想取消(浏览器)默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false

                function handler(event) {alert(event.data.fo2);}

                  $("p").bind("click", {fo1: "b1",fo2:"b2"}, handler)//绑定函数handler

                  $("p").bind("click", function(){alert( $(this).text() );});

 

 

                $("p").bind("myEvent", function (event, message1, message2) {

                        alert(message1 + ' ' + message2);

                });

                $("p").trigger("myEvent", ["Hello","World!"]);//触发某类事件

 

live

        $("p").live("click", function(){...}//live类似bind

        //用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。

        比如说,如果你给页面上所有的li用live绑定了click事件。

        那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用        

    hover

模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)

                                $("p").hover(

                                  function () {alert(1);},

                                  function () { alert(2);}

                                );

toggle开关

每次点击后依次调用函数。

        $("li").toggle(

              function () {

                $(this).css({"list-style-type":"disc", "color":"blue"});

              },

              function () {

                        $(this).css({"list-style-type":"disc", "color":"red"});

              },

              function () {

                $(this).css({"list-style-type":"", "color":""});

              }

       );

 

$("#"+textid).attr("disabled")

变量时,这样用$("#"+textid)。$("input[id$=text]:not(:disabled)")

 

工具:数组对象的操作。

 

css里没有disabled readonly属性,可以通过jquery的inputs.attr("disabled","disabled");来实现。

 

 

模拟单击事件,事实上你并没有单击,而是系统替你完成的 

1.$(document).ready(function(){   

2.    $("#btnParent h3").trigger("click");   

3.});  

 

select的readonly无效。用disabled=true,用隐藏域来进行传值,或


分享到:
评论

相关推荐

    最新版JQuery-jquery-3.2.1.min.js

    总结,jQuery 3.2.1版是一个更加精炼和现代的版本,尽管移除了`jQuery.holdReady()`和`jQuery.isArray()`,但其核心功能依然强大且全面。开发者应利用jQuery提供的API,结合最新的JavaScript特性,构建高性能、易...

    jquery-3.2.0.js,jquery-3.2.0.min.js

    总结 jQuery 以其简洁的语法和强大的功能,极大地降低了 JavaScript 开发的复杂性,使得前端开发者能更专注于实现业务逻辑,而不是解决浏览器兼容性问题。"jquery-3.2.0.js" 和 "jquery-3.2.0.min.js" 是 jQuery ...

    jquery-ui.min.js

    总结起来,`jquery-ui.min.js`是jQuery UI的核心,包含了一系列强大的用户界面组件。通过它,开发者可以轻松创建具有丰富交互和良好用户体验的网页应用。无论是初学者还是经验丰富的开发者,jQuery UI都是构建高效、...

    jquery-2.0.0.js 、jquery-2.0.0.min.js 【官方jquery包 js】

    总结来说,jQuery 2.0.0是一个面向现代浏览器的高性能库,其精简的代码和强大的功能为开发者带来了极大的便利。在实际开发中,结合合理的优化策略,可以大幅提升Web应用的用户体验和开发效率。无论是初学者还是经验...

    jquery-migrate-3.0.1.js jar包

    总结来说,jQuery Migrate 3.0.1.js是开发者升级jQuery版本时的一把得力工具,它降低了迁移过程中的风险,同时也提供了明确的指导,帮助开发者逐步摆脱对旧API的依赖,更好地拥抱jQuery的新特性。在实际使用中,应...

    jquery-validation-1.19.1.zip

    总结来说,jQuery-validation-1.19.1不仅提供了强大的表单验证功能,还通过完善的文档和丰富的示例,帮助开发者快速理解和使用。其内部结构清晰,源码易于阅读,是学习和实践客户端验证的优秀资源。通过深入研究这个...

    jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】

    总结,jQuery 3.0.0作为一款成熟的JavaScript库,不仅在功能上满足了开发者的需求,还在性能和兼容性上做了大量优化。无论是在小规模的个人项目,还是大型的企业级应用,jQuery都能展现出其强大而实用的一面。通过...

    jquery-2.0.3.js和jquery-2.0.3.min.js

    总结来说,jQuery 2.0.3作为一款强大的JavaScript库,不仅提供了丰富的功能,而且在性能和代码简洁性上都有所提升。对于那些关注现代浏览器和高性能应用的开发者来说,这是一个值得信赖的选择。同时,通过压缩包中的...

    Jquery下載,Jquery-3.5.1

    ### 总结 jQuery-3.5.1 是一个强大且成熟的 JavaScript 库,它提供了一套高效、简洁的 API 来处理常见的前端任务。尽管现代前端开发有其他选择,但理解并掌握 jQuery 对于任何 Web 开发者来说仍然是有价值的,特别...

    jquery-2.1.1.js 、jquery-2.1.1.min.js 【jquery包 js】

    《jQuery 2.1.1:...总结来说,jQuery 2.1.1是JavaScript开发中的重要工具,它通过简洁的API和强大的功能,极大地提高了开发效率。无论你是初学者还是经验丰富的开发者,掌握jQuery都能让你在网页开发中游刃有余。

    jquery-ui-1.11.4完整版

    总结,jQuery UI 1.11.4是一个强大且全面的前端UI框架,它提供了多种用户界面元素和交互效果,极大地扩展了jQuery的功能。开发者可以通过简单易用的API,快速构建功能丰富的、具有良好用户体验的Web应用。无论是在...

    jQuery/jquery-1.7.2.min.js jquery-1.7.2.js 文件

    **总结** jQuery 1.7.2是一个经典且广泛使用的JavaScript库,它通过高效且简洁的API极大地方便了Web开发。无论是DOM操作、事件处理、动画还是Ajax交互,jQuery都能让开发者以更低的学习成本实现丰富的功能。尽管...

    jquery-migrate-1.2.1.min.js

    总结来说,"jquery-migrate-1.2.1.min.js"是开发者在升级jQuery版本时的有力工具,它提供了向后兼容性,同时也提醒开发者及时更新和优化代码。在依赖旧API的项目中,合理使用jQuery Migrate可以帮助实现平滑过渡,但...

    jquery-ui-1.10.0.custom.zip

    总结,jQuery UI 1.10.0 自定义版本为开发者提供了强大的界面组件和高度可定制的主题,通过合理选择和配置,可以构建出高效、美观且易用的 Web 应用。在实际项目中,掌握 jQuery UI 的使用不仅能提升开发效率,也能...

    jquery-ui-1.8.6 js库

    总结,jQuery UI 1.8.6 是一款强大的前端开发工具,它以其丰富的组件、优雅的样式和良好的可定制性,极大地提高了开发效率和用户体验。无论是新手还是经验丰富的开发者,都能从中受益,轻松实现网页的互动效果。

    jquery-ui-1.10.3.custom.rar jquery 日期插件 带时间选择

    总结起来,jQuery UI 1.10.3 自定义版本中的日期插件提供了灵活的日期选择功能,通过适当的配置,可以满足各种复杂的业务需求。同时,通过与其他插件的配合,还能实现日期时间的联合选择,为用户带来更便捷的操作...

    jquery-1.8.2.min.js

    总结来说,"jquery-1.8.2.min.js"是SSM整合课程中的重要资源,它体现了jQuery库的精髓,帮助开发者高效地处理前端任务,提升用户体验。对于任何想要深入Web开发的人来说,理解和掌握jQuery都是至关重要的一步。

    jquery-easyui-themes.rar_easyui 主题_easyui主题_html_jquery_jquery-e

    总结来说,jQuery EasyUI的主题系统为开发者提供了丰富的选择,不仅可以快速构建美观的用户界面,还能根据项目的特性和用户偏好进行个性化定制。通过对"jquery-easyui-themes.rar"中的主题资源进行灵活运用,开发者...

    jQuery-File-Upload

    总结,jQuery-File-Upload是一个强大且灵活的文件上传解决方案,它简化了前端文件上传的复杂性,提供了丰富的功能和高度的可定制性。无论你是初学者还是经验丰富的开发者,都能从中受益。在实际项目中,结合合理的...

    jquery-ui+jquery-ui-rails

    总结来说,jQuery UI与Rails的结合使用可以大大提升Web应用的交互性和用户体验。通过`jquery-ui-rails` gem,我们可以轻松地在Rails项目中集成jQuery UI的各种组件,从而实现丰富的前端功能。在实际开发过程中,根据...

Global site tag (gtag.js) - Google Analytics