jquery基础

(1)

eq()、addClass()、removeClass()方法、find()方法 总结

<!DOCTYPE html> <html> <head>   <style>   div { width:60px; height:60px; margin:10px; float:left;         border:2px solid blue; }   .red { background:red; }   </style>   <script type="text/javascript" src="/jquery/jquery.js"></script> </head> <body>   <div></div>   <div></div>   <div></div>   <div></div>   <div></div>   <div></div> <script>    $("body").find("div").eq(2).addClass("red");//向被选元素添加一个或多个类    $(document).ready(function(){    $("button").click(function(){    $("body").find("div").eq(2).removeClass("red");//被选元素移除一个或多个类   });  //find()方法:获得当前元素集合中每个元素的后代,通过选择器、jQuery // 对象或元素来筛选。 }); </script> <button>click me</button> </body> </html>
(2)

find()方法:

<!DOCTYPE html> <html> <head>   <script type="text/javascript" src="/jquery/jquery.js"></script> </head> <body>   <p><span><b>Hello</b></span>, how are you?</p>   <p>Me? I'm <span>good</span>.</p> <script>   $("span").find("b").css('color','red'); </script> </body> </html>
------------------------------------------

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法:

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:

实例

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
选择所有禁用的 <input> 和 <button> 元素:
$(":disabled")
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function(){
    $(":disabled").css("background-color","#B2E0FF");
});
 
</script>	
</head>
<body>
<html>
<body>
<form action="">
Name: <input type="text" name="user" />
<br />
Password: <input type="password" name="password" disabled="disabled" />
<br />
<button type="button">Useless Button</button>
<input type="button" value="Another useless button" disabled="disabled" />
<br />
<input type="reset" value="Reset" />
<input type="submit" value="Submit" disabled="disabled" />
<br />
</form> 
</body>
</html> 
</body>
</html>

1.隐藏class=“”的html元素

<script src="jquery/jquery.js"></script>
<script>
$(document).ready(function(){
 $("button").click(function(){
 $(".main").hide();
 });
});
</script>
<div class="main">123</div>
<div class="main">456</div>
<button type="button">点击隐藏</button>

2.隐藏所有标签为<p>的元素

<script src="jquery/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$('p').hide();
});
});
</script>
<button type="button">点击隐藏</button>
<p>隐藏1</p>
<p>隐藏2</p>
<p>隐藏3</p>

3.隐藏id=""的元素

<script src="jquery/jquery.js"></script>
<script>
$(document).ready(function(){
 $("button").click(function(){
 $("#main1").hide();
 $("#main2").hide();
 });
});
</script>
<div id="main1">123</div>
<div id="main2">456</div>
<button type="button">点击隐藏</button>
4.选择1不能编辑2,选择2不能编辑1
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// $("#n1").bind("click",function(){
$("#n1").click(function(){
if(document.getElementById("n1").checked){
document.getElementById("n2").disabled=true;
}else{
document.getElementById("n2").disabled=false;
}
});
// $("#n2").bind("click",function(){
$("#n2").click(function(){
if(document.getElementById("n2").checked){
   document.getElementById("n1").disabled=true;
}else{
document.getElementById("n1").disabled=false;
}
});
});
</script>
</head>
<body>
<input type="checkbox" value="" id="n1" name="n1">第一个复选框
<input type="checkbox" value="" id="n2" name="n2">第二个复选框
</body>
</html>
————————————————————————————————————————————————————————

<html>
<head>
<style>
#main{width:200px;height:100px;border:2px solid red;display:none;}
</style>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  //bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数
  $("button").bind("click",function(){
    $("div").slideToggle();
  });
});
</script>
</head>
<body>

<div id="main">哈哈,被骗了吧</div>
<button>显灵吧</button>
</body>
</html>

_________________________________________________________________________________________

替代方案

如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。

谷歌和微软的服务器都存有 jQuery 。

如需从谷歌或微软引用 jQuery,请使用以下代码之一:

Google CDN:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

Microsoft CDN:

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>
————————————————————————————————————————————————————————————————————————
 
 
  
  
  
  

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

示例

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$("p.test").hide() - 隐藏所有 class="test" 的段落

$("#test").hide() - 隐藏所有 id="test" 的元素

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

$(this)当前 HTML 元素
$("p")所有 <p> 元素
$("p.intro")所有 class="intro" 的 <p> 元素
$(".intro")所有 class="intro" 的元素
$("#intro")id="intro" 的第一个元素
$("ul li:first")每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")id="intro" 的 <div> 元素中的所有 class="head" 的元素

jquery事件:

jQuery 事件方法

事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。

触发实例:

$("button#demo").click()

上面的例子将触发 id="demo" 的 button 元素的 click 事件。

绑定实例:

$("button#demo").click(function(){$("img").hide()})

上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。

方法描述
bind()向匹配元素附加一个或更多事件处理器
blur()触发、或将函数绑定到指定元素的 blur 事件
change()触发、或将函数绑定到指定元素的 change 事件
click()触发、或将函数绑定到指定元素的 click 事件
dblclick()触发、或将函数绑定到指定元素的 double click 事件
delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()移除所有通过 live() 函数添加的事件处理程序。
error()触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()返回 event 对象上是否调用了 event.preventDefault()。
event.pageX相对于文档左边缘的鼠标位置。
event.pageY相对于文档上边缘的鼠标位置。
event.preventDefault()阻止事件的默认动作。
event.result包含由被指定事件触发的事件处理器返回的最后一个值。
event.target触发该事件的 DOM 元素。
event.timeStamp该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type描述事件的类型。
event.which指示按了哪个键或按钮。
focus()触发、或将函数绑定到指定元素的 focus 事件
keydown()触发、或将函数绑定到指定元素的 key down 事件
keypress()触发、或将函数绑定到指定元素的 key press 事件
keyup()触发、或将函数绑定到指定元素的 key up 事件
live()为当前或未来的匹配元素添加一个或多个事件处理器
load()触发、或将函数绑定到指定元素的 load 事件
mousedown()触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()触发、或将函数绑定到指定元素的 mouse up 事件
one()向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()文档就绪事件(当 HTML 文档就绪可用时)
resize()触发、或将函数绑定到指定元素的 resize 事件
scroll()触发、或将函数绑定到指定元素的 scroll 事件
select()触发、或将函数绑定到指定元素的 select 事件
submit()触发、或将函数绑定到指定元素的 submit 事件
toggle()绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。
trigger()所有匹配元素的指定事件
triggerHandler()第一个被匹配元素的指定事件
unbind()从匹配元素移除一个被添加的事件处理器
undelegate()从匹配元素移除一个被添加的事件处理器,现在或将来
unload()触发、或将函数绑定到指定元素的 unload 事件

each()函数:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>

each()方法能使DOM循环结构简洁,不容易出错。each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, JSON 等等

each处理一维数组
   var  arr1  =  [  " aaa " " bbb " " ccc "  ];      
  $.each(arr1, 
function (i,val){      
      alert(i);   
      alert(val);
  });   
alert(i)将输出0,1,2
alert(val)将输出aaa,bbb,ccc

 

 

each处理二维数组  
   var  arr2  =  [[ ' a ' ' aa ' ' aaa ' ], [ ' b ' ' bb ' ' bbb ' ], [ ' c ' ' cc ' ' ccc ' ]]      
   $.each(arr,  function (i, item){      
      alert(i);   
      alert(item);      
   });  
arr2为一个二维数组,item相当于取这二维数组中的每一个数组。
item[0]相对于取每一个一维数组里的第一个值   
alert(i)将输出为0,1,2,因为这二维数组含有3个数组元素
alert(item)将输出为  ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']
addClass()方法
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
//addClass()方法向被选元素添加一个或多个类
$(document).ready(function(){
  $("button").click(function(){
    $('p').addClass(function(n){
      return 'par_' + n;
    });
  });
});
</script>
<style type="text/css">
.par_0
{
color:blue;
}
.par_1
{
color:red;
}
.par_2
{
color:#ddbbaa;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph too</p>
<button>向 p 元素添加类</button>
</body>
</html>
案例(2)
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").addClass("intro");
  });
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<p >This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>从第一个段落中删除类</button>
</body>
</html>
index()方法

index() 方法返回指定元素相对于其他指定元素的 index 位置。

这些元素可通过 jQuery 选择器或 DOM 元素来指定。

注释:如果未找到元素,index() 将返回 -1。

<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("li").click(function(){
    alert($("li").index());
  });
});
</script>
</head>
<body>
<p>点击列表项可获得其相对于同胞元素的 index 位置:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>
removeclass() 方法


removeClass() 方法从被选元素移除一个或多个类。

案例(2)

<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
//removeClass() 方法从被选元素移除一个或多个类
$(document).ready(function(){
  $("button").click(function(){
      $('ul li').removeClass(function() {
      return 'listitem_' + $(this).index();
    });
  });
});
</script>
<style type="text/css">
.listitem_1
{
color:red;
}
.listitem_0
{
color:blue;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<ul>
<li class="listitem_0">Apple</li>
<li class="listitem_1">IBM</li>
</ul>
<button>删除列表项中的类</button>
</body>
</html>

案例(2)<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").removeClass("intro");
  });
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>
</head>


<body>
<h1 id="h1">This is a heading</h1>
<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>从第一个段落中删除类</button>
</body>
</html>

jquery change()方法

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".field").change(function(){
    $(this).css("background-color","#FFFFCC");
  });
  $("button").click(function(){
    $("input").change();
  });
});
</script>
</head>
<body>
<button>激活文本域的 change 事件</button>
<p>Enter your name: <input class="field" type="text" /></p>
</body>
</html>

jquery  removeAttr() 方法从被选元素中移除属性

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").removeAttr("style");
  });
});
</script>
</head>
<body>
<h1>这是一个标题</h1>
<p style="font-size:120%;color:red">这是一个段落。</p>
<p>这是另一个段落。</p>
<button>删除所有 p 元素的 style 属性</button>
</body>
</html>


jquery submit()方法

当提交表单时,会发生 submit 事件。

该事件只适用于表单元素。

submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("form").submit(function(e){
    e.preventDefault();
    alert("Submit prevented");
  });
});
</script>
</head>
<body>
<form name="input" action="" method="get">
First name:
<input type="text" name="FirstName" value="Mickey" size="20">
<br />Last name:
<input type="text" name="LastName" value="Mouse" size="20">
<br />
<input type="submit" value="Submit">
</form>
</body>
</html>
































 
 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值