jQuery的基本使用与介绍

缪金谷 550 0

jQuery的基本使用与介绍

jQuery介绍

1.jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“

jQuery的优势

  1. 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。

  2. 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。

  3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。

  4. 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。

  5. Ajax操作支持。jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。

  6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。

  7. 插件扩展开发。jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。

原生DOM的写法就是写JS代码,而以后我们多数都用jQuery来写,因为jQuery的优势很多,看上面,并且查找标签的方式有很多,比原生的DOM丰富的多,很便利,还有重要的一点就是不需要考虑浏览器的兼容性,因为jQuery做到了各大浏览器兼容的功能。

下载链接:jQuery官网,首先需要下载这个jQuery的文件,然后在HTML文件中引入这个文件,就可以使用这个文件中帮我们提供的jquery的接口了。

    中文文档:jQuery AP中文文档

jQuery的引入方式有两种:

1.直接下载文件到本地(最常用),从本地中导入

2.使用文件的网络地址,就像我们img标签里面的那个src的用法差不多。

 引入完之后,就可以直接使用jQuery的语法来写了,但是还是要写在script标签里面,并且要注意引入顺序,先引入文件,再在script标签里面写jQuery的代码,先导入再使用。

jQuery选择器

不管找什么标签,用什么选择器,都必须要写$(""),引号里面再写选择器,通过jQuery找到的标签对象就是一个jQuery对象,用原生JS找到的标签对象叫做DOM对象。

基本选择器(同css)

//id选择器:
$("#id")  

//标签选择器:
$("tagName")

//class选择器:
$(".className")
// 找到有c1 class类的div标签
$("div.c1")  

//通配符选择器:
$("*")

//组合选择器:
$("#id, .className, tagName")

//层级选择器:(同css)x和y可以为任意选择器
$("x y");// x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y(儿子)
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

基本筛选器(选择之后进行过滤):

:hidden //匹配所有不可见元素(display:none),或者type为hidden的元素
:visible //匹配所有可见元素
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
   $('li:eq(1)');
   $('li:eq(-1)').text();
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
   $('li:has(span)');

$("div:has(h1)")// 找到所有后代中有h1标签的div标签,意思是首先找到所有div标签,把这些div标签的后代中有h1的div标签筛选出来
$("div:has(.c1)")// 找到所有后代中有c1样式类(类属性class='c1')的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
   $("li:not(:has(c1)")

属性选择器:

// 有某个属性 
[attribute]
   $('li[data-index]')
// 属性等于
[attribute=value]
   $('li[data-index=10]')
// 属性不等于
[attribute!=value]
   $('li[data-index!=10]')
// 属性以value开头
[attribute^=value]
   $('li[data-index^=10]')
// 属性以value结尾
[attribute$=value]
   $('li[data-index$=10]')
// 属性包含value
[attribute*=value]
   $('li[data-index*=10]')

// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单选择器

//多用于找form表单里面出现的input标签,当然通过属性选择器找肯定也是没问题的,这样就是写着简单一些

//input标签中type属性为这个值的input标签
//实例:$(':password');
:radio //匹配所有单选按钮
:checkbox //匹配所有复选按钮
:selected //获取已选择的option元素
:checked //匹配所有被选中的元素(复选框、单选框等,select中的option)
:submit //匹配所有提交按钮
:reset //匹配所有重置按钮
:button //匹配所有按钮
:text //匹配所有的单行文本框
:password //匹配所有密码框

表单对象属性:

//找到可用的input标签
:enabled    
   $(':enabled');
//找到不可用的input标签
:disabled  
   //用户名:<input type="text" disabled>
   $(':disabled');

:checked
   <input type="radio" name="sex">男
   $(':checked');
:selected
   <select name="" id="city">
       <option value="">北京</option>
       <option value="">上海</option>
       <option value="">深圳</option>
       <option value="">山西</option>
       <option value="">大同</option>
   </select>
   $(':selected').text();

筛选器方法(用的很多)

//找到下一个元素
$("#id").next()
   示例:$('#l2').next();
   示例:$('#l2').next().next().next().text();

//找到下面所有的元素
$("#id").nextAll()
   示例:$('#l2').nextAll().text();

//直到找到id为i2的标签就结束查找,不包含它
$("#id").nextUntil("#i2")
   示例:$('#l2').nextUntil('#l4').text();

示例:
<ul>
   <li>安文</li>
   <li id="l2"><span>又彪</span></li>
   <li>思雨</li>
   <li id="l4">
       <a href="" class="c1">庆青</a>
   </li>
   <li>相玺</li>
</ul>

//找上一个元素:
$("#id").prev()
   示例:$('#l4').prev().text();
$("#id").prevAll()
   示例:$('#l4').prevAll().text();
$("#id").prevUntil("#i2")
   示例:$('#l4').prevUntil('#l2').text();

//父亲元素:
$("#id").parent()
   示例:$('a').parent();
// 查找当前元素的所有的父辈元素(爷爷辈、祖先辈都找到)
$("#id").parents()  
   示例:$('a').parents();
// 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止,这里直到body标签,不包含body标签,基本选择器都可以放到这里面使用。
$("#id").parentsUntil('body')


//儿子和兄弟元素:
$("#id").children();// 儿子们
   示例:$('ul').children().text();
   示例:$('ul').children('#l4').text().trim();
// 兄弟们,不包含自己,.siblings('#id'),可以在添加选择器进行进一步筛选
$("#id").siblings();
   示例:$('#l4').siblings().text();

//查找
$("div").find("p")
   示例:$('ul').find('#l4').text();等价于$('ul #l4').text();

//筛选
// 从结果集中过滤出有c1样式类的,从所有的div标签中过滤出有class='c1'属性的div,和find不同,find是找div标签的子子孙孙中找到一个符合条件的标签
$("div").filter(".c1")  
   示例:$('li').filter('#l4').text();
   等价于 $("div.c1")

//补充(和前面使用冒号的一样  :first等,只不过冒号的那个是写在选择器里面的,而下面的这几个是方法,如此而已,就不说啦):
.first() // 获取匹配的第一个元素
   $('li').first();
   $('li:first');
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

样式操作

样式类操作

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。
//示例代码
   $('.c1').addClass('c2');
   $('.c1').removeClass('c2');
   $('.c1').hasClass('c2');
   $('.c1').toggleClass('c2');

css样式

//原生js
   标签.style.color = 'red';
//jquery
   $('.c1').css('background-color','red');  
   //同时设置多个css样式
   $('.c1').css({'background-color':'yellow','width':'200px'})

元素坐标操作

//获取坐标
$('.c2').position();  //查看相对位置
   {top: 20, left: 20}
$('.c2').offset();    //查看距离窗口左上角的绝对位置
   {top: 28, left: 28}
//设置坐标
   $('.c2').offset({'top':'20','left':'40'});

jQuery绑定点击事件的写法

//原生js绑定点击事件
   $('.c1')[0].onclick = function () {
       this.style.backgroundColor = 'green';
   }
//jquery绑定点击事件
   $('.c1').click(function () {
       $(this).css('background-color','green');
   })
   $(document.body).on('click','标签选择器',方法);

点击事件和滚动事件的示例代码

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <style>
           .c1{
               background-color: red;
               height: 100px;
               width: 100px;
           }
           .c2{
               background-color: green;
               height: 1000px;
               width: 100px;
           }
           .c3{
               background-color: blue;
               height: 1000px;
               width: 100px;
           }
           .s1{
               position: fixed;
               left:20px;
               bottom: 20px;
               height: 40px;
               width: 80px;
               background-color: purple;
               line-height: 40px;
               text-align: center;
           }
           .s1 a{
               color: white;
               font-size: 14px;
               text-decoration: none;
           }
           .hide{
               display: none;
           }
       </style>
   </head>
   <body>
       <!--<a name="top">这里是顶部</a>-->
       <!--<a>这里是顶部</a>-->
       <span>顶部位置</span>
       <div class="c1"></div>
       <button class="change-postion">走你</button>
       <div class="c2"></div>
       <div class="c3"></div>
       <span class="s1 hide">
           <!--<a href="#top">返回顶部</a>-->
           <span>返回顶部</span>
       </span>
       <script src="jquery.js"></script>
       <script>
           //点击事件来改变标签位置
           $('.change-postion').click(function () {
               $('.c1').offset({top:200,left:200});
           });
           //滚动事件,监听滚动距离来显示或者隐藏标签
           $(window).scroll(function () {
               console.log($(window).scrollTop());
               if ($(window).scrollTop() >=200){
                   $('.s1').removeClass('hide');
               }else {
                   $('.s1').addClass('hide');
               }
           });
           // 回到顶部,scrollTop设置值
           $('.s1').click(function () {
               $(window).scrollTop(0);
           })
       </script>
   </body>
</html>

尺寸

$('.c1').height();  //content 高度
$('.c1').width();   //content 宽度
$('.c1').innerHeight();//content高度+padding高度
$('.c1').innerWidth(); //content宽度+padding宽度
$('.c1').outerHeight();//content高度+padding高度 + border高度
$('.c1').outerWidth();//content宽度+padding宽度+ border宽度

文本操作

html()//取得第一个匹配元素的html内容,包含标签内容
html(val)//设置所有匹配元素的html内容,识别标签,能够表现出标签的效果

text()// 取得所有匹配元素的内容,只有文本内容,没有标签
text(val)//设置所有匹配元素的内容,不识别标签,将标签作为文本插入进去
//示例:
$('.c1').text('<h3>你好,太白</h3>');
$('.c1').html('<h3>你好,太白</h3>');

//将所有选中的元素用某个标签包裹起来
$('p').wrapAll("<div></div>");//会将所有选中的p标签用一个div包裹起来(不同地方的p标签只要是被选中,都会被包裹在一起)

表单值操作

//直接获取form表单的所有值
   $('#formData').serializeArray();//#formData是form标签的id
//获取值
   //input type='text' 的标签
   $('#username').val();

   //input type='radio'标签获取被选中的标签的值
   $(':radio:checked').val();

   //input type='checkbox'标签获取被选中的标签的值 --- 直接
   //$(':checkbox:checked').val();是不行的,需要循环取值  
       var d = $(':checkbox:checked');
       for (var i=0;i<d.length;i++){
           console.log(d.eq(i).val());
       }
       
   //单选select ---
       $('#city').val();

   //多选select ---
       $('#author').val(); // ["2", "3"]  

//设置值
   input type='text'的标签 --- $('#username').val('李杰');
   input type='radio'标签 ---  $('[name="sex"]').val(['3']);
           如果 $('[name="sex"]').val('3'),所有标签的值都变成了'3';
   input type='checkbox'设置值 --- $('[name="hobby"]').val(['2','3'])
   单选select --- $('#city').val('1');  option value='1'
   多选select --- $('#author').val(['2','3'])

标签属性操作

//设置、获取自定义或者系统属性
attr('属性名')// 返回第一个匹配元素的属性值
attr('属性名','属性值')// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr('属性名')// 从每一个匹配的元素中删除一个属性

//示例:
   //设置单个属性
       $('.c1').attr('sh','oo');
   //设置多个属性
       $('.c1').attr({'age':'18','sex':'alex'});
   //查看属性
       $('.c1').attr('属性名');
       $('.c1').attr('xx');
   //删除属性
       $('.c1').removeAttr('xx');

//prop -- 针对的是checked\selected\disabled等系统属性

//查看标签是否有checked属性,也就是是否被选中
       attr $(':checked').attr('checked'); //checked -- undefined
       prop $(':checked').prop('checked'); //true  -- false
       
       //通过设置属性的方式来设置是否选中:
       $(':radio').eq(2).prop('checked',true);//true和false不能加引号
       $(':radio').eq(2).prop('checked',false);

简单总结:
   1.对于标签上有的能看到的属性和自定义属性都用attr
   2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
   具有 true false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()

文档处理

//添加到指定元素内部的后面
   $(A).append(B)// 把B追加到A
   $(A).appendTo(B)// 把A追加到B
   #添加字符串照样能识别标签  *****
   $('#d1').append('<a href="http://www.jd.com">京东</a>');
//添加到指定元素内部的前面
   $(A).prepend(B)// 把B前置到A
   $(A).prependTo(B)// 把A前置到B
   //示例
       $('a').prependTo($('div'));

//添加到指定元素外部的后面
   $(A).after(B)// 把B放到A的后面
   $(A).insertAfter(B)// 把A放到B的后面

//添加到指定元素外部的前面
   $(A).before(B)// 把B放到A的前面
   $(A).insertBefore(B)// 把A放到B的前面
   
//移除和清空元素
   remove()// 从DOM中删除所有匹配的元素。
   empty()// 删除匹配的元素集合中所有的子节点,包括文本被全部删除,但是匹配的元素还在
   $('div').remove();
   $('div').empty();

//替换
   replaceWith()
   replaceAll()
   //示例:
       var a = document.createElement('a')
       a.href = 'http://www.baidu.com';
       a.innerText = 'xxx';
       
       $('span').replaceWith(a);
       $(a).replaceAll('span');
       
//clone()克隆
   <button class="btn">屠龙宝刀,点击就送!</button>

   $('.btn').click(function () {
       // var a = $(this).clone(); //克隆标签
       var a = $(this).clone(true);  //连带事件一起克隆
       $(this).after(a);
   })

事件绑定

事件绑定方式  两种方式
<script>
   // 方式一
   // $('#d1').click(function () {
   //     $(this).css({'background-color':'green'})
   // })

   // 方式二  on绑定
   $('#d1').on('click',function () {
       $(this).css({'background-color':'green'})
   })
</script>

常用事件

//<div></div>
//点击
click(function(){...})
   $('#d1').on('click',function () {
       $(this).css({'background-color':'green'})
   })
               
//鼠标悬浮
hover(function(){...})
   //鼠标悬浮 触发事件
   $('.c1').hover(
       //鼠标放上去
       function () {
           $(this).css({'background-color':'blue'});
       },
       function(){
           $(this).css({'background-color':'black'});
       }
   );
               
//失去焦点
blur(function(){...})
   //失去光标(焦点)时触发事件 使div变色
   $('[type="text"]').blur(function () {
       $('.c1').css({'background-color':'pink'})
   })
               
//获取光标
focus(function(){...})  //获取光标时触发事件 使div变色
   $('[type="text"]').focus(function () {
       $('.c1').css({'background-color':'black'})
   })

//内容改变
change(function(){...}) //内容发生变化,input,select等
   //与内容发改变时触发的事件
   $('select').change(function () {
       $('.c1').toggleClass('cc')
   })

//键盘抬起
keyup(function(){...})  //键盘抬起触发事件
   $(window).keyup(function (e) {
       console.log(e.keyCode);
   })

//键盘按下
keydown(function(){...})    //键盘按键按下事件  参数e/event
   $(window).keydown(function (e) {
       console.log(e.keyCode) //每个键都有一个keycode键 ,通过不同的值触发不同的事件
       if(e.keyCode===37){
           $('.c1').css({'background-color':'green'})
       }else if(e.keyCode===39){
           $('.c1').css({'background-color':'balck'})
       }
       else{
           $('.c1').css({'background-color':'yellow'})
       }
   })

//当鼠标指针进入(穿过)元素时
mouseenter(function(){...}) // 鼠标悬浮  等同于hover事件

//当鼠标指针离开元素
mouseout(function(){...})
   $('.c1').mouseenter(function () {
       $(this).css({'background-color':'blue'});
   });
   $('.c1').mouseout(function () {
       $(this).css({'background-color':'yellow'});
   });

//鼠标悬浮 只触发一次
   $('.c2').mouseenter(function () {
       console.log('你变了');
   });
//鼠标悬浮  连续触发
   $('.c2').mouseover(function () {
       console.log('你变了');
   })
mouseover mouseenter的区别是:mouseover事件是如果该标签有子标签,那么移动到该标签或者移动到子标签时会连续触发,mmouseenter事件不管有没有子标签都只触发一次,表示鼠标进入这个对象

input事件

实时监听input输入值变化示例:input值变化事件:看百度搜索的效果
这叫做input事件,看代码:只要input框里面的值发生变化就触发某个事件,注意input事件不能直接绑定,必须用on绑定才行,$('#d1').input(function{})是不对的;只能这样绑定
$('#d1').on('input',function(){})才行

<script src="jQuery.js"></script>
百度一下 <input type="text" id="search">

<script>
   $('#search').on('input',function () {
       console.log($(this).val());
   })
</script>

事件冒泡

<body>
   <script src="jQuery.js"></script>
   <div id="d1">
       <div id="d2"></div>
   </div>
   <script>
       //冒泡
       $('#d1').click(function () {
           alert('父级标签')
       })
       $('#d2').click(function () {
           alert('子级标签')
       })
   </script>
</body>

阻止后续(冒泡)事件发生

//冒泡的意思就是因为html可以嵌套,如果你给儿子标签绑定了点事件或者没有绑定点击事件,父级标签绑定了点击事件,那么你一点击子标签,不管子标签 有没有绑定事件,都会触发父级标签的点击事件,如果有,会先触发子标签的点击事件,然后触发父级标签的点击事件,不管子标签有没有点击事件,都会一级一级的还往上找点击事件

$('#d1').click(function () {
   alert('父级标签')
})
$('#d2').click(function (e) {  
   //这个参数e(只是个形参,写evt或者event名字的也很多)表示当前事件本身,这个事件也是一个对象
   alert('子级标签')
   // return false;    //这个也可以阻止
   e.stopPropagation();//用事件对象的这个方法就能阻止冒泡 (Propagation:传递的意思)
})

事件委托

事件委托:是通过事件冒泡的原理,利用父标签去捕获子标签的事件,将未来添加进来的某些子标签自动绑定上事件。
<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>事件委托</title>
   </head>
   <body>
       <script src="jQuery.js"></script>
       <div id="d1">
           <button class="c1">爱的磨砺转圈圈</button>
       </div>
       <script>
           // $('.c1').on('click',function () {
           //     alert('你变了');
           //     var btn=document.createElement('button');
           //     $(btn).text('爱的磨砺转圈圈');
           //     $(btn).addClass('c1');
           //     console.log(btn);
           //     $('#d1').append(btn);
           // })

           //事件委托  将'.c1'委托给'#d1'
           $('#d1').on('click','.c1',function () {
               alert('你变了');
               var btn=document.createElement('button');
               $(btn).text('爱的磨砺转圈圈');
               $(btn).addClass('c1');
               console.log(btn);
               $('#d1').append(btn)
           })
       </script>
   </body>
</html>

页面载入

    //将js代码写到head标签和写道body标签下面的作用是不同的吗,写在head标签里面的话,如果你写了操作某个标签的内容的话,那个标签还没加载出来,先加载了你的js代码,就找不到这个标签,所以不会生效,所以写在body标签最下面是一种解决办法,还有一种办法就是window.onload=function(){js的代码},等页面上所有的元素都加载完,在执行这里面的js代码,还记得吗?,但是这个window.onload有个缺点,这个缺点就是这个操作时给window.onload赋值,如果你自己写了两个js文件,每个js文件中都有一个window.onload的话,那么后引入的文件会把前面引入的文件的window.onload里面的js代码全部覆盖掉,那么第一个文件的js代码就失去了效果,还有一个问题就是,window.onload会等到页面上的文档、图片、视频等所有资源都加载完才执行里面的js代码,导致有些效果的加载比较慢,所以我们使用下面的写法,不存在覆盖问题,而且只要文档加载完就触发,不需要等着一些图片啊视频啊什么的,加载js效果的速度快。
1.jQuery文件要在使用jQuery的代码之前引入
2.js代码最好都放在body标签下面或者里面的最下面
3.window.onload:
   window.onload = function () {
       $('.c1').click(function () {
           $(this).css({'background-color': 'green'});
       })
   }
4.页面载入:
   $(function () {
       $('.c1').click(function () {
           $(this).css({'background-color': 'green'});
       })
   })
   $(document).ready(function{});

与window.onload的区别:
   1.window.onload()函数有覆盖现象,必须等待着图片资源加载完成之后才能调用
   2.jQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数)

示例:

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery.js"></script>
       <script>
           // 等待整个页面中的内容全部加载完成之后,触发window.onload对应的函数里面的内容
           // window.onload 有覆盖现象,会被后面的window.onload给重新赋值
           // window.onload = function () {
           //     $('.c1').click(function () {
           //         $(this).css({'background-color':'green'});
           //     })
           // }
           $(function () {
               $('.c1').click(function () {
                   $(this).css({'background-color':'green'});
               })
           });
       </script>
       <script src="页面载入.js"></script>
       <style>
           .c1{
               background-color: red;
               height: 200px;
               width: 200px;
           }
       </style>
   </head>
   <body>
       <div class="c1"></div>
   </body>
</html>

each循环

//循环标签对象数组
$('li').each(function(index,item){
   console.log(index,item);
});

//循环普通数组
var d1 = ['aa','bb','cc'];
$.each(d1,function(index,item){
   console.log(index,item);
})

//跳出循环  return false; 类似于break
$('li').each(function(index,item){
   console.log(index,item.innerText);
   if (index === 1){
       return false;
   }
});

//跳出本次循环  return; 类似于continue
$('li').each(function(index,item){
   if (index === 1){
       return;
   }
   console.log(index,item.innerText);
});

data

//给标签对象添加数据,类似于添加了全局变量
   .data(key, value): //设置值
   .data(key)   //取值
   .removeData(key) //删除值

插件(了解)

<script>
   jQuery.extend({ //$.extend({})
       //自定义了一个min和max方法,min和max作为键,值是一个function
       min:function(a, b){return a < b ? a : b;},
       max:function(a, b){return a > b ? a : b;}
   });
   jQuery.min(2,3);// => 2
   jQuery.max(4,5);// => 5
   $('div').min(1,2);不能通过标签对象来调用
</script>

<script>
   jQuery.fn.extend({  //给任意的jQuery标签对象添加一个方法
       check:function(){
           return this.each(function(){this.checked =true;});
       },
       uncheck:function(){
           return this.each(function(){this.checked =false;});
       }
   });
   // jQuery对象可以使用新添加的check()方法了。
   $("input[type='checkbox']").check();
</script>


发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~