jQuery自学

转载 2015年11月21日 15:50:03

1,用jQuery判断某个元素是否存在

if($("#tt").length > 0) {  //使用长度判断
}
if( $("#tt")[0] ) {   //转为Dom对象判断
}

2,选择器,根据例子记忆很好理解

(1)基本选择器:id,class,标签

#id      根据特定的id匹配一个元素    $("#test")选择id为test的元素
.class   根据类名匹配元素           $(".test")选择class为test的元素
element  根据元素名匹配             $("p")选择所有的<p>元素
*        匹配所有元素               $("*")选择所有的元素
selector1,selector2 匹配多个匹配器   $("div,span,p.myClass")选择所有的div,span,class为myClass的<p>标签

如果想改变这些获取到的jQuery对象的背景色,只需要在后面加上:
.css("background","#bbffaa");
(2)层次选择器:后代元素,子元素,相邻元素,同辈元素

$("div span")     选择<div>里的所有的<span>元素(所有后代)
$("div>span")   选择<div>里的所有子元素<span>(只是子元素)
$(".one+div")    选择class为one的下一个<div>同辈元素
$(".one~div")    选择class为one的所有<div>同辈元素

如果想改变这些获取到的jQuery对象的背景色,只需要在后面加上:
.css("background","#bbffaa");

(3)过滤选择器

a1,基本过滤选择器

$("div:first")    所有<div>元素的第1个<div>
$("div:last")    所有<div>元素的最后一个<div>
$("input:not(.myClass)")  所有class不是myClass的<input>元素
$("input:even")  所有索引是偶数的<input>
$("input:odd")    所有索引是奇数的<input>
$("input:eq(1)")  索引为1的<input>
$("input:gt(1)")  索引大于1的<input>
$("input:lt(1)")   索引小于1的<input>
$(":header")      网页中所有的<h1><h2><h3>----
$("div:animated")   正在执行动画的<div>
$(':focus')               当前获得焦点的元素
说明:除了 :关键字  不能改,其他的元素都可以改。
b2,内容过滤选择器:

$("div:contains('我')")  选择含有文本""的<div>
$("div:empty")    不包含子元素(文本也算)的<div>
$("div:has(p)")    含有<p>元素的<div>
$("div:parent")    含有子元素(文本也算)的<div>

说明:除了 :关键字  不能改,其他的元素都可以改
c3,可见性过滤选择器:

$(":hidden") 所有不可见元素,含<input type="hidden"/>,<div style="display:none;">,<div style="visibility:hidden;">等
$("input:hidden")  选择input不可见元素
$("div:visible")  选择所有可见的<div>元素
d4,属性过滤选择器:

[attribute]  $("div[id]") 所有拥有属性id的元素
[attribute=value]  $("div[title=test]")  所有属性title等于test的<div>
[attribute!=value]  $("div[title=test]")  所有属性title不等于test的<div>
[attribute^=value]  $("div[title^=test]")  所有属性title以"test"开始的<div>
[attribute$=value]  $("div[title$=test]")  所有属性title以"test"结束的<div>
[attribute*=value]  $("div[title*=test]")  所有属性title包含"test"的<div>
[attribute|=value]  $("div[title|=test]")  所有属性title等于"test"或以"test"为前缀(后面跟着连字符-)的<div>
[attribute~=value]  $("div[title~=test]")  所有属性title用空格分开包含"test"的<div>
[attribute1][attribute2][attributeN]  $("div[id][title$='test']")  所有属性title以"test"开始的<div>

为了区分如下有html元素:
(1)<div title="en">title为en的div元素</div>
(2)<div title="en-UK">title为en-UK为div元素</div>
(3)<div title="english">title为english为div元素</div> (4)<div title="en uk">title为en uk的div元素</div> (5)<div title="uken">title为uken的div元素</div>
例子如下:
$('div[title^="en"]') 属性title以en开始的有:(1)(2)(3)(4)
$('div[title*="en"]') 属性title包含en的有:(1)(2)(3)(4)(5)
$('div[title|="en"]') 属性title等于en或以en为前缀的有:(1)(2)
$('div[title~="en"]') 属性title用空格分隔的包含en的有:(4)
 e5,子元素过滤选择器

(1)nth-child(even)选择父元素下的索引值为偶数的元素
(2)nth-child(odd)  选择父元素下的索引值为奇数的元素
(3)nth-child(index)选择父元素下的索引值为index的元素(从1开始)
(4)nth-child(3n) 父元素下索引值为3的倍数的元素(从1开始)
(5)nth-child(3n+1)父元素下索引值为3n+1的元素
(6):first-child 父元素下的第一元素  如$("ul li:first-child")选择ul下的第一个li元素
(7):last-child 父元素下的最后一个元素
(8):only-child 如果某元素下仅有唯一子元素,选择出来  如$("ul li:only-child") 在ul中选择是唯一子元素的li元素
f6,表单对象属性过滤选择器

:enabled $("#form1 :enabled") 选择id为form1的表单内的所有可用元素
:disabled $("#form2 :disabled")  选择id为form2的表单内的所有不可用元素
:checked  $("input:checked") 所有被选中的input元素(单选框和复选框)
:selected  $("select option:selected"),选择下拉列表被选中的所有元素
(4)表单选择器

:input $(":input")  所有<input><textarea><select><button>元素
:text  $(":text")    所有单行文本框
:password  $(":password")     所有密码框
:radio    $(":radio")    所有单选框
:checkbox    $(":checkbox")    所有多选框
:submit    $(":submit")    所有提交按钮
:image    $(":image")    所有图像按钮
:reset    $(":reset")    所有重置按钮
:button    $(":button")    所有按钮
:file    $(":file")    所有文件上传域
:hidden    $(":hidden")  所有不可见元素(前面已提过)

3  选择器注意事项

(1)对于 . # ( ] 等特殊字符,需要转义字符:  \\

(2)属性选择器中不再需要@符号,直接写为:$("div[title='test']")

(3)选择器中还有空格

$('.test :hidden') 带空格  选择class为test的元素里面的隐藏元素 如:
<div class="test">
    <div style="display:none;">aa</div>
</div>
选择的就是中间的那个元素


$('.test:hidden')  不带空格  选择class为test的隐藏元素  如:
<div class="test" style="display:none;>bb</div>
选择的就是这个元素
(4)is方法

jQuery的is方法常用来做判断
if($obj.is(":checked")){  //如果单选框或复选框被选中
}

if($obj.is(":visible")){  //如果$obj对象 可见
}
4,最后一个例子,实现全部产品和部分产品的切换显示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" > 
 $(document).ready(function(){  //等待所有dom绘制完成后就执行
 $catogory=$(".SubCategoryBox ul li:gt(5):not(:last)");//选择出ul下索引大于5不包括最后一个的所有对



 $catogory.hide();//隐藏
 
 $togglebtn=$("div.showmore > a");
 $togglebtn.click(function(){
 if($catogory.is(":visible")){
     $catogory.hide();  
     $(this).find("span")    //$(this)不要写成$this
    .css("background","url(img/down.gif)no-repeat 0 0")     //添加样式
    .text("显示全部品牌"); 
    $("ul li").removeClass("promopted");    //去掉高亮样式显示
 }else{
    $catogory.show();  
     $(this).find("span")
    .css("background","url(img/up.gif)no-repeat 0 0")     //添加样式
    .text("精简显示品牌"); 
    $("ul li").addClass("promopted");    //去掉高亮样式显示 
 }//else 
 return false;        //超链接不跳转
  
 }) //$togglebtn.click
 
 }); //$(document)
</script>
<title>test4</title>
</head>
<body>


<div class="SubCategoryBox">
    <ul>
        <li><a href="#">佳能</a> <i> (30440) </i></li>
        <li><a href="#">索尼</a> <i> (27220) </i></li>
        <li><a href="#">三星</a> <i> (20808) </i></li>
        <li><a href="#">尼康</a> <i> (17821) </i></li>
        <li><a href="#">松下</a> <i> (12289) </i></li>
        <li><a href="#">卡西欧</a> <i> (8242) </i></li>
        <li><a href="#">富士</a> <i> (12545) </i></li>
        <li><a href="#">柯达</a> <i> (21121) </i></li>
        <li><a href="#">宾得</a> <i> (45415) </i></li>
        <li><a href="#">理光</a> <i> (4512) </i></li>
        <li><a href="#">奥林巴斯</a> <i> (45415) </i></li>
        <li><a href="#">明基</a> <i> (5451) </i></li>
        <li><a href="#">爱国者</a> <i> (5412) </i></li>
        <li><a href="#">其他品牌相机</a> <i> (4521) </i></li>    
        
    </ul>    
</div>


<div class="showmore">
    <a href="more.html"><span>显示全部品牌</span></a>
</div>




</body>
</html>

jQuery自学教程(四)——事件

一、绑定事件 jQuery中通过bind()方法来为元素绑定这些事件(click, mousedown, mouseover, mousemove, change, select, blur, foc...

jquery.validate 自学自写

以前的项目表单验证都是 系统自带的 这次 要自己写表单验证 还真遇到不少问题 我先说一下 jquery.validate 成功运行的条件 1.页面要先加载完成 因为我使用requirej...

Jquery DataTables自学笔记 之 基本设置的中文注解

$(document).ready(function() { $('#example').dataTable({ "sScrollX":"100%", //表格的宽度 "sScroll...

jQuery自学教程(三)——DOM操作

DOM有三种形式,标准DOM、HTML DOM、CSS DOM,大部分进行了封装,然而jQuery中并不需要深刻理解它们。 其中最重要的DOM操作,就是元素及内容的操作和元素的属性操作。 一、元素及内...

jQuery自学教程(五)——事件对象

一、事件对象 js在事件处理函数中默认传递了event对象,jQuery在封装的时候,解决了兼容性问题,而且创建了一些非常好用的属性和方法。 事件对象就是event对象,通过处理函数默认传递接受。...

jQuery 自学笔记—7 AJAX

jQuery AJAX 实例 请点击下面的按钮,通过 jQuery AJAX 改变这段文本。 获得外部的内容 亲自试一试 什么是 AJAX? AJAX = 异步 JavaScript 和...

jquery自学系列三:选择器(下)

二)层次选择器 jquery层次选择器 选择器 描述 返回 示例 $("ancestor  descendant") 选取ancestor元素里所有的descen...

JQuery自学记录1——库加载及选择器

一、加载JQuery库 1、本地加载: 2、使用Google或者Microsoft的CDN(内容分发网络?) 二、一般格式: 书写JQuery一般使用...

jQuery 自学笔记—5 事件方法

jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。 触发实例: $("button#demo").click() 上面的例子将触发 id="demo" 的 b...

jQuery-自学笔记(1)——基础入门

jQuery:自学笔记(1)——基础入门 认识JQuery      1.jQuery概述   jQuery是一个快速、小巧 、功能丰富的JavaScript函数库.它可以实现“写的少,做的多”...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery自学
举报原因:
原因补充:

(最多只允许输入30个字)