< 笔记 > JQuery - 01 JQuery

2017-10-12 19:26:35来源:CSDN作者:weixin_38689154人点击

分享

01 JQuery

By Kevin Song

  • 01-01 Hello JQuery/常见方法/CSS
  • 01-02 选择器/筛选器
  • 01-03 属性
  • 01-04 效果
  • 01-05 事件
  • 01-06 AJAX
  • 01-07 数组操作/字符串操作
  • 01-08 JSON
  • 01-09 对象转换

01-01 Hello JQuery

按b1按钮隐藏div

按b2按钮显示div

<script src="/jquery.min.js"></script><script>    $(function(){       $("#b1").click(function(){          $("#d").hide();       });       $("#b2").click(function(){          $("#d").show();       });    });</script><button id="b1">隐藏div</button><button id="b2">显示div</button><div id="d">这是一个div</div>

文档加载

为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
换句话说,写在这里面的JQuery代码都是文档加载好之后的。

$(function(){    //code});

由两部分组成

$();
function(){    //code}

常见方法

关键字

  • val
  • html
  • text

val()方法

获取标签value,相当于document.getElementById(“input1”).value;

<script src="jquery.min.js"></script><script>    $(function(){       $("#b1").click(function(){          alert($("#input1").val());       });    });</script><button id="b1">取值</button><input type="text" id="input1" value="默认值">

html()方法

获取元素内容,保留内含的标签

<script src="jquery.min.js"></script><script>    $(function(){       $("#b1").click(function(){          alert($("#d1").html());       });    });</script><button id="b1">获取文本内容</button><div id="d1">    这是div的内容    <span>这是div里的span</span></div>

text()方法

获取元素内容,不保留内含的标签

<script src="jquery.min.js"></script><script>    $(function(){       $("#b1").click(function(){          alert($("#d1").text());       });    });</script><button id="b1">获取文本内容</button><div id="d1">    这是div的内容    <span>这是div里的span</span></div>

CSS

常用方法

  • addClass():给指定元素增加一个样式中的class
  • removeClass():给指定元素删除一个样式中的class
  • toggleClass():给指定元素切换一个样式中的class
    • 如果存在就删除
    • 如果不存在,就添加
  • css():直接设置样式
<script src="http://how2j.cn/study/jquery.min.js"></script><script>    $(function(){       $("#b1").click(function(){          $("#d").addClass("pink");       });       $("#b2").click(function(){          $("#d").removeClass("pink");       });       $("#b3").click(function(){          $("#d").toggleClass("pink");       });    });</script><button id="b1">增加背景色</button><button id="b2">删除背景色</button><button id="b3">改变背景色</button><style>.pink{   background-color:pink;}</style><div id="d">    Hello JQuery</div>

css()方法

直接设置样式:

- css(property,value)

第一个参数是样式属性,第二个参数是样式值

  • css({property1:value1,property2:value2})

格式

  • 参数是 {} 包含的属性值对
  • 属性值对之间用 逗号,分割
  • 属性值之间用 冒号:分割
  • 属性和值都需要用引号 “”
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){   $("#b1").click(function(){      $("#d1").css("background-color","pink");   });   $("#b2").click(function(){      $("#d2").css({"background-color":"pink","color":"green"});   });});</script><button id="b1">设置单一样式</button><button id="b2">设置多种样式</button><div id="d1" >    单一样式,只设置背景色</div><div id="d2" >    多种样式,不仅设置背景色,还设置字体颜色</div>

01-02 选择器/筛选器

选择器

  • 元素选择器
    • $(“tagName”)
  • id选择器
    • $(“#id”)
  • 类选择器
    • $(“.className”)
  • 层级
    • $(“selector1 selector2”)
  • 最先最后::first :last
  • 奇偶::odd :even
  • 可见性::hidden :visible
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){   //元素选择器   $("#b1").click(function(){      $("div").toggleClass("pink");   });   //ID选择器   $("#b2").click(function(){      $("#d1").toggleClass("pink");   });   //类选择器   $("#b3").click(function(){      $(".d").toggleClass("pink");   });   //组合选择器   $("#b4").click(function(){      $("div#d3 span").toggleClass("pink");   });   //最先最后   $("#b5").click(function(){      //$("div:last").toggleClass("pink");      $("div:first").toggleClass("pink");   });});</script><button id="b1">给所有的div元素增加背景色</button><button id="b2">给id=d1的div增加背景色</button><button id="b3">给class=d的div增加背景色</button><button id="b4">给id=d3的span增加背景色</button><button id="b5">给第一个div增加背景色</button><style>    .pink{       background-color:pink;    }</style><div id="d1" class="d">Hello JQuery</div><div id="d2" class="d">Hello JQuery</div><div id="d3" class="d">Hello JQuery<span>HiHiHi</span></div>
  • 属性:
    • $(selector[attribute])满足选择器条件的有某属性的元素
    • $(selector[attribute=’value’])满足选择器条件的属性等于value的元素
    • $(selector[attribute!=’value’])满足选择器条件的属性不等于value的元素
    • $(selector[attribute^=’value’])满足选择器条件的属性以value开头的元素
    • (selector[attribute=’value’])满足选择器条件的属性以value结尾的元素
    • $(selector[attribute*=’value’])满足选择器条件的属性包含value的元素
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){   $("#b1").click(function(){      $("div[id]").toggleClass("border");   });   $("#b2").click(function(){      $("div[id='pink']").toggleClass("border");   });   $("#b3").click(function(){      $("div[id!='pink']").toggleClass("border");   });   $("#b4").click(function(){      $("div[id^='p']").toggleClass("border");   });   $("#b5").click(function(){      $("div[id$='k']").toggleClass("border");   });   $("#b6").click(function(){      $("div[id*='ee']").toggleClass("border");   });});</script><button id="b1">给有id属性的div切换边框</button><button id="b2">给id=pink的div切换边框</button><button id="b3">给有id!=pink属性的div切换边框</button><button id="b4">给有id以p开头的div切换边框</button><button id="b5">给有id以k结尾的div切换边框</button><button id="b6">给有id包含ee的div切换边框</button><style>    .pink{       background-color:pink;    }    .green{       background-color:green;    }    .border{       border: 1px blue solid;    }    button{        margin-top:10px;       display:block;    }    div{       margin:10px;    }</style><div id="pink">    id=pink的div</div><div id="green">  id=green的div</div><div >   没有id的div</div>
  • 表单对象:
  • :input:会选择所有的输入元素,不仅仅是input标签开始的那些,还包括textarea,select和button
  • :button:会选择type=button的input元素和button元素
  • :radio:会选择单选框
  • :checkbox:会选择复选框
  • :text:会选择文本框,但是不会选择文本域
  • :button
  • :file
  • :submit:会选择提交按钮
  • :image:会选择图片型提交按钮
  • :reset:会选择重置按钮
<script src="http://how2j.cn/study/jquery.min.js"></script><script>    $(function(){       $(".b").click(function(){          var value = $(this).val();          $("td[rowspan!=13] "+value).toggle(500);       });     });  </script><style>table{    border-collapse:collapse;        table-layout:fixed;    width:80%;}table td{    border-bottom: 1px solid #ddd;    padding-bottom: 5px;    padding-top: 5px;}div button{    display:block;}</style><table>    <tr>        <td rowspan="13" valign="top" width="150px">            <div >                <button value=":input" class="b">切换所有的:input</button>                <button value=":button" class="b">切换:button</button>                <button value=":radio" class="b">切换:radio</button>                      <button value=":checkbox" class="b">切换:checkbox</button>                        <button value=":text" class="b">切换:text</button>                        <button value=":password" class="b">切换:password</button>                        <button value=":file" class="b">切换:file</button>                        <button value=":submit" class="b">切换:submit</button>                        <button value=":image" class="b">切换:image</button>                      <button value=":reset" class="b">切换:reset</button>                      </div>                    </td>        <td width="120px">说明</td>        <td width="120px">表单对象</td>        <td width="">示例</td>    </tr><tr><td>input按钮</td><td >:button</td><td><input type="button" value="input按钮"/></td></tr><tr><td>button按钮</td><td >:button</td><td><button>Button按钮</button></td></tr><tr><td>单选框</td><td >:radio</td><td><input type="radio" ></td></tr><tr><td>复选框</td><td >:checkbox</td><td><input type="checkbox"  ></td></tr><tr><td>文本框</td><td >:text</td><td><input type="text" /></td></tr><tr><td>文本域</td><td ></td><td><textarea></textarea></td></tr><tr><td>密码框</td><td >:password</td><td><input type="password" /></td></tr><tr><td>下拉框</td><td ></td><td><select><option>Option</option></select></td></tr><tr><td>文件上传</td><td >:file</td><td> <input type="file" /></td></tr><tr><td>提交按钮</td><td >:submit</td><td><input type="submit" /></td></tr><tr><td>图片型提交按钮</td><td >:image</td><td><input type="image" src="http://how2j.cn/example.gif" /></td></tr><tr><td>重置按钮</td><td >:reset</td><td><input type="reset" /></td></tr></table>
  • 表单对象属性::enabled :disabled :checked :selected
  • 当前元素:this
<script src="http://how2j.cn/study/jquery.min.js"></script><script>    $(function(){       $("#b1").click(function(){         $(this).hide();       });    });</script><button id="b1">点击隐藏</button>

筛选器

筛选器指的是在已经通过选择器选中了元素后,在此基础上进一步选择。

  • first()第一个
  • last()最后一个
  • eq(num)第num个
  • parent()父元素
  • parents()父元素们
  • children()子元素
  • find()后代
  • siblings()同级元素
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){   $("#b1").click(function(){      $("div").first().toggleClass("pink");   });   $("#b2").click(function(){      $("div").last().toggleClass("pink");   });   $("#b3").click(function(){      $("div").eq(2).toggleClass("pink");   });});</script><button id="b1">切换第1个div背景色</button><button id="b2">切换最后1个div背景色</button>  <button id="b3">切换第2个div背景色</button><style>    .pink{       background-color:pink;    }</style><div>  <span>Hello JQuery 1</span></div><div >  <span>Hello JQuery 2</span></div><div >  <span>Hello JQuery 3</span></div>

01-03 属性

通过以下方法直接修改元素属性

  • attr:获取
  • attr(属性,值):修改
  • removeAttr:修改
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){   $("#b1").click(function(){      alert("align属性是:" + $("#h").attr("align") );   });   $("#b2").click(function(){      alert("game属性是:" + $("#h").attr("game") );   });   $("#b3").click(function(){       $("#h").attr("align","right");   });   $("#b4").click(function(){         $("#h").removeAttr("align");   });});</script><button id="b1">获取align属性</button><button id="b2">获取自定义属性 game</button><button id="b3">修改align属性为right</button><button id="b4">删除align属性</button><h1 id="h" align="center" game="LOL">居中标题</h1>

prop与attr的区别

prop一样attr也可以用来获取与设置元素的属性。
区别在于,对于自定义属性选中属性的处理。
选中属性指的是 checked,selected 这2种属性

  1. 对于自定义属性 attr能够获取,prop不能获取
  2. 对于选中属性

attr 只能获取初始值, 无论是否变化
prop 能够访问变化后的值,并且以true|false的布尔型返回。

所以在访问表单对象属性的时候,应该采用prop而非attr

01-04 效果

  • 显示隐藏切换
    • show()显示
    • hide()隐藏
    • toggle()切换
  • 滑动
    • slideUp()向上滑动
    • slideDown()向下滑动
    • slideToggle()华东切换
  • 淡入淡出
    • fadeIn()淡入
    • fadeOut()淡出
    • fadeToggle()淡入淡出切换
    • fadeTo()制定淡入程度
  • 动画
    • animate()自定义动画效果
  • 回调函数
    • callback()

显示隐藏切换滑动演示

<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){var div = $("#d");   $("#b1").click(function(){      div.hide();   });   $("#b2").click(function(){      div.show();   });   $("#b3").click(function(){      div.toggle();   });   $("#b4").click(function(){      div.show(1000);   });   $("#b5").click(function(){      div.hide(1000);   });   $("#b6").click(function(){      div.toggle(1000);   });   $("#b7").click(function(){      div.slideUp();   });   $("#b8").click(function(){      div.slideDown();   });   $("#b9").click(function(){      div.slideToggle();   });   $("#b10").click(function(){      div.slideUp(2000);   });   $("#b11").click(function(){      div.slideDown(2000);   });   $("#b12").click(function(){      div.slideToggle(2000);   });});</script><style>    button{      display:block;    }    div{      border:solid 1px gray;      background-color:pink;      width:300px;      height:100px;    }</style><button id="b1">立即隐藏</button> <button id="b2">立即显示</button><button id="b3">立即切换</button><button id="b4">延时显示</button><button id="b5">延时隐藏</button><button id="b6">延时切换</button><button id="b7">向上滑动</button><button id="b8">向下滑动</button><button id="b9">滑动切换</button><button id="b10">延时向上滑动</button><button id="b11">延时向下滑动</button><button id="b12">延时滑动切换</button><div id="d">用于演示效果的DIV</div>

淡入淡出演示

<script src="http://how2j.cn/study/jquery.min.js"></script><script>    $(function(){    var div = $("#d");       $("#b1").click(function(){          div.fadeIn();       });       $("#b2").click(function(){          div.fadeOut();       });       $("#b3").click(function(){          div.fadeToggle();       });       $("#b4").click(function(){          div.fadeIn(2000);       });       $("#b5").click(function(){          div.fadeOut(2000);       });       $("#b6").click(function(){          div.fadeToggle(2000);       });       $("#b7").click(function(){          $("#d1").fadeTo("slow",0.2);          $("#d2").fadeTo("slow",0.5);          $("#d3").fadeTo("slow",0.8);       });    });</script><style>button{  display:block;}table div{    border:solid px gray;  background-color:pink;  width:80px;  height:50px;}div{  border:solid 1px gray;  background-color:pink;  width:300px;  height:100px;}</style><button id="b2">淡出</button>  <button id="b1">淡入</button><button id="b3">淡入淡出切换</button><button id="b5">延时淡出</button> <button id="b4">延时淡入</button><button id="b6">延时滑淡入淡出切换</button><button id="b7">fadeTo</button><br><br><div id="d">用于演示效果的DIV</div><table><tr><td><div id="d1">用于演示fadeTo 20%</div></td><td><div id="d2">用于演示fadeTo 50%</div></td><td><div id="d3">用于演示fadeTo 80%</div></td></tr></table>

animate()方法

通过animate 可以实现更为丰富的动画效果

  • animate()第一个参数为css样式
  • animate()第二个参数为延时毫秒

: 默认情况下,html中的元素都是固定,并且无法改变的位置的。 为了使用animate()自定义动画效果,需要通过css把元素的position设置为relative、absolute或者fixed。

<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){var div = $("#d");   $("#b1").click(function(){    div.animate({left:'100px'},2000);    div.animate({left:'0px',top:'50px',height:'50px'},2000);   });});</script><style>    button{      display:block;    }    div{      background-color:pink;      width:200px;      height:80px;      font-size:12px;      position:relative;    }</style><button id="b1">自定义动画</button><div id="d"><p>1. 向右移动100px</p><p>2. 向左下移动50px,同时高度变小</p></div>
  • 效果一般需要一定的时间,并且这个时间可长可短,所以就无法精确的确定该效果合适结束。
  • 好在,效果方法都提供对回调函数callback()的支持。
  • 只需要在调用效果方法的最后一个参数传入一个function,当效果结束的时候,就会自动调用该function了。
<script>    $(function(){    var div = $("#d");       $("#b1").click(function(){        div.animate({left:'100px'},2000);        div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){         alert("动画演示结束");        });       });    });</script>

01-05 事件

  • 加载
    • $(document).ready()
    • $()
    • load()
  • 点击
    • click()
    • dblclick()
  • 键盘
    • keydown()
    • keypress()
    • keyup()
  • 鼠标
    • mousedown()
    • mouseup()
    • mousemove()
    • mouseenter()
    • mouseleave()
    • mouseover()
    • mouseout()
  • 焦点
    • focus()
    • blur()
  • 改变
    • change()
  • 提交
    • submit()
  • 绑定事件
    • on()
  • 触发事件
    • trigger()

加载

页面加载有两种方式表示

  1. $(document).ready();
  2. $(); 这种比较常用

图片加载用load()函数

<script src="http://how2j.cn/study/jquery.min.js"></script><script>  $(document).ready(function(){    $("#message1").html("页面加载成功");  });  $(function(){    $("#img").load(function(){      $("#message2").html("图片加载成功");     });  });</script><div id="message1"></div><div id="message2"></div><img id="img" src="http://how2j.cn/example.gif">

点击

  • click() 表示单击
  • dblclick() 表示双击

注: 空白键和回车键也可以造成click事件,但是只有双击鼠标才能造成dblclick事件

<script src="http://how2j.cn/study/jquery.min.js"></script><script>  $(function(){      $("#b").click(function(){          $("#message").html("单击按钮");      });      $("#b").dblclick(function(){          $("#message").html("双击按钮");      });  });</script><div id="message"></div><button id="b">测试单击和双击</button>

键盘

  • keydown 表示按下键盘
  • keypress 表示按下键盘
  • keyup 表示键盘弹起

这三者的区别分别表现在发生的 先后顺序,获取到的键盘按钮值,已经对输入框的文本取值这三方面

先后顺序: 按照 keydown keypress keyup 顺序发生

键盘按钮值:

  • 通过event对象的which属性获取键盘的值
  • keydown和keyup 能获取所有按键,不能识别大小写
  • keypress 不能获取功能键,如F1 SHIFT等,能够识别大小写

文本取值:

  • keydown和keypress:不能获取最后一个字符
  • keyup: 获取所有字符

例,敲入ab
发生的先收顺序是 keydown,keypress,keyup
keydown和keyup取到大写B的ASCII码表 66,keypress取到小写b的ASCII码表 98.
keydown和keypress只能取到文本值a, keyup可以取到ab

鼠标

  • mousedown 表示鼠标按下
  • mouseup表示鼠标弹起

~

  • mousemove表示鼠标进入
  • mouseenter表示鼠标进入
  • mouseover表示鼠标进入

~

  • mouseleave表示鼠标离开
  • mouseout表示鼠标离开

进入事件有3个 mousemove mouseenter mouseover

  • mousemove :当鼠标进入元素,每移动一下都会被调用
  • mouseenter :当鼠标进入元素,调用一下,在其中移动,不调用
  • mouseover:当鼠标进入元素,调用一下,在其中移动,不调用

mouseenter 和 mouseover的区别

  • mouseenter: 当鼠标经过其子元素不会被调用
  • mouseover:当鼠标经过其子元素被调用

mouseleave 和 mouseout的区别

  • mouseleave: 当鼠标经过其子元素不会被调用
  • mouseout:当鼠标经过其子元素被调用

焦点

  • focus() 获取焦点
  • blur() 失去焦点
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){ $("input").focus(function(){    $(this).val("获取了焦点"); });  $("input").blur(function(){    $(this).val("失去了焦点"); });});</script><style></style><input type="text" ><input type="text" >

改变

change() 内容改变

注: 对于文本框,只有当该文本失去焦点的时候,才会触发change事件。

<script src="http://how2j.cn/study/jquery.min.js"></script><script>    $(function(){     $("#input1").change(function(){        var text = $(this).val();        $("#message").html("input1的内容变为了"+text);     });    });</script><style></style><div id="message"></div><input id="input1" type="text" ><input size="50" id="input2"type="text" value="只有当input1失去焦点的时候,才会触发change事件" >

提交

submit() 提交form表单

<script src="http://how2j.cn/study/jquery.min.js"></script><form id="form" action="http://how2j.cn/study/login.jsp">账号 : <input name="name" type=""> <br>密码: <input name="password" type=""><br><input type="submit" value="登陆"></form><script>    $(function(){       $("#form").submit(function(){          alert("提交账号密码");       });    });</script>

绑定事件

以上所有的事件处理,都可以通过on() 绑定事件来处理

$("selector").on("event",function);
<script src="http://how2j.cn/study/jquery.min.js"></script><script>  $(function(){      $("#b").on("click",function(){          $("#message").html("单击按钮");      });      $("#b").on("dblclick",function(){          $("#message").html("双击按钮");      });      //对比不绑定      $("#b").click(function(){          $("#message").html("单击按钮");      });      $("#b").dblclick(function(){          $("#message").html("双击按钮");      });  });</script><div id="message"></div><button id="b">测试单击和双击</button>

触发事件

触发事件,在本例中,文档加载好之后,就触发dblclick双击事件,而不是通过去手动双击。

$("selector").trigger("event");
<script src="http://how2j.cn/study/jquery.min.js"></script><script>  $(function(){      $("#b").on("click",function(){          $("#message").html("单击按钮");      });      $("#b").on("dblclick",function(){          $("#message").html("双击按钮");      });     $("#b").trigger("dblclick");  });</script><div id="message"></div><button id="b">测试单击和双击</button>

01-06 AJAX

JQuery也有对AJAX的支持,使得其对AJAX的操作简化了很多。

  • $.ajax() 提交AJAX请求
  • $.get() 使用get方式提交ajax
  • $.post() 使用post方式提交ajax
  • load() 最简单的调用ajax的方式
  • serialize()格式化form下的输入数据

提交AJAX请求

$.ajax采用参数集的方式 {param1,param2,param3}

不同的参数之间用,隔开

  • 第一个参数 url:page 表示访问的是page页面
  • 第二个参数 data:{name:value} 表示提交的参数
  • 第三个参数 success: function(){}

表示服务器成功返回后对应的响应函数

$.ajax({   url: page,   data:{"name":value},   success: function(result){      $("#checkResult").html(result);   }});
<script src="http://how2j.cn/study/jquery.min.js"></script><div id="checkResult"></div>输入账号 :<input id="name" type="text"><script>$(function(){   $("#name").keyup(function(){     var page = "/study/checkName.jsp";     var value = $(this).val();        $.ajax({            url: page,            data:{"name":value},            success: function(result){              $("#checkResult").html(result);            }        });   });});</script>

使用get方式提交ajax

.get.ajax的简化版,专门用于发送GET请求

$.get 使用3个参数

  • 第一个参数: page 访问的页面
  • 第二个参数: {name:value} 提交的数据
  • 第三个参数: function(){} 响应函数

只有第一个参数是必须的,其他参数都是可选

<script src="http://how2j.cn/study/jquery.min.js"></script><div id="checkResult"></div>输入账号 :<input id="name" type="text"><script>$(function(){   $("#name").keyup(function(){     var page = "/study/checkName.jsp";     var value = $(this).val();        $.get(            page,            {"name":value},            function(result){              $("#checkResult").html(result);            }        );   });});</script>

使用post方式提交ajax

.post.ajax的简化版,专门用于发送POST请求

$.post 使用3个参数

  • 第一个参数: page 访问的页面
  • 第二个参数: {name:value} 提交的数据
  • 第三个参数: function(){} 响应函数

只有第一个参数是必须的,其他参数都是可选

<script src="http://how2j.cn/study/jquery.min.js"></script><div id="checkResult"></div>输入账号 :<input id="name" type="text"> <script>$(function(){   $("#name").keyup(function(){     var page = "/study/checkName.jsp";     var value = $(this).val();        $.post(            page,            {"name":value},            function(result){              $("#checkResult").html(result);            }        );   });});</script>

最简单的调用ajax的方式

load比起 .get,.post 就更简单了

$("#id").load(page,[data]);
  • id: 用于显示AJAX服务端文本的元素Id
  • page: 服务端页面
  • data: 提交的数据,可选。 在本例中,直接在page里加上了参数列表
<script src="http://how2j.cn/study/jquery.min.js"></script><div id="checkResult"></div>输入账号 :<input id="name" type="text"> <script>$(function(){   $("#name").keyup(function(){     var value = $(this).val();     var page = "/study/checkName.jsp?name="+value;     $("#checkResult").load(page);   });});</script>

格式化form下的输入数据

serialize(): 格式化form下的输入数据
有的时候form下的输入内容比较多,一个一个的取比较麻烦,就可以使用serialize() 把输入数据格式化成字符串

<script src="http://how2j.cn/study/jquery.min.js"></script><div id="checkResult"></div><div id="data"></div><a href="http://how2j.cn/study/checkName.jsp">http://how2j.cn/study/checkName.jsp</a><form id="form">    输入账号 :<input id="name" type="text" name="name"> <br>输入年龄 :<input id="age" type="text" name="age"> <br>输入手机号码 :<input id="mobile" type="text" name="mobile"> <br></form><script>$(function(){   $("input").keyup(function(){      var data = $("#form").serialize();      var url = "http://how2j.cn/study/checkName.jsp";      var link = url+"?"+ data;      $("a").html(link);      $("a").attr("href",link);   });});</script>

05-07 数组操作&字符串操作

  • $.each() 遍历
  • $.unique() 去除重复
  • $.inArray() 是否存在

遍历

遍历一个数组

$.each()
  • 第一个参数是数组
  • 第二个参数是回调函数 i是下标,n是内容
<script src="http://how2j.cn/study/jquery.min.js"></script><script>    var a = new Array(1,2,3);    $.each( a, function(i, n){      document.write( "元素[" + i + "] : " + n + "<br>" );    })    document.close();</script>  

去除重复

去掉重复的元素

$.unique()

注意:执行unique之前,要先调用sort对数组的内容进行排序。

<script src="http://how2j.cn/study/jquery.min.js"></script><script>    var a = new Array(5,2,4,2,3,3,1,4,2,5);    a.sort();    $.unique(a);    $.each( a, function(i, n){      document.write( "元素[" + i + "] : " + n + "<br>" );    })    document.close();</script>  

是否存在$.inArray

返回元素在数组中的位置 ,如果不存在返回-1

$.inArray
<script src="http://how2j.cn/study/jquery.min.js"></script><script>    var a = new Array(1,2,3,4,5,6,7,8);    document.write($.inArray(9,a));    document.close();</script>  

字符串操作

  • $.trim() 去除首尾空白
<script src="http://how2j.cn/study/jquery.min.js"></script><script>    document.write($.trim(" Hello JQuery    "));    document.close();</script>  

01-08 JSON

$.parseJSON()

将JSON格式的字符串,转换为JSON对象

<script src="http://how2j.cn/study/jquery.min.js"></script><script>    var s1 = "{/"name/":/"盖伦/"";    var s2 = ",/"hp/":616}";    var s3 = s1+s2;    document.write("这是一个JSON格式的字符串:" + s3);    document.write("<br>");    var gareen = $.parseJSON(s3);    document.write("这是一个JSON对象: " + gareen);</script>

01-09 对象转换

JQuery对象和DOM节点对象进行互相转换

  • DOM对象不具备比如show() 、toggle()等等方法。
  • 同样的DOM对象也具备JQuery对象所没有的属性和方法,比如checked属性。

在某些场景下,需要对JQuery对象和DOM节点对象进行互相转换

  • get(0)/[0] JQuery转DOM
  • $() DOM转JQuery

JQuery转DOM

通过get(0)或者[0] 把JQuery对象转为DOM对象

<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){   $("#b1").click(function(){      var div= $("#d");      var d = div[0];      var s ="JQuery对象是 " + div;      s +="/n对应的DOM对象是 " + d       alert(s);   });});</script><button id="b1">JQuery对象div转为DOM对象d</button><style>    .pink{       background-color:pink;    }</style><div id="d">Hello JQuery</div>

DOM转JQuery

通过$()把DOM对象转为JQuery对象

<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){   $("#b1").click(function(){      var div= document.getElementById("d");      var d = $(div);      var s ="DOM对象是 " + div;      s +="/n对应的JQuery对象是 " + d       alert(s);   });});</script><button id="b1">DOM对象div转为JQuery对象d</button><style>    .pink{       background-color:pink;    }</style><div id="d">Hello JQuery</div>

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台