新浦京81707con > 软件下载 > jQuery学习第一课,jQuery入门第一课

原标题:jQuery学习第一课,jQuery入门第一课

浏览次数:150 时间:2019-11-28

要对页面上的某些成分进行操作,首先要选中它,那就要用到选择符。选用符能够认为是二个加强版的getElementById方法。getElementById方法重回的是二个HTML成分,jQuery采纳符返回的是HTML成分的一个封装。利用那个包裹集,jQuery赋予了HTML元素更加的多的能够操作的方法。在JQuery中,处于宗旨身份的叁个函数正是$。对,它正是叁个函数,名字有一些奇怪。这一个函数就是选取函数,其貌似用法是

选拔符能够以为是一个加强版的getElementById方法。getElementById方法重回的是一个HTML成分,jQuery选用符重回的是HTML成分的三个装进。利用这几个包裹集,jQuery付与了HTML成分越多的能够操作的主意。在JQuery中,处于主题地点的三个函数正是$。对,它正是二个函数,名字有一些奇怪。这些函数正是选取函数,其雷同用法是

var obj=$(selector);

var obj=$(selector);

其间selector是三个字符串,正是底下要首要介绍的选择符。再次回到的是因素的包裹会集。事实上,JQuery的着力$函数的威力远不仅仅当做接受符来用,当它的参数是八个函数的时候,它的职能是相近onload事件,当页面包车型地铁DOM成分完全加载后,它参数内的法子就可以被实践。它比onload更有优势,onload只可以登记1个函数,可是它可以一再被调用,也正是足以挂号四个函数到DOM加载完全后实行,并且onload是要等页面上的具有故事情节都加载完成后再施行的,要是有大图片等内容,也许变成函数实行延时。而$函数只要DOM布局完全加载就能够试行。上面看二个轻易的例证:

此中selector是多个字符串,便是上面要根本介绍的选用符。重临的是因素的卷入群集。事实上,JQuery的基本$函数的威力远不仅充作选择符来用,当它的参数是三个函数的时候,它的法力是相近onload事件,当页面包车型客车DOM成分完全加载后,它参数内的秘技就能够被执行。它比onload更有优势,onload只好登记1个函数,可是它能够频频被调用,相当于足以注册多个函数到DOM加载完全后实践,何况onload是要等页面上的有着剧情都加载完成后再实施的,若是有大图片等内容,只怕造成函数施行延时。而$函数只要DOM构造完全加载就能够进行。上边看三个差非常的少的例子:

<html xmlns=";
<head>
<title>JQuery First Page - Liehuo.net</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
var p=$('#p1');
alert(p);
});
</script>
</head>
<body>
<p id="p1">I'm a p</p>
</body>
</html>

复制代码 代码如下:

能够见到,最简便易行的接收器正是和getElementById形似的,利用成分的ID作为采取符。能够看看p到底是怎样,利用js调节和测量检验器能够见见:

<html xmlns=";
<head>
<title>JQuery First Page</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>

葡京娱乐在线登录 1

<script type="text/javascript">
$(function(){
var p=$('#p1');
alert(p);
});
</script>
</head>
<body>
<p id="p1">I'm a p</p>
</body>
</html>

p是多个临近数组的目的,里面含有了被入选的要素。张开[Methods]结点能够观望好多主意,都是jQuery提供的法子。在此个例子中,成分唯有一个,因而通过p[0]就会获得该HTML成分,p[0]正是和getElementById得到的指标是风流浪漫律的。

能够看来,最轻易易行的选取器就是和getElementById相通的,利用成分的ID作为选择符。能够看看p到底是怎么着,利用js调节和测验器能够观察:

 

葡京娱乐在线登录 2

jQuery接纳符的不战而屈人之兵之处在于它差不离全盘相称CSS2的选拔符,而随意你的浏览器是或不是合营CSS2。借使对CSS选择符还不熟习的,请参见笔者的上后生可畏篇日记:CSS采用符。对于选用到的因素,能够给她施加相当多办法,那一个办法不是本文介绍的主要,这里先介绍多个,就是css(attr,value)方法,这些点子能够给包装成分的css属性中的attr属性的值设置为value.上边举的例证就是选拔这么些措施给页面成分扩张一点字体上的改动,大家得以以此区分出某些选项符到底选中了怎么因素。那一个事例和本身上一篇的事例的内容大概是如出意气风发辙的,笔者就不加解释了,只是那篇的例证也都适用于IE6!

p是多少个相似数组的对象,里面包括了被选中的要素。展开[Methods]结点能够见到不胜枚举艺术,都以jQuery提供的措施。在这里个事例中,元素独有一个,因而通过p[0]就能够博得该HTML成分,p[0]就是和getElementById得到的对象是同等的。

  • 共3页:
  • 上一页
  • 1
  • 2
  • 3
  • 下一页

jQuery接收符的有力之处在于它大致完全合作CSS2的接收符,而任由你的浏览器是还是不是相配CSS2。借使对CSS采纳符还不熟谙的,请参照他事他说加以考查小编的上少年老成篇日记:CSS接纳符。对于选择到的要素,能够给他施加很多主意,那几个点子不是本文介绍的关键,这里先介绍二个,正是css(attr,value)方法,那么些艺术能够给包装成分的css属性中的attr属性的值设置为value.上边举的事例正是选用那些法子给页面成分扩展一点字体上的变迁,大家能够以此区分出有些选项符到底选中了何等要素。那些事例和本身上风姿浪漫篇的例子的开始和结果大概是黄金年代致的,作者就不加解释了,只是这篇的事例也都适用于IE6!

...

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title>JQuery Selector</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
$("h1,h2").css("color","Red"); //element selector
$(".warning").css("font-style","italic"); //class selecotr
$("p.warning").css("color","Red");
$("p.big.warning").css("font-size","x-large");//multi-class selector
$("*[id]").css("color","red"); //attribute selector
$("p[class]").css("color","blue");
$("p[class][id]").css("font-size","x-large");
$("div[title='title']").css("font-weight","bold");
$("div[title^='title']").css("color","red");
$("div[title$='World']").css("color","blue");
$("div[title~='Hello']").css("font-size","x-large");
$("div[title*='Hello']").css("font-style","italic");
$("div[title|='Hello']").css("background-color","silver");
$("p .warning").css("font-size","x-large"); //decendent selector
$("body > .warning").css("border","1px solid"); //child selector
});
</script>
</head>
<body>
<h1>
This is H1</h1>
<h2>
This is H2</h2>
<h3>
This is H3</h3>
<p class="warning">
Real Warning!</p>
<span class="warning">Common Worning</span>
<p class="big warning ">
Warning and Big</p>
<div id="title">
I am title</div>
<p class="warning">
Real Warning!</p>
<p id="idp1" class="myclass">
P with an ID and class</p>
<p>
The last line.</p>
<p id="idp2">
P with an ID</p>
<div title="title" >I am title</div>
<div title="title2">I am title2</div>
葡京娱乐在线登录,<div title="Hello World">Hello World</div>
<div title="HelloWorld">HelloWorld</div>
<div title="Hello-World">Hello-World</div>
<p><span class="warning">Class warning inside p</span></p>
</body>
</html>

效果如下:
葡京娱乐在线登录 3 

本文由新浦京81707con发布于软件下载,转载请注明出处:jQuery学习第一课,jQuery入门第一课

关键词: 新浦京81707con

上一篇:Xpath语法简介,爬虫基础

下一篇:没有了