JS基础（四）之jQuery

31、jQuery(http://jquery.com/)是一个快速、简洁的JavaScript框架。

它封装了JavaScript常用的功能代码，提供一种便捷的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery主要包括jQuery Core(核心库)、jQuery UI(界面库)、Sizzle(CSS选择器)、jQueryMobile(jQuery移动版)和QUnit(测试套件)5个部分

32、jQuery特性

优雅的语法规则：发生在同一个jQuery对象上的一组动作，可直接连写，无需重复获取对象
框架封闭：jquery只建立一个名为jQuery的对象，其所有的方法都建立在这个对象之下
封装繁琐的底层技术：jQuery定义了大量的方法，还封装了大量的事件处理函数，是的jQuery处理事件绑定非常稳定；将所有的Ajax操作封装到一个函数$.ajax()中
自成体系：完全摆脱JavaScript的设计模式，允许用户在jQuery环境下跳动jQuery函数选择相关匹配元素，然后直接在jQuery对象上完成操作而无需在jQuery和JavaScript两种设计模式中来回切换

33、jQuery构造器

jQuery构造器即jQuery()函数，简写为$()，可以接收4个类型的参数

 $(function(){

     var red = $("p span");        //选择元素中包含的span元素，并返回该元素的jQuery对象引用指针

     red.css("color","red");        //调用jQuery对象的css()函数，定义选取对象的CSS样式，其中第1个参数表示CSS属性名，第2个参数表示CSS属性值。

 })

 </script>

 <script>

 $(function(){

     $("<div><span>文本块3</span></div>").appendTo("body");//HTML代码段

 })

 </script>

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

 <script>

 $(function(){

     $("span").css("font-size","12px");//把元素转化为jQuery对象，在调用jQuery方法

 })

 </script>

 <script>

 $(function(){

         alert("Hello World!");//jQuery绑定函数

 });

 </script>

 <script>

 $(function(){

     var span = document.getElementsByTagName("span")[];     //获取节点对象，此时返回DOM元素对象

     var span = $(span);                //把DOM对象转换为jQuery对象

     span.css("color","red");            //调用jQuery对象的css()方法定义字体颜色为红色

 });

 </script>

 <script>

 $(function(){

     var span = $("span")[];                //把jQuery对象转换为DOM对象

     span.style.color = "blue";            //调用DOM对象的style属性，设置字体颜色为蓝色

 });

 </script>

34、jQuery基本用法

 <script>

 $(function(){

     var li = $("li");

     li.each(function(n){

         this.style.fontSize = - n* +"px";//$(this).css("font-size",30- n*2 +"px");

         if(n==) return false;

     });

 })

 </script>

 <script>

 $(function(){

     var li = $("li");

     alert(li.size());                                //返回值为10

     alert(li.length);                                 //返回值为10

 })

 </script>

 <script>

 $(function(){

     var li = $("li").get().reverse();            //把当前jQuery对象转换为为颠倒的DOM集合

     var ol = $("ol").html(li);

 })

 </script>

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

 <script>

 $(function(){

     var li = $("li");

     var temp  = $("li:contains('陆 游')");

     alert(li.index(temp));

 })

 </script>

 </head>

 <body>

 <h1>宋词排行榜 </h1>

 <ol>

     <li>苏 轼《念奴娇·赤壁怀古》</li>

     <li>岳 飞《满江红·怒发冲冠》 </li>

     <li>李清照《声声慢·寻寻觅觅》 </li>

     <li>苏 轼《水调歌头·明月几时有》 </li>

     <li>柳 永《雨霖铃·寒蝉凄切》 </li>

     <li>辛弃疾《永遇乐·千古江山》 </li>

     <li>姜 夔《扬州慢·淮左名都》 </li>

     <li>陆 游《钗头凤·红酥手》 </li>

     <li>辛弃疾《摸鱼儿·更能消》 </li>

     <li>姜 夔《暗香·旧时月色》 </li>

 </ol>

 <script>

 $(function(){

     var href = $("a").attr("href");//只显示第一个值

     alert(href);

 })

 </script>

 </head>

 <body>

 <ul>

     <li><a href="http://www.baidu.com/" target="_blank">百度</a></li>

     <li><a href="http://www.sohu.com/" target="_self">搜狐</a></li>

     <li><a href="http://www.sina.com.cn/" target="_top">新浪</a></li>

     <li><a href="http://www.qq.com/" target="new">腾讯</a></li>

 </ul>

 <script>

 $(function(){

     var href = $("a:contains('搜狐')").attr("href");

     alert(href);

 })

 </script>

 <script>

 $(function(){

     $("a").each(function(){

         $(this).attr("title",this.innerHTML + "（" + $(this).attr("href") + "）" );

     });

 })

 </script>

 <script>

 $(function(){

     $("a").attr("title", function(){//增加属性

         return this.innerHTML + "（" + $(this).attr("href") + "）" ;

     });

 })

 </script>

 <script>

 $(function(){ //增加多个属性

     $("img").attr({width:"",height:"",title:"这是一个示例",alt:"示例图像"});

 })

 </script>

 <script>

 $(function(){

     $("img").removeAttr("width");//删除指定属性

 })

 </script>

 <script>

 $(function(){ //定义类样式

     $("p").addClass("red");//$("p").attr("class","red");

 })

 </script>

 <script>

 $(function(){

     $("li").each(function(){                            //遍历jQuery对象内所有对象

             this.onmouseover = function(){                //为当前元素注册鼠标经过时的事件

                 $(this).toggleClass("bg");                    //开关背景样式类（bg）

             }

             this.onmouseout = function(){                    //为当前元素注册鼠标移开时的事件

                 $(this).toggleClass("bg");                    //开关背景样式类（bg）

             }

             this.onclick = function(){                        //为当前元素注册鼠标单击时的事件

                 $(this).toggleClass("bg1");                //开关背景样式类（bg1）

             }

     });

 })

 </script>

 <body>

 <p>段落文本<span></span></p>

 <script>

 alert($("p").text());//输出段落文本1，忽略span标签

 </script>

 </body>

 <body>

 <p>段落文本<span></span></p>

 <script>

 $("p").text("<img src='images/1.jpg' width='100' />");//替换文本 输出<img……>

 </script>

 </body>

 <body>

 <p>段落文本<span></span></p>

 <script>

 alert($("p").html());//输出 段落文本<span>1</span>

 </script>

 </body>

 <body>

 <p>段落文本<span></span></p>

 <script>

 $("p").html("<img src='images/1.jpg' width='100' />");//输出 图片

 </script>

 </body>

 <body>

 <input type="text" value="文本框" />

 <input type="radio" value="单选按钮" />

 <input type="checkbox" value="复选框" />

 <input type="hidden" value="隐藏域" />

 <input type="submit" value="提交按钮"/>

 <script>

 alert($("input").val());

 alert($($("input")[]).val());                        //显示单选按钮的值

 alert($($("input")[]).val());                        //显示复选框的值

 alert($($("input")[]).val());                        //显示隐藏域的值

 alert($($("input")[]).val());                        //显示提交按钮的值

 </script>

 </body>

 <body>

 <select multiple="multiple">

     <option value="">选项1</option>

     <option value="" selected="selected">选项2</option>

     <option value="" selected="selected">选项3</option>

 </select>

 <script>

 alert($("select").val());//输出 2,3

 </script>

 </body>

 <body>

 <input type="text" />

 <script>

 $("input").val("文本框的值");//为文本框赋值 文本框的值

 </script>

 </body>

 <body>

 <input type="radio" value="radio1" />单选按钮1

 <input type="radio" value="radio2" />单选按钮2<br>

 <input type="checkbox" value="check1" />复选框1

 <input type="checkbox" value="check2" />复选框2<br>

 <select multiple="multiple">

     <option value="">选项1</option>

     <option value="">选项2</option>

     <option value="">选项3</option>

 </select>

 <script>

 $("input").val(["radio2","check2"]);//单选按钮和复选框必须要使用数组来传递值

 $("select").val(["",""]);//下拉菜单可以不用数组传递值

 </script>

 </body>

35、选择器和过滤器

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

 <script>

 $(function(){

     $("#p1");                                //ID选择器

     $("#box1 p");                            //包含选择器

     $("#box1>#p1");                        //子选择器

     $("p#p1");                            //指定标签选择器

     $("p[id='p1']");                         //匹配属性等于特定属性值

     $("[id$='1']");                             //匹配属性值结尾的值

     $("#box1 [id^='p']");                     //包含选择器，配合匹配属性值开始的值

     $("[id*='1']");                             //匹配属性值包含某个字符串

 })

 </script>

 <script>

 $(function(){

     var $temp = $("li");

     $temp.css("color","red");//类选择器

 })

 </script>

 <style type="text/css">

 </style>

 </head>

 <body>

 <ul id="list">

     <li>列表项1</li>

     <li>列表项2</li>

     <li class="l3">列表项3</li>

     <li></li>

 </ul>

 </body>

 <script>

 $(function(){

     $("div:hidden").css("display","block");//使隐藏元素显示出来

 })

 </script>

 <style type="text/css">

 </style>

 </head>

 <body>

 <div>盒子1</div>

 <div style="display:none">盒子2</div>

 <div><p>盒子3</p></div>

 </body>

 <script>

 $(function(){//表单选择器，:input匹配input、select、button、textarea元素

     $("input:text").css("border","solid 1px red");

     $("input:checkbox").css("border","solid 1px red");

     $("input:radio").css("border","solid 1px red");

     $(":image").css("border","solid 1px red");

     $(":file").css("border","solid 1px red");

     $(":submit").css("border","solid 1px red");

     $(":reset").css("border","solid 1px red");

     $(":password").css("border","solid 1px red");

     $(":button").css("border","solid 1px red");

 })

 </script>

 <style type="text/css">

 </style>

 </head>

 <body>

 <form>

     <input type="text" value="文本框" />

     <input type="checkbox" value="复选框" />复选框

     <input type="radio" value="单选按钮" />单选按钮

     <input type="image" src="data:images/1.jpg" value="图像按钮" />

     <input type="file" value="文件域" />

     <input type="submit" value="提交按钮" />

     <input type="reset" value="重置按钮" />

     <input type="password" value="密码域" />

     <input type="button" value="普通按钮" />

     <select>

         <option value="下拉菜单">下拉菜单</option>

     </select>

     <textarea>文本域</textarea>

     <button>按钮</button>

 </form>

 </body>

 <script>

 $(function(){//过滤器是函数

     var divs = $("div");

     divs.eq().css("color","red");//索引值为0 即第一个div元素

     divs.filter(".red,#box1").css("color","red");//过滤出满足匹配条件的div元素

     divs.slice(,).css("color","red");//使用slice函数进行过滤

 })

 </script>

 <style type="text/css">

 </style>

 </head>

 <body>

 <div>盒子1</div>

 <div id="box1">盒子2</div>

 <div class="red">盒子3</div>

 </body>

36、文档处理、css处理

 <script>

 $(function(){

     $("div").append("<span style='color:red'>套子</span>");//span标签放在div标签里，盒子后

 })

 </script>

 <style type="text/css">

 </style>

 </head>

 <body>

 <div>盒子</div>

 </body>

 <script>

 $(function(){

     $("p").appendTo("#box");//p放在div里，div内容后

     $("p").prepend($("#box")[]);//div放在p里，p内容前

     $("p").prependTo($("#box")[]);//p放在div里，div内容前

 })

 </script>

 <script>

 $(function(){

     $("div").after($("p"));

     $("div").before($("p"));

     $("div").insertAfter($("p"));

     $("div").insertBefore($("p"));

 })

 </script>

 <style type="text/css">

 </style>

 </head>

 <body>

 <p>段落</p>

 <div id="box">盒子</div>

 </body>

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

 <script>

 $(function(){

     $("a").wrap(document.getElementsByTagName("li")[]);//    $("a").wrap("<div></div>");//为每个a元素包裹一层li元素

     $("li").wrapAll(document.getElementsByTagName("ul")[]);//为所有的li元素包裹一个ul元素

     $("li").wrapInner("<span></span>");//为每个li元素内嵌一层span元素

 })

 </script>

 <style type="text/css">

 </style>

 </head>

 <body>

 <a href="#">超链接1</a><a href="#">超链接2</a><a href="#">超链接3</a>

 </body>

 <script>

 $(function(){

     $("span").replaceWith("<div>盒子</div>");//输出 <div>盒子</div><div>盒子</div><div>盒子</div>

         $("span").replaceAll("div");//与上相反

 })

 </script>

 <style type="text/css">

 </style>

 </head>

 <body>

 <span>包子</span><span>包子</span><span>包子</span>

 </body>

 <script>

 $(function(){

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

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

    }).clone(true).appendTo("p");//克隆事件添加到p标签里 段落文本之后

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

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

    })

    var span=$("span").remove();// remove()删除元素不保留事件 单击不变色

    $("p").prepend(span);//span元素剪切到span元素里 段落文本之前

 /*

    var span=$("span").detach();

    $("p").prepend(span);//detach()删除元素保留事件 单击span变红

 */

 })

 </script>

 <style type="text/css">

 </style>

 </head>

 <body>

 <div>盒子1</div>

 <p>段落文本3</p>

 <span>span</span>

 </body>

 <script>

 $(function(){

     $("p").css({//CSS属性名可以不加引号，但是对于复合属性名，则必须增加引号

         color:"blue",

         "font-size":"14px",

         "background-color":"red"

     });

     $("p").css("border","solid 1px blue");

     alert($("p").css("border"));

 })

 </script>

 <style type="text/css">

 </style>

 </head>

 <body>

 <p>段落1</p><p>段落2</p>

 </body>

 <script>

 $(function(){

     $("p:last").offset({

         left:,

         top:

     });

     var offset = $("p:last").offset();

     alert( "左侧距离: " + offset.left + ", 顶部距离: " + offset.top );

 })

 </script>

 <script>

 $(function(){

     var div = $("div");

     $("p").html("innerHeight=" + div.innerHeight() + "<br> outerHeight=" + div.outerHeight());//输出innerHeight=199.8

 outerHeight=

 })

 </script>

 <style type="text/css">

 div{

     width:100px;

     height:100px;

     padding:50px;

     border:solid 50px red;

 }

 </style>

 </head>

 <body>

 <div></div>

 <p></p>

 </body>

37、事件处理、动画处理

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

 <script>

 window.onload=function(){

     alert("页面加载完毕4！");

 }

 window.onload=function(){

     alert("页面加载完毕3！");

 }

 $(document).ready(function(){

     alert("页面加载完毕2！");

 })

 $(document).ready(function(){

     alert("页面加载完毕1！");

 })

 $(function(){

         alert("页面加载完毕0！");

 })

 $(function(){

         alert("页面加载完毕-1！");

 });

 function f(){

     alert("页面加载完毕-2！");

 }

 </script>

 <style type="text/css">

 </style>

 </head>

 <body onload="f()">//2 1 0 -1 -2

 </body>

 <script>

 $(function(){

     $("div").bind("me",function(){//$('#myol li').bind('click',getHtml);$('#myol li').live('click',getHtml);$('#myol').delegate('li','click',getHtml);$('#myol li').on('click',getHtml);$('#myol').on('click', 'li',getHtml);

         alert($(this).text());//live()方法已废除，bind()方法、delegate()方法都调用内部on()方法，建议使用on()方法，更快更灵活;

     });

         $("div").trigger("me");//默认时间和自定义事件必须由此方法来触发

 /*

     $("div").bind("mouseover",function(){//或者把trigger方法封装在其他事件中，借由鼠标滑入时自动触发

         $("div").trigger("me");

     })

 */

     $("div").bind("click",function(){//绑定鼠标单击事件

         alert($(this).text());

     })

     $("p").bind("mouseover",function(){//借由鼠标滑入触发单击事件或者直接单击也可以触发该事件

         $("div").trigger("click");

     })

     $("input").focus(function(){

         $("<span>单击一次！</span>").appendTo("body");

     })

     $("#ok").click(function(){

         $("input").triggerHandler("focus");//triggerHander方法阻止默认事件触发，本例聚焦事件只可以由单击事件触发，不再由聚焦事件触发

     })

 })

 </script>

 <script>

 $(function(){

     $("p").hover(//jQuery中自定义的两个事件hover(over,out)、toggle(fn,fn)

         function(){

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

         },

         function(){

             $(this).css("color","transparent");//恢复默认颜色

         }

     );

     $("footer").toggle(function(){//jQuery在1.9版本中删除toggle()方法

         $(this).css("color","pink");

     },

     function(){

         $(this).css("color","transparent");

     }

     );

     $("div").one("click",{who:"zhu"},function(event){//one()事件仅能执行一次即自动撤销

         alert(event.data.who);

     });

 });

 </script>

 <script>

 $(function(){

     $("p").show(,function(){//只有隐藏元素才可以执行show()方法

         alert($(this).text()+"显示完毕");

     })

     $("div").slideDown("slow");//分大小写 隐藏元素以滑动效果显示

     $("h2").show(,function(){//只有显示元素才可以执行hide()方法

         alert($(this).text()+"隐藏完毕");

     })

     $("h2").slideUp("slow");//显示元素以滑动效果隐藏

     $("h3").slideToggle("slow");//隐藏元素已经显示的元素 或者显示已经隐藏的

 })

 </script>

 <style type="text/css">

 </style>

 </head>

 <body>

 <p style="display:none">段落文本</p>

 <div style="display:none">示例div元素</div>

 <h2>h2示例元素</h2><br/><br/>

 <h3>h3元素示例</h3>

 </body>

 <script>

 $(function(){

     $("p").fadeIn("");//只能作用于隐藏元素

     $("p").bind("mouseover",function(){//淡出淡入

         $("p").fadeOut();

         $("p").fadeIn();

         $("p").fadeOut();

         $("p").fadeIn();

     })

     $("div").fadeTo("slow",0.1,function(){

         $(this).fadeTo("slow",);

     })

 })

 </script>

 <style type="text/css">

 </style>

 </head>

 <body>

 <p style="display:none">段落文本段落文本段落文本段落文本段落文本</p>

 <div>雨夜，湖边风雨发作，直教人瑟瑟发抖！</div>

 </body>

JS基础（四）之jQuery的更多相关文章

node.js(基础四)_express基础
一.前言本次内容主要包括: 1.express的基本用法 2.express中的静 ...
JS基础四
1.函数是一组可以随时随地运行的语句. 函数是 ECMAScript 的核心. 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 2.闭包,指的是 ...
前端总结·基础篇·JS（四）异步请求及跨域方案
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
Three.js基础探寻四——立方体、平面与球体
前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也 ...
Bootstrap<基础四> 代码
Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...
前端面试题目汇总摘录（JS 基础篇）
JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...
js基础梳理-如何理解作用域和作用域链？
本文重点是要梳理执行上下文的生命周期中的建立作用域链,在此之前,先回顾下关于作用域的一些知识. 1.什么是作用域(scope)? 在<JavaScritp高级程序设计>中并没有找到确切的关 ...
前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
前端面试题目汇总摘录（JS 基础篇 —— 2018.11.02更新）
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
玩转Node.js（四）-搭建简单的聊天室
玩转Node.js(四)-搭建简单的聊天室 Nodejs好久没有跟进了,最近想用它搞一个聊天室,然后便偶遇了socket.io这个东东,说是可以用它来简单的实现实时双向的基于事件的通讯机制.我便看了一 ...

随机推荐

RabbitMQ Java实例
引入RabbitMQ的jar包 <dependency> <groupId>com.rabbitmq</groupId> <artifactId>amq ...
(转)mysql5.7 根据二进制文件mysqlbinlog恢复数据库 Linux
原文:http://blog.csdn.net/qq_15058425/article/details/61196085 1.开始mysqlbinlog日志功能先找打my.cnf文件的位置: 2.编 ...
Android Studio启动速度慢的问题。
Android Studio每次启动都要去fetching sdk,由于Android sdk 官网在大陆连不上,所以每次启动时界面都会停在那里很久. 要提高启动速度,就要避免每次启动Android ...
C/C++ -- Gui编程 -- Qt库的使用 -- 信号与槽的关联
Qt信号与槽的三种关联方法:1.设计界面关联,编辑信号/槽,自动关联 2.手动关联(1).头文件中定义槽 -----mywidget.h----- #ifndef MYWIDGET_H #define ...
Etcd安全配置之Basic Auth认证
<中小团队落地配置中心详解>文章中我们介绍了如何基于Etcd+Confd构建配置中心,最后提到Etcd的安全问题时说了可以使用账号密码认证以达到安全访问的目的,究竟该如何开启认证以及怎么设 ...
GBDT多分类示例
相当于每次都是用2分类,然后不停的训练,最后把所有的弱分类器来进行汇总样本编号花萼长度(cm) 花萼宽度(cm) 花瓣长度(cm) 花瓣宽度花的种类 1 5.1 3.5 1.4 0.2 山鸢尾 ...
java 之异常处理小结
1 :分类检查异常(checked,受检) 运行异常(unchecked) 2:捕获异常 try/catch try/catch/finally try/finally try{ //受保 ...
Nginx反向代理实现会话（session）保持的两种方式（转）
http://blog.csdn.net/gaoqiao1988/article/details/53390352 一.ip_hash: ip_hash使用源地址哈希算法,将同一客户端的请求总是发往同 ...
NFS文件共享服务搭建
一.概述 NFS工作流程 1.由程序在NFS客户端发起存取文件的请求,客户端本地的RPC(rpcbind)服务会通过网络向NFS服务端的RPC的111端口发出文件存取功能的请求. 2.NFS服务端的R ...
用java实现一个简易编译器1-词法解析入门
本文对应代码下载地址为: http://download.csdn.net/detail/tyler_download/9435103 视频地址: http://v.youku.com/v_show/ ...

JS基础（四）之jQuery

31、jQuery(http://jquery.com/)是一个快速、简洁的JavaScript框架。

32、jQuery特性

33、jQuery构造器

jQuery构造器即jQuery()函数，简写为$()，可以接收4个类型的参数

34、jQuery基本用法

35、选择器和过滤器

36、文档处理、css处理

37、事件处理、动画处理

JS基础（四）之jQuery的更多相关文章

随机推荐

热门专题