< 笔记 > JQuery - 01 JQuery

最新推荐文章于 2024-09-17 14:30:35 发布
最新推荐文章于 2024-09-17 14:30:35 发布
阅读量415 收藏
点赞数
分类专栏： &lt; 笔记 &gt; JQuery 文章标签： jquery ajax json 对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38689154/article/details/78211886
版权

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>
Kevi_Song
关注
专栏目录
JQuery 学习笔记01 JQuery初接触
12-09
《JQuery 学习笔记01 - JQuery初接触》 jQuery是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript编程，使得开发者能够更快速、更方便地处理DOM操作、事件处理、动画效果和Ajax交互。这篇学习...
JQuery 选择器
litengbin的博客
01-18 329
Jquery有多达数十种选择器，把工作中会用到的常用选择器列出来，并逐一解释。 元素 $("tagName")  根据 标签名 选择所有该标签的元素 $(function(){ $("#b1").click(function(){ $("div").addClass("pink"); }); }); 给所有的div
JQuery
DH2264664169的博客
01-04 289
一、JQuery简介： JQuery是一个javascript的框架，是对javascript的一种封装。  通过JQuery可以非常方便的操作html的元素  二、设计使用 1、JQuery实现隐藏和显示： &lt;script src="jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(function(){ $("#b1...
【JQuery】初级学习（上）
爱科比的博客
09-25 214
Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQ...
jQuery的.toggle()事件
qq_43208913的博客
07-23 2347
$(selected).toggle()事件 会自动获得当前对象的显示或者隐藏状态，并且使用触发事件进行切换。 在元素的click事件中绑定两个或两个以上的函数 toggle不像bind需要在后面添加"click"来绑定click触发事件，toggle本身就是click触发的（而且只能click触发）。 jquery 中toggle的2种用法 一、在元素的click事件中绑...
jQuery- 课堂笔记.pdf
11-25
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script> ``` 然后，我们可以使用jQuery的$(function() {})结构来确保在页面加载完成后执行代码，这等同于window.onload函数。接着，我们通过`$...
jquery-1.8.3.js 官方包
05-05
本篇文章将详细探讨“jquery-1.8.3.js”官方包，这个版本在jQuery的发展历程中占有重要地位。 一、jQuery简介 jQuery是由John Resig于2006年创建的一个开源项目，它的核心理念是“Write Less, Do More”。jQuery...
jQuery相关笔记01
02-22
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- 其他自定义的JavaScript文件 --> <script src="js/script.js"></script> </body> </html> ``` jQuery提供了多种实用的方法，例如`...
jQuery 选择器
秋城落叶的博客
03-31 110
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素 jQuery 中所有选择器都以美元符号开头：$() 元素选择器 根据标签名选择所有该标签的元素 //第一种写法 <scriptsrc="jquery.min.js"ty...
jquery还原rowspan 并取数据
ting_125的博客
05-23 3497
先把table表格的rowspan 还原，并取出数据 //表格还原 var trs = $(".productTable tr:not(:first)");  $(trs,this).each(function(trindex,tritem){ $(tritem).find("td").each(function(tdindex,tditem){ v
JQUERY 教程
Jae_Peng的博客
04-23 515
JQuery是一个javascript的框架，是对javascript的一种封装。 通过JQuery可以非常方便的操作html的元素 本例通过JQuery 实现 “隐藏与显示”，并分步讲解每一个步骤的意思 要使用Jquery需要导入一个第三方的javascript库 jquery.min.js 那么本地要测试怎么做呢？ 1. 首先在右侧下载 jquery.min.js 2. 把 j...
JQuery学习笔记
cszhang
07-12 282
JQuery是一个javascript的框架，是对javascript的一种封装。 通过JQuery可以非常方便的操作html的元素   $(function(){ }); //表示html元素DOM全部加载完毕,此时才执行HTML方法 等同于 $(document).ready(function(){ });  常见方法 关键字简介 val 取值 html 获取元素内
JQuery笔记
Kerei的博客
07-13 205
JQuery是一个JavaScript的框架，是对JavaScript的一种封装。通过JQuery可以很方便的操作html元素 一、基本操作 1.例：使用JQuery进行隐藏和显示 <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#d").hide(); });
td 的 colspan 和 rowspan
有志者事竟成
08-10 6875
td 的 colspan属性代表所占列数， rowspan 属性代表所占行数 　　员工号 学历 专业 毕业学校 3行2列，10代表10px，像素点。
JavaScript 基础 - 第17天_AJAX综合案例
八年大厂一线老程序员。现独立开发创业中，并且已经靠独立开发赚取人生第一桶金。
09-14 1231
完成案例-图书管理系统（增删改查）经典业务
AJAX(一）HTTP协议(请求响应报文)，AJAX发送请求，请求问题处理
最新发布
qq_44285582的博客
09-17 793
原生AJAX发送Get，Post请求。响应JSON数据的两种方式。如何捕获AJAX请求超时与网络异常的清空。abort函数取消请求。解决请求重复发送的问题
SSMP+ajax实现广告系统的分页效果
wu1113_的博客
09-14 770
SSMP+ajax实现广告系统的分页效果
Gson转换
09-13 329
gson格式转换.create());@Overridetry {
js笔记：解决<select>问题与jQuery操作技巧
本篇笔记是关于JavaScript（JS）开发过程中的实用技巧，特别是针对`<select>`标签的处理和jQuery库在操作选择器中的应用。首先，作者分享了两种实现让`<select>`既能选择又能输入值的方法： **方案1**：采用文本框...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值