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这个东东,说是可以用它来简单的实现实时双向的基于事件的通讯机制.我便看了一 ...

随机推荐

【wireshark】总体结构
1. 总体结构 wireshark的总体结构如下图所示. 2. 功能模块模块名功能源码子目录 GTK/Qt 处理所有的用户输入/输出(所有的窗口,对话框等等) /ui GTK: /ui/gtk ...
C# 后缀名
用Visual Studio进行开发时项目内会有很多文件,其中常见的文件名后缀及其功能如下: .sln:解决方案文件,为解决方案资源管理器提供显示管理文件的图形接口所需的信息. .csproj:项目文 ...
浅谈Express的put与del
假设有一个景区价格列表页,显示当前的价目表. 价目表存放在express应用的数组中: var tours = [ {id:0,name:'Hood River',price:99.99}, {id: ...
nacicat premium 快捷键
1.ctrl+q 打开查询窗口 2.ctrl+/ 注释sql语句 3.ctrl+shift +/ 解除注释 4.ctrl+r 运行查询窗口的s ...
System.Thread.TImer控件——http://www.360doc.com/content/11/0812/11/1039473_139824496.shtml
http://www.360doc.com/content/11/0812/11/1039473_139824496.shtml
Zookeeper+ActiveMQ集群搭建
搭建三台虚拟机安装centos7.要提前安装好jdk环境 1.环境准备,搭建三台虚拟机ip分别是 192.168.192.130 192.168.192.131 192.168.192.134 Zoo ...
LINUX下一句话添加用户并设置ROOT权限
来源:linux一条命令添加用户并设置密码 linux一条命令添加一个root级别账户并设置密码 LINUX提权,除非是拿的EXP反弹CMD,才会有回显,这样添加管理员方便了. 通常是在SHELL,菜 ...
Ruby on Rails Mountable vs. Full Engine
原文 :https://www.travisluong.com/ruby-on-rails-mountable-vs-full-engine/一个Rails Engine 本质是一个 Rails ap ...
mysql数据库修改字符编码问题
遇到这种情况,现有项目的数据库已经建好,数据表也已经创建完成. 问题来的,数据库不能插入中文,调试时候发现中文数据从发送请求到最后请求处理完成这些步骤,中文还没有发生乱码. 只有在存储到数据库后查询数 ...
j2ee高级开发技术课程第二周(web请求的整个过程、XML)
博客非原创,只是收集整理了一下网上的一些文章一.web请求的整个过程 1)把URL分割成几个部分:协议.网络地址.资源路径.其中网络地址指示该连接网络上哪一台计算机,可以是域名或者IP地址,可以包括 ...

JS基础（四）之jQuery

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

32、jQuery特性

33、jQuery构造器

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

34、jQuery基本用法

35、选择器和过滤器

36、文档处理、css处理

37、事件处理、动画处理

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

随机推荐

热门专题