< 笔记 > JQuery - 01 JQuery

最新推荐文章于 2024-09-22 21:46:54 发布

Kevi_Song

最新推荐文章于 2024-09-22 21:46:54 发布

阅读量415

点赞数

分类专栏： < 笔记 > JQuery 文章标签： jquery ajax json 对象

本文链接：https://blog.csdn.net/weixin_38689154/article/details/78211886

版权

< 笔记 > JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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种属性

对于自定义属性 attr能够获取，prop不能获取
对于选中属性

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()

加载

页面加载有两种方式表示

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

图片加载用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>