程序博客网 > ubuntu用什么聊天工具

jQuery 新篇

来源：互联网 发布：ubuntu用什么聊天工具 编辑：程序博客网 时间：2024/06/06 15:16

1.JQuery设计思想

*选择网页元素

**模拟CSS选择元素

**独有表达式选择

**多种筛选方法

*JQuery写法

**方法函数化

**链式操作

**取值赋值合体

2.取值赋值

*当一组元素时，取值的是一组中的第一个

*当一组元素时，赋值的是一组中的全部元素

eg:$('#div').html('hello');——赋值$（'#div'）.html（）;——取值

3.$()下的常用方法

has（）-包含

eg:$('div').has('span').css('background','red');//not（）-不过滤，filter的反义功能filter()-对一组元素进行选择（过滤）
eg:$('div').filter('.box').css('background','red');//选择类名为box的div$('div').not('.box').css('background','red');//不选类名为box的div

区别：
*filter和not是针对当前元素，has是针对当前元素包含的内容。
next()-选择下一个兄弟节点

eg:$('div').next().css('backgorund','red');

prev()-选择上一个兄弟节点

eg:$('div').prev().css('backgorund','red');

find()-查找

eg:$('div').find('h2').css('backgorund','red');

eq()-一组元素中的下标（和数组中下标用法相同）

eg:$('div').find('h2').eq(1).css('backgorund','red');

index()-索引节点
attr()-设置属性、类名等

eg:$('div').attr('calss','box');

实例：编写选项卡
原生JS和JQuery都可以使用，但JQuery大大简化了代码。
HTML代码：

<!DOCTYPE html><html><head>    <title>使用JQuery实现垂直菜单</title>    <meta charset=utf-8>    <meta name=description content="Menu.html">    <meta name=viewport content="width=device-width, initial-scale=1">    <link rel="stylesheet" type="text/css" href="css/Menu.css">    <script src="js/jquery-1.3.2.min.js"></script></head><body><ul>    <li class="main">        <a href="#">*菜单一*</a>        <ul>            <li><a href="#">子菜单一</a></li>            <li><a href="#">子菜单二</a></li>        </ul>    </li>    <li class="main">        <a href="#">*菜单二*</a>        <ul>            <li><a href="#">子菜单一</a></li>            <li><a href="#">子菜单二</a></li>        </ul>    </li>    <li class="main">        <a href="#">*菜单三*</a>        <ul>            <li><a href="#">子菜单一</a></li>            <li><a href="#">子菜单二</a></li>        </ul>    </li></ul><script src="js/Menu.js"></script><br><br><br><br><ul>    <li class="main1">        <a href="#">*菜单一*</a>        <ul>            <li><a href="#">子菜单一</a></li>            <li><a href="#">子菜单二</a></li>        </ul>    </li>    <li class="main1">        <a href="#">*菜单二*</a>        <ul>            <li><a href="#">子菜单一</a></li>            <li><a href="#">子菜单二</a></li>        </ul>    </li>    <li class="main1">        <a href="#">*菜单三*</a>        <ul>            <li><a href="#">子菜单一</a></li>            <li><a href="#">子菜单二</a></li>        </ul>    </li></ul></body></html>

CSS代码：

ul li{    list-style: none;}ul{    padding:0;    margin:0;}.main,.main1{    background-image:url(../img/1.png);    background-repeat:repeat-x;    width: 100px;}li{    background-color:#eee;}a{    text-decoration:none;    padding-left:20px;    display: block;    padding-top:3px;    padding-bottom:3px; }.main a,.main1 a{    color:white;}.main li a,.main1 li a{    color:black;}/*对ul列表开始进行初始化*/.main ul,.main1 ul{    display: none;}.main1{    float: left;    margin-right:1px;}

JS代码：

$(document).ready(function(){    $(".main>a").click(function(){        // 方法一        var ulNode=$(this).next("ul");        // if(ulNode.css("display"=="none")){        //  ulNode.css("display","block");        // }else{        //  ulNode.css("display","none");        // }        // 方法二        // ulNode.show();&&ulNode.hide();        // 方法三        // ulNode.toggle(500);//参数：数字、slow、normal、fast        //方法四        // ulNode.slideDown()&&slideUp();//从上到下        //方法五        ulNode.slideToggle();//自动、综合        })    $(".main1").hover(function(){        $(this).children("ul").slideDown();    },function(){        $(this).children("ul").slideUp();    })})//修改主菜单的指示图标// function changeIcon(mainNode){//  if(mainNode){//      if(mainNode).css("background-image".indexOf("1.png")>=0){//          mainNode.css("background-image","url('img/2.png')");//      }else{//          mainNode.css("background-image","url('img/1.png')");//      }//  }// }

显示结果：
这里写图片描述

4.DOM操作（盒模型中应用）

innerWidth=width+padding
outerWidth=width+padding+border+(margin)

eg:$('div').outerWidth();//outerWidth=width+padding+border$('div').outerWidth(true);//outerWidth=width+padding+border+margin

5.与CSS一起使用

addClass（）——加载CSS样式
removeClass（）——移除css样式
toggleClass（）——作为开关，一进一出元素样式发生变化

eg:$(document).ready(function(){$("div").addClass();$("div").removeClass();$("div").click(function(){    $(this).toggleClass();})});

6.JQuery的遍历

*向下遍历：find、children

eg:$(document).ready(function(）{//children用法（可选参数，用于修改类div的子标签样式）$("#div").children().css({    border:"3px solid red"});//find用法（用于修改指定元素的样式）$("#div").find("p").css({    border:"3px solid red"});

*向上遍历：parent()、parents（）、parentutils()

eg:$(document).ready(function(){//parent()——只能找到直接父类，即只能向上遍历一层$("a").parent("#div").css({    border:"3px solid red"  });//parents（）——向上遍历所有的类名为div的标签$(document).ready(function(){$("a").parents("#div").css({    border:"3px solid red"  });//parentutils()——向上在a元素和类名为div元素之间进行遍历$(document).ready(function(){$("a").parentUtils("#div").css({    border:"3px solid red"  });});

*同级遍历：siblings()、next（）、nextAll（）、prev（）、prevAll（））、prevUtils（）

eg:$(document).ready(function(){//siblings()——同级元素样式全部修改$("a").siblings（).css({    border:"3px solid red"      });//next()——下一个元素修改//nextAll()——下面所有元素全部修改//prev（）——上一个元素被修改//prevAll（）——上面所有元素被修改//prevUtils（）——向上区间元素修改});

*遍历和过滤：first（）、last（）、not（）、filter（）、eq（）

eg:$(document).ready(function(){$("div p").first().css({"background":"red"});$("div p").eq(2).css({    background:"red",border:"3px solid red"});//其他使用类似});

7.jQuery的一些插件

*$(form).validate({options})——表单验证插件（jquery.validate.js&&jquery.validate.messages_cn.j）
例如，当点击表单中的“提交”按钮时，调用validate插件验证用户名输入是否符合规则，并将异常信息显示在页面中，如下图所示：
这里写图片描述
浏览器显示结果：
这里写图片描述
*$(form). ajaxForm ({options})——表单插件（jquery.form.js/css）
例如：个人信息展示
这里写图片描述
浏览器显示结果为：
这里写图片描述
*$(linkimage).lightBox({options}——图片灯箱插件（jquery.notesforlightbox.js/css）
例如，以列表的方式在页面中展示全部的图片，当用户单击其中某张图片时，通过引入的图片插件，采用“灯箱”的方式显示所选的图片，如下图所示：
这里写图片描述
浏览器显示结果为：
这里写图片描述
*$(linkimage).jqzoom({options})——图片放大镜插件（jquery.jqzoom.js/css）
例如，在页面中，添加一个被元素包含的图片元素，当在图片元素中移动鼠标时，在图片的右边，将显示放大后的所选区域效果，如下图所示：
这里写图片描述
浏览器显示结果为：
这里写图片描述
*cookie插件——保存：.cookie(key，value)；读取：.cookie(key)，删除：$.cookie(key，null)
使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录
例如，当点击“设置”按钮时，如果是“否保存用户名”的复选框为选中状态时，则使用cookie对象保存用户名，否则，删除保存的cookie用户名，如下图所示：
这里写图片描述
浏览器显示结果为：
这里写图片描述
*$(textbox).autocomplete(urlData,[options])——搜索插件（jquery.autocomplete.js/css）
搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择。
例如，当用户在文本框输入内容时，调用搜索插件的autocomplete()方法返回与输入内容相匹配的字符串数据，显示在文本框下，提示选择，如下图所示：
这里写图片描述
浏览器显示结果为：
这里写图片描述
*$(selector).contextMenu(menuId,{options})——右键菜单插件（jquery.contextmenu.js/css）
注意：这种效果在现在的H5中使用CSS中hover也能达到这样的效果。
右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作。
例如，选中页面元素，点击右键，弹出插件绑定的快捷菜单，点击菜单中的各个选项，便在页面中显示操作的对应名称。如下图所示：
这里写图片描述
浏览器显示结果为：
这里写图片描述
*$(Id).focusColor(color)——自定义对象级插件（jquery.lifocuscolor.js/css）
例如，在页面中，调用自定义的lifocuscolor插件，自定义li元素选中时的背景色，如下图所示：
这里写图片描述
浏览器显示结果为：
这里写图片描述
*twoaddresult——自定义类级别插件（jquery.twoaddresult.js/css）
使用格式如下：
.addNum(p1,p2)和.subNum(p1,p2)
上述调用格式分别为计算两数值相加和相减的结果，p1和p2为任意数值。
这里写图片描述
浏览器显示结果为：
这里写图片描述
*$(selector). draggable({options})——拖拽插件
拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果。
例如，在页面中的div元素中添加两个子类div，通过与拖曳插件绑定，这两个子类div元素只能在外层的父div元素中任意拖曳，如下图所示：
这里写图片描述
浏览器显示结果为：
这里写图片描述
*$(selector).droppable({options})——放置插件
除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，类似购物车效果。
例如，在页面中，通过调用droppable插件将“产品区”中的元素拖曳至“购物车”中，同时改变“购物车”的背景色和数量值，如下图所示：
这里写图片描述
*$(selector).sortable({options})——拖拽排序插件
拖曳排序插件的功能是将序列元素（例如option、li）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能。
例如，在页面中，通过加载sortable插件将ul各个li项实现拖曳排序的功能，如下图所示：
这里写图片描述
浏览器显示结果为：
这里写图片描述

*$(selector).accordion({options})——面板折叠插件（accordion）
面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果，即点击标题时展开内容，再点另一标题时，关闭已展开的内容。
例如，通过accordion插件展示几个相同区域面板的折叠效果，如下图所示：
这里写图片描述
浏览器显示结果为：
这里写图片描述
*$(selector).tabs({options})——选项卡插件（tabs）
使用选项卡插件可以将ul中的li选项定义为选项标题，在标题中，再使用a元素的“href”属性设置选项标题对应的内容。
例如，在页面中，添加选项卡的标题和内容元素，并绑定tabs插件，当点击标题时，以选项卡的方式切内容，如下图所示：
这里写图片描述
浏览器显示结果为：
这里写图片描述
*$(selector).dialog({options})——对话框架插件（dialog）
对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()和confirm()函数的功能。
这里写图片描述
浏览器显示结果为：
这里写图片描述
*$(selector).menu({options})——菜单工具插件（menu）
菜单工具插件可以通过ul创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标。
例如，在页面中，通过ul元素内联的方式构建一个三层结构的导航菜单，并将最外层ul元素通过menu()方法绑定插件，实现导航菜单的功能，如下图所示：
这里写图片描述
浏览器显示结果为：
这里写图片描述
*$(selector).spinner({options})——微调按钮插件（spinner）
微调按钮插件不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值，还支持键盘的上下方向键改变输入值。
例如，将页面中的三个输入文本框都与微调插件相绑定，当改变三个文本框值时，对应的div元素的背景色也将随之发生变化，如下图所示：
这里写图片描述
浏览器显示结果为：
这里写图片描述

*$(selector).tooltip({options})——工具提示插件
工具提示插件可以定制元素的提示外观，提示内容支持变量、Ajax远程获取，还可以自定义提示内容显示的位置。
例如，将三个a元素与工具提示插件相绑定，当把鼠标移动在a元素内容时，以动画效果弹出对应的提示图片，移出时，图片自动隐藏，如下图所示：
这里写图片描述
浏览器显示结果为：
这里写图片描述

9.JQuery的工具函数

*获取浏览器的名称和版本信息



  • $.browser——获取浏览器的名称

  • $.browser.version——获取浏览器版本信息

  • $.browser.chrome为true，表示当前为Chrome浏览器

  • $.browser.mozilla为true，表示当前为火狐浏览器。 

eg:<script type="text/javascript">            $(function () {                var strTmp = "您的浏览器名称是：";                if ($.browser.chrome) { //谷歌浏览器                    strTmp += "Chrome";                }                if ($.browser.mozilla) { //火狐相关浏览器                    strTmp += "Mozilla FireFox";                }                strTmp += "<br /><br /> 版本号是：" //获取版本号                       +$.browser.version;                $(".content").html(strTmp);            });

*$.support.boxModel——检测浏览器是否属于W3C盒子模型
浏览器的盒子模型分为两类，一类为标准的w3c盒子模型，另一类为IE盒子模型，两者区别为在Width和Height这两个属性值中是否包含padding和border的值，w3c盒子模型不包含，IE盒子模型则包含，而在jQuery 中，可以通过$.support.boxModel对象返回的值，检测浏览器是否属于标准的w3c盒子模型。

eg:<script type="text/javascript">            $(function () {                var strTmp = "您打开的页面是：";                if ($.support.boxModel) { //是W3C盒子模型                    strTmp += "W3C盒子模型";                }                else { //是IE盒子模型                    strTmp += "IE盒子模型";                }                $(".content").html(strTmp);            });</script>

*$.isEmptyObject——检测对象是否为空

eg:<script type="text/javascript">            $(function () {                var obj = { "姓名": "土豪一族" };                var strTmp = "您定义了一个：";                if ($.isEmptyObject(obj)) { //检测是否为空                    strTmp += "空对象";                }                else {                    strTmp += "非空对象";                }                $(".content").html(strTmp);            }); </script>

*$.isPlainObject——检测对象是否为原始对象

eg:<script type="text/javascript">            $(function () {                var obj = "null";                var strTmp = "您定义了一个：";                if ($.isPlainObject) { //检测是否为原始对象                    strTmp += "原始对象";                }                else {                    strTmp += "非原始对象";                }                $(".content").html(strTmp);            }); </script>

*$.contains (container, contained)——检测两个节点的包含关系

eg:<script type="text/javascript">            $(function () {                var node_a = document.body.firstChild;                var node_b = document.body;                var strTmp = "对象node_a";                if ($.contains(node_a,node_b)) { //检测是否包含节点                    strTmp += " 包含 ";                }                else {                    strTmp += " 不包含 ";                }                strTmp += "对象node_b";                $(".content").html(strTmp);            });        </script>

*$.trim (str)——删除字符串左右两边的空格
*$.param(obj)——URL操作函数，能使对象或数组按照Key/value格式进行序列化编码，该编码后的值常用于向服务端发送URL请求。

eg:<script type="text/javascript">            $(function () {                //基本信息对象                var objInfo = new Object();                objInfo.name = "白富美";                objInfo.sex = 1;                //序列化对象                var objNewInfo =$.param(objInfo);                //显示序列化后的对象                var strTmp = "<b>对象 白富美 序列化后</b>：<br/><br/>";                strTmp += objNewInfo;                //显示在页面中                $(".tip").show().append(strTmp);            }); </script>

*$. extend ({options})——扩展函数，可以对原有的工具函数进行扩展
*$. extend (obj1,obj2,…objN)——使用.extends()扩展对象
除使用$.extend扩展工具函数外，还可以扩展原有的Object对象，在扩展对象时，两个对象将进行合并，当存在相同属性名时，后者将覆盖前者。
PS：学习上面的JQuery插件，主要目的是不仅仅是为了如何通过简化大量的JS代码而实现相同的效果，更是为了通过这个过程而学会自己制作插件！

阅读全文
0 0
ubuntu用什么聊天工具 ubuntu用什么聊天工具
原创粉丝点击
热门IT博客
从零开始学淘宝txt从零开始学淘宝txt
淘宝页头名字怎么居中淘宝页头名字怎么居中
樱井知香 喷泉 番号
网络基础试题
适合iphone的软件
索尼公司现状2017 知乎
itellyou 知乎
淘宝微淘达人
淘宝网海外购保健品
array chunk php
乐视收购酷派的数据
照片打印软件下载
centos boost库安装
东方网络收购
centos 网卡配置文件
中国自己的域名服务器
脂肪粒怎么去掉 知乎
ipad air2 删除软件
如何改变自己 知乎
淘宝无线店铺收藏地址
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 有阪深雪 下阪走丸 香阪纱梨 有阪深雪在线播放 御阪理亚 阪织屋 逆阪走丸 松阪屋 京阪本线 有阪雪深 达阪是什么意思 京都新阪急饭店 中阮 阮 阮暖陆翊申免费阅读 阮白慕少凌免费阅读 阮白慕少凌 阮陈恩静 中阮图片 阮怎么读 臣妻阮阮阮烟罗 阮暖陆翊申全文阅读 阮暖陆翊完结免费阅读 堆堆阮白慕少凌 中阮自学教程大全 中阮的定弦 中阮是什么乐器 乐器中阮价格 宋广宁中阮 从零起步学中阮 中阮好学吗 民族乐器中阮 中阮定弦 中阮价格 乐器中阮 学中阮 中阮指法 中阮调音 中阮考级 中阮谱 满江红中阮

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里