Jquery的基本用法

➀　jQuery简介

jQuery是JavaScript语言的一个新的资源库(框架) ,它能快速,简洁的使用HTML documents, handle events, perform animations,

并且能把Ajax交互应用到网页,jQuery能够改变你书写JavaScript的方式

 

② jQuery的引入

 不需要安装操作, 只需要把jQuery脚本文本引入页面, 即可使用jQuery这个强大组件的功能, 如下:

<script src=“../js/jquery-1[1].3.2.js“ type="text/javascript"></script>

 

这个js文件可以去 我的文件中去下载

 

③ jQuery对象访问

1）通过 ID访问元素。

查找 ID 为"myDiv"的元素。

HTML 代码:

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

 

jQuery 代码:

$("#myDiv");

 

结果:

[ <div id="myDiv">id="myDiv"</div> ] 

 

 

2）通过Class访问元素

查找所有类是 "myClass" 的元素.

HTML 代码:

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

 

jQuery 代码:

$(".myClass"); 

 

结果:

[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ] 

 

 

 3）搜索所有元素

找到每一个元素

HTML 代码: 

<div>DIV</div>
<span>SPAN</span>
<p>P</p> 

 

jQuery 代码:

$("*") 

 

结果:

[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ] 

 

 

 4）通过元素名查找元素

查找一个 DIV 元素。 

HTML 代码:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span> 
jQuery 代码:

$("div"); 
结果:

[ <div>DIV1</div>, <div>DIV2</div> ] 

 

 

5）查找任意指定匹配元素

找到匹配任意一个类的元素。 

HTML 代码:

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p> 

jQuery 代码:

$("div,span,p.myClass") 
结果:

[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ] 

 

 

6）访问表单元素

文本框：
HTML 代码:
<input type="text" id="infoname">

jQuery 代码:
取值：$("#infoname").val();
赋值：$("#infoname").val(""),$("#infoname").val("abc")

 

 

单选按钮：
HTML 代码:
<input type="radio" name="sex" value="0" checked>男
<input type="radio" name="sex" value="1">女
<input type="radio" name="sex" value="2">保密

jQuery 代码:
取选中项值：$("input[name='sex']:checked").val()
设置第一项为选中：$("input[name='sex']").get(0).checked = true;--根据索引
根据显示值设置选中状态：$("input[name='sex']").length（单选按钮数）--根据文本值
  for(var i = 0;i < $("input[name='sex']").length;i++)
  {
      if ($("input[name='sex']").get(i).value == text)
      {
        $("input[name='sex']").get(i).checked = true;
      }
  }

 

 

下拉列表：
HTML 代码:
<select name="city" id="city">
  <option value="0">北京</option>
  <option value="1">上海</option>
</select>

jQuery 代码:
取选中项值：$("select[name='city'] option[selected]").text();
设置第一项为选中：$("#city")[0].selectedIndex = 0;--根据索引
增加下拉列表值：
 $("#city").append("<option value="+j+">"+cityname+"</option>");

JS代码:
var option = new Option(j,cityname);
document.getElementsByID("city").options.add(option);

 

 

7）修改元素属性

修改背景图片
HTML 代码:
<div class="question" onclick="AnswerSeedPwd();">

jQuery 代码:
jQuery
(
  function($)
  {
    $(".question").mouseover(
      function ()
      {
        $(this).css({"background-image":"url(../image/zhaopwd002.gif)"}); 
      });
    $(".question").mouseout(
      function ()
      {
        $(this).css({"background-image":"url(../image/zhaopwd001.gif)"}); 
      });
  }

 

 

修改背景色
HTML 代码:
<table >
 <tr>
   <td class="data">11</td>
   <td class="data">11</td>
   <td class="data">11</td>
 </tr>
</table>

jQuery 代码:
jQuery
(
  function($)
  {
    $(".data").mouseover(
      function ()
       {
         $(this).css({background:"#63efe7"}); 
       });
    $(".data").mouseout(
       function ()
       {
         $(this).css({background:"#f9f9f9"}); 
       });
   }
);

 

 

修改Class属性值
HTML 代码:
<div id = "id3" class="none">

jQuery 代码:
$("#id3").attr("class","normal");

 

 

 

元素隐藏显示 
HTML 代码:
<div id = "myTab0_Content0">

jQuery 代码:
 $("#myTab0_Content0").css("display","none");
 $("#myTab0_Content0").css("display","block");