您的位置：首页 > Web前端 > JQuery

优雅的jQuery详解

2017-07-26 17:40 141 查看

jquery

定义：为了简化JavaScript的开发，封装了很对预定义的对象和实用函数，并兼容各大主流浏览器
​
优点：
   1.jQuery是一个简洁的和快速的JavaScript库，使用户更方便的处理HTML。document。events.实现动画效果，方便的为网站提供AJAX交互
   2.jQuery的文档说明很全，还有很多成熟的插件可以互补
   3.jQuery能够使用户的HTML页面代码和HTML内容分离，方便日后的维护

jquery对象

1.定义：jQuery对象是通过jQuery包装DOM对象产生的对象。
概述：
  jQuery对象是jQuery独有的，如果一个对象是jQuery对象，就可以调用jQuery方法
  例如：$("#text").html();
     说明：
        获取ID为test的元素内的HTML代码，其中html()是jQuery里的方法
        document.getElementById("test").innerHTML;
       
注意：
     虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法
     同理DOM对象也不能使用jQuery里面的方法
   
格式：
    如果获取的是jQuery的对象，那么在变量前加上$
    var $variable=jquery 对象
    var variable=DOM 对象

DOM对象转成jQuery对象

转换：
   对于一个DOM对象，只需要用$()把DOM对象包装起来就可以获取一个jQuery对象 $（DOM对象）
​
例如：
<script language="JavaScript">
   $(document).ready(function () {
       //获取userName的document对象
       var usernameElement=document.getElementById("username");
       //或对象的value值
       alert(usernameElement.value);
       //需要将DOM对象转换成jQuery对象
       var $usernameElement=$(usernameElement);
   })
​
​
</script>
​

jQuery对象转换成Dom对象

转换：
  1.将一个jQuery对象转成DOM对象：[index]和.get(index);
  2.jquery对象是一个数组对象，通过[index]地方法，得到相对应的懂对象
 
<script language="JavaScript">
   $(document).ready(function () {
       //获取userName的document对象
       var usernameElement=document.getElementById("username");
       //或对象的value值
       alert(usernameElement.value);
       //需要将DOM对象转换成jQuery对象
       var $usernameElement=$(usernameElement);
​
       var $usernameElement=$("#username")
       //第一种
       var usernameElememnt=$usernameElement[0];
       //第二种
      var usernameElememnt=$usernameElement.get(0);
   })
​
​
</script>

jQuery选择器

1.选择器是jQuery的基础，在jQuery中，对事件进行处理，遍历DOM和AJAX都需要依赖选择器
2.jQuery选择器写法：
   $(#username)=document.getElementById("username");
   $("tagName")=document.getElementById("tagName");

基本选择器

基本选择器时jQuery中最简单，最常用的选择器：
它通过id,class,标签名来查找DOM元素
#id:$(#id)  返回值：单个元素组成的集合
标签元素：
    $(element标签)  返回值元素集合
class：
    $(.class)
    说明：
       这个标签是直接选择HTML代码中class=“myClass”的元素或元素组（因为在同一个HTML中class是可以存在多个同样值）
*：
   $(*):表示匹配所有的元素
select1,select2....:
  用法：$("div,span,p,myclass")  返回值  集合元素
     说明：
         将每一个选择器匹配到的元素合并后一起返回，可以指定多个选择器，并将匹配的元素合并到一个结果内

例如：
    <!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>ipone秒表</title>
   <style type="text/css">
​
​
​
​
   </style>
   <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok"/>
<input type="button" value="改变ID为one的元素的背景为#0000ff" id="b1"/>
<input type="button" value="改变元素名为<div>的所有背景颜色#000fff" id="b2"/>
​
<h1>天气热了</h1>
<h2>天气冷了</h2>
​
<div id="one">id为one</div>
<div id="two" class="mini">id为two，class为mini</div>
<div class="mini">class是mini</div>
​
​
<script language="JavaScript">
//给ID为b1的按钮添加一个点击事件
   $("#b1").click(function () {
       //改变ID为one的元素的背景
       $("#one").css("backbroud","red");
​
   });
//<input type="button" value="改变元素名为<div>的所有背景颜色#000fff" id="b2"/>
   $("#b2").click(function () {
       $("div").css("backgroud","red");//该操作是一个数组
//改变class
       $("#b3").click(function () {
           $(".mini").css("backgroud","red");
​
       })
  //改变所有的元素
       $("#b4").click(function () {
           $("*").css("backgroud","red")
       })
//改变span
      $("#b5").click(function () {
          $("span,#two").css("backgroud","red")
​
      })
//可以并列实现
       $("#b6").click(function () {
           $("span ,#two,#one,mini").css("backgroud","red")
​
       })
​
   })
</script>
​
</body>
</html>

层次选择器

定义：如果想要通过Dom元素之间的层级关系来获取特定的元素，如：子元素，兄弟元素，需要通过层次选择器
​
ancestor descendant
用法：$("form input"):返回值是集合元素
说明：
     在给定的祖先元素下匹配所有的后代元素，可以用“parent>child”
parent > child
  用法：$("form > input"):返回值  集合元素
  说明：
      在给定的父元素下匹配所有的子元素
      注意：要区分后代元素和子元素
     
prev+next:
用法：$("label+input"):返回值   集合元素
说明：
    匹配所有紧接在prev元素后的next元素
   
prev ~ siblings:
用法：
    $("form ~ input"):返回值  集合元素
说明：
    匹配prev元素之后的所有siblings元素
注意：
  1.是匹配之后的元素，不包含该元素在内，并且sibliings匹配的是prev同辈元素，后辈元素不被匹配
  2.（“prev ~ div”）选择器只能旋转“#prev”元素后面的同辈元素，而jQuery中国的方法siblings（）与前后位置无关，只要是同辈节点都可以获取
​
例如：
  <!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>ipone秒表</title>
   <style type="text/css">
div,span{
   width: 140px;
   height: 140px;
   margin: 20px;
   background: #9999cc;
   border: #000 1px solid;
   float: left;
   font-size: 17px;
   font-family:Roman;
​
}
​
       div,mini{
           width: 30px;
           height: 30px;
           background: #cc66ff;
           border: #000 1px solid;
font-size: 12px;
           font-family:Roman;
​
       }
​
​
​
   </style>
   <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok"/>
<input type="button" value="改变<body>内所有的<div>的背景颜色#00ffff" id="b1"/>
<input type="button" value="改变<body>内子<div>的背景颜色#ff0033" id="b2"/>
<input type="button" value="改变ID为one的下一个<div>的背景#999388" id="b3"/>
<input type="button" value="改变ID为two的元素后面的所有兄弟<div>元素的颜色#fff999" id="b4"/>
<input type="button" value="改变ID为two的元素所有的<div>兄弟元素的背景颜色#0000ff" id="b5"/>
<input type="button" value="改变ID为two的元素所有的<div>兄弟元素的背景颜色#0000ff"，ID为two不能被选中 id="b6" />
<h1>天气热了</h1>
<h2>天气凉了</h2>
<div id="one">id为one</div>
<div id="two" class="mini">
   id 为two   class为mini
   <div class="mini">class是mini</div>
​
</div>
<div class="one">class为one
<div class="mini">class是mini</div>
   <div class="mini">class是mini</div>
​
​
</div>
<div class="one">
class是one
   <div class="mini01">class是mini01</div>
   <div class="mini">class是mini</div>
</div>
<span class="spanone">span</span>
​
<script language="JavaScript">
​
$("#b1").onclick(function () {
​
   $("body div").css("backgroud","red");
});
$("#b2").click(function () {
​
   $("body > div").css("backgroud","red");
​
​
})
$("#b3").click(function () {
   $("#one+div").css("backgroud","red");
})
$("#b4").click(function () {
   $("#two ~ div ").css("backgroud","red");
})
​
   $("#b5").click(function () {
       $("#two").siblings("div").css("backgroud","red");
   })
$("#b6").click(function () {
   $("#two").siblings("div").css("backgroud","red");
   $("#two").css("backgroud","red");
​
})
</script>
​
</body>
</html>

过滤选择器

定义：过滤选择器主要是通过特定的过滤规则来筛选所需的Dom元素，该选择器以“：”开头
过滤器可以分为：
基本过滤
内容过滤
可见性过滤
属性过滤
子元素过滤
表单对象属性过滤

first
  用法：$("tr:first");返回值 单个元素组成的集合
  说明：
     匹配找到第一个元素
last：
    用法：$("tr:last"):返回值 集合元素
    说明：匹配找到最后一个元素，与：first相对应
   
not(selector)
  用法：$("input:not(:checked)") 返回值 集合元素
  说明：
     去除所有与给定选择器匹配的元素，有点类似“非”,就是没有被选中的意思
    input(当input的type="checkbox")
even:
    用法：$("tr:even") 返回值  集合元素
    说明：
       表示匹配所有索引值为偶数的元素，从“0”开始计数，js的数组都是从0开始计算，
       如：要选泽table中行，因为是从0开始计数，所以table中的第一个tr为偶数0
odd:
   用法：
      $("tr:odd")返回值  集合元素
说明：
    表示匹配所有索引为奇数的元素和even对应，从0开始计数
eq(index):
    用法：$("tr:eq(0)") 返回值  集合元素
    说明：
      表示【匹配一个给定索引值的元素，eq(0)获取第一个tr元素，括号里是索引值，不是元素的排列数
  gt(index):
     用法：$("tr:gt(0)") 返回值  集合元素
说明：表示匹配所有大于给定索引值的元素
lt(index)
  用法：$("tr:glt(0)") 返回值  集合元素
说明：表示匹配所有小于给定索引值的元素
header(固定写法)
用法：
   $(":header").css("backgroud","red")返回值  集合元素
   说明：
      表示匹配  如：h1,h2,h3之类的标题元素，就是专门用来获取h1,h2,h3这样的标题元素

内容过滤选择器

内容过滤器的过滤规则主要体现在它所包含的子元素和文本的内容上
​
contains(text)
用法：
  $("div:contains('john')")返回值  集合元素
 
说明：
  表示匹配包含给定文本的元素，当选择的不是DOM标签元素时，就使用该选择器
作用：
  查找被标签围起来的文本内容是否符合指定的内容
 
empty：
  用法：
    $("td:empty")  返回值  集合元素
说明：
    表示匹配所有不包含子元素或文本的空元素
has(selector)
用法：
   $("div:has(p)").addclass("test")  返回值  集合元素（只能包含一层）
说明：
    表示匹配含有选择器所匹配的元素
    如： $("div:has(p)").addclass("test")：表示给所有包含p元素的div标签加上class="test"
   
parent:
   用法：
     $("td:parent")  返回值  集合元素
     说明：
       表示匹配含有子元素或者文本元素
     
   例如：
   <script language="JavaScript">
$("#b1").click(function () {
   $("div:contains('di')").css("backgroud","red");
​
})
$("#b2").click(function () {
   $("div:empty")
​
})
$("#b3").click(function () {
​
​
   $("div:has(.mini)").css("backgroud","red");
​
})
$("#b4").click(function () {
​
​
   $("div:parent").css("backgroud","red");
​
})
​
</script>

可见过滤选择器

定义：根据元素的可见和不可见状态来选择相应的元素
​
hidden:
  用法：
  $("tr:hidden")  返回值  集合元素
  说明：
     表示是不可见的元素，
     如：input元素的type属性为hidden或者css中  display=“none”都会被匹配到
   
visible：
   用法：
     $("tr:visible")   返回值 集合元素
   
    说明：表示匹配所有可见的元素
<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>ipone秒表</title>
   <style type="text/css">
​
   </style>
   <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="button" value="改变所有可见的div元素的背景" id="b1"/>
<input type="button" value="选取所有不可见的元素，利用jQuery中show()方法让其显示" id="b2"/>
<input type="button" value="选取所有的文本隐藏域" id="b3"/>
<script language="JavaScript">
​
   $("#b1").click(function () {
​
       $("div:visible").css("backgroud","red");
​
​
   })
$("#b2").click(function () {
   $(":hidden").show().css("backgroud","red");
})
​
   $("#b3").click(function () {
       $("input:hidden").each(function () {
           var $obj=$(this);
       })
​
   })
</script>
​
</body>
</html>
​

属性过滤器

定义：通过元素的属性来获取相对应的元素
[attribute]:
用法：
$("div[id]")  返回值  集合元素
说明：表示匹配包含给定属性的元素
​
[attribute=value]:
用法：
$("inpt[name='news']").attr("checked",true)  返回值  集合元素
说明：
    表示匹配给定的属性是某个特定值的元素
   
[attribute！=value]
用法：
$("inpt[name！='news']").attr("checked",true)  返回值  集合元素
说明：
  表示匹配所有不含有指定的属性或者属性不等于特定值的元素
此选择器等价于：not([attr=value])
​
[attribute^=value]
用法：
  $("input[name^='news']")  返回值  集合元素
说明：
表示匹配给定的属性是某个值开始的属性

[attribute$=value]
用法：
    $("input[name$='letter']")   返回值 集合元素
说明：
     表示匹配给定的属性是以某些值结尾的元素
[attribute*=value]:
   用法：$("input[name*='letter']")   返回值 集合元素
   说明：表示匹配给定的属性是以包含某些值的元素
 
   [attributeFilter1][attributeFilter2][attributeFilter3]
用法：$("input[id][name$='man']")   返回值  集合元素
说明：
     表示复合属性选择器，需要同时满足读个条件，是一个组合
   
   例如：
     <!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>ipone秒表</title>
   <style type="text/css">
   </style>
   <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="button" value="含有title的div元素" id="b1"/>
<input type="button" value="属性title值等于test的div元素" id="b2"/>
<input type="button" value="属性title值不等于test的div元素（没有属性title的也将被选中）" id="b3"/>
<input type="button" value="属性title值以te开头的div元素" id="b4"/>
<input type="button" value="属性title值以est结尾的div元素" id="b5"/>
<input type="button" value="属性title值含有es的div元素" id="b6"/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有es的div元素" id="b7"/>
<script language="JavaScript">
$("#b1").click(function () {
   $("div[title]").css("backgroud","red");
})
$("#b2").click(function () {
   $("div[title='test']").css("backgroud","red");
})
$("#b3").click(function () {
   $("div[title!='test']").css("backgroud","red");
​
})
$("#b4").click(function () {
   $("div[title^='test']").css("backgroud","red");
})
​
$("#b5").click(function () {
   $("div[title$='est']").css("backgroud","red");
})
​
$("#b6").click(function () {
   $("div[title*='est']").css("backgroud","red");
})
$("#b7").click(function () {
  $("div[id][title='es']").css("backgroud","red");
})
</script>
​
</body>
</html>

子元素过滤选择器

nth-child(index/even/ood/equation)
用法：
  $("ul li:nth-child(2)")  返回值  集合元素
说明：
  表示匹配其父元素下的第N个子或者奇偶元素，从1开始
 
first-child:
  用法：
     $("ul li :first-child")  返回值  集合元素
  说明：
     表示匹配第一个子元素，“：first”只匹配一个元素，而为此选择器将为每一个父元素匹配一个子元素
​
last-child
  用法：
    $("ul li :last-child")  返回值  集合元素
    说明：
       表示匹配最后一个子元素
     
     
only-child:
   用法：
     $("ul li :only-child")  返回值 集合元素
  说明：
    表示如果某个元素是父元素中唯一的子元素，将会被匹配，如果父元素中还含有其他的元素，那么将不匹配
    只有一个子元素才能被匹配
   
    <!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>ipone秒表</title>
   <style type="text/css">
​
   </style>
   <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="button" value="每个子元素" id="b1"/>
<input type="button" value="属性title值等于test的div元素" id="b2"/>
<input type="button" value="属性title值不等于test的div元素（没有属性title的也将被选中）" id="b3"/>
<input type="button" value="属性title值以te开头的div元素" id="b4"/>
<input type="button" value="属性title值以est结尾的div元素" id="b5"/>
<input type="button" value="属性title值含有es的div元素" id="b6"/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有es的div元素" id="b7"/>
<script language="JavaScript">
//子元素选择器的特点：在每一个特定的元素下寻找子元素
//设置div里面的class为one
   $("#b1").click(function () {
       $("div.one:nth-child(2)").css("backgroud","red");
   })
$("#b1").click(function () {
   $("div.one:first-child").css("backgroud","red");
})
$("#b1").click(function () {
   $("div.one:last-child").css("backgroud","red");
})
$("#b1").click(function () {
   $("div.one:only-child").css("backgroud","red");
})
​
</script>
​
</body>
</html>  
     
     

表单对象属性过滤选择器

定义：此选择器主要对所选的表单元素进行过滤
​
enabled:
  用法：
     $("input:enabled")  返回值 集合元素
说明：
    表示匹配所有可以元素，查找所有input中不带disabled="disabled"的input，不为disabled，就是enabled
disabled：
    用法：
     $("input:disabled")  返回值 集合元素
说明：
    表示匹配所有不可以的元素，和enabled对应
checked：
  用法：
     $("input:checked")  返回值 集合元素
说明：
   表示所有选中的元素（复选框，单选框，不包括select中option）
selected：
  用法：
    $("select option:selected")  返回值  集合元素
说明：
   表示匹配所有选中的option元素
​

表单选择器

input
  用法：
    $(":input")   返回值  集合元素
说明：
   表示匹配所有的input/textarea/select/button元素
 
text：
  用法：
   $(":text")  返回值  集合元素
说名：表示匹配所有的单行文本框  
 
password：
  用法：
   $(":password")  返回值  集合元素
说明:
   表示匹配所有的密码框
​
radio
用法：
用法：
   $(":radio")  返回值  集合元素
说明:
   表示匹配所有的单选按钮
 
checkbox
用法：
   $(":checkbox")  返回值  集合元素
说明:
  表示匹配所有的复选框
 
submit：
用法：
   $(":submit")  返回值  集合元素
说明:
表示匹配所有的提交按钮

image：
  用法：
   $(":image")  返回值  集合元素
说明:
  表示匹配所有的图像域
 
  reset
  用法：
   $(":reset")  返回值  集合元素
说明:
表示匹配所有的重置按钮
button
用法：
   $(":button")  返回值  集合元素
说明:
表示匹配所有的按钮

file：
   用法：
   $(":file")  返回值  集合元素
说明:
   表示匹配所有的文件域

jQuery中DOM操作

内部插入节点

append（content）
  表示向每一个匹配的元素的内部的结尾处追加内容
appendTo（content）
  表示：表示价格每一匹配的元素追加的指定元素中的内部结尾处
prepend(content)
  表示向每一个匹配元素的内部的开始从插入内容
prependTo(content）
   表示将每一个匹配的元素插入到指定元素内部的开始处

外部插入

after(content)
  表示在每一个匹配的元素之后插入内容
 
before(content）
  表示在每一个匹配的元素之前插入
 
insertAfter（content）
   表示把所有匹配的元素插入到另一个指定的元素或元素集合的后面
 
insertBefore（content）
  表示把所有匹配的元素插入到另一个指定的元素或元素集合的前面

查找节点

查找属性节点：通过jQuery选择器完成，或者查找到所需的元素之后，可以调用jQuery  里的attr()方法来获取它的各种属性值

创建节点

创建节点：使用jQuery的工厂函数$();
$(html):会根据传入的HTML标记字符串创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象返回
注意：
  1.动态创建的新元素节点不会自动添加到文档中，而是需要使用其他的方法插入到文档中
  2.当创建单个元素时，需要注意闭合标签和使用标准的xhtml格式
  如：
     创建一个<p>元素   ，可以使用$("<p/>")或者$("<p></p>")
     不能使用方式：
        $("<p>")或$("</p>")
       
创建文本节点就是在创建元素节点时直接把文本内容写出，
创建属性节点也可以在创建元素节点时一同创建
​
​

删除节点

remove（）：表示从DOM中删除所有匹配的元素，，传入的参数用于根据jQuery表达式筛选元素
注意：
当某个节点用remove（）方法删除后，该节点所包含的所有的后代节点都将同时被删除
返回值：一个指向已被删除的节点的引用
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jQuery
相关文章推荐
新的分享
章节导航