<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.bg{ background:#0F3;}
.bg1{ background:#00F;}
</style>
<script type="text/ecmascript" src="jquery.js"></script>
<script type="text/ecmascript" src="jquery-1.7.2.min.js"></script>
<script type="text/ecmascript">
$(function(){
//var red = $("p span");//选择元素中包含的span元素,并返回该元素的jQuery对象应用指针
//red.css("color","red");//调用jQuery的css函数,定义选取对象的css样式,其中第一个参数表示css属性名,第二个参数表示css属性值
//var red = $("span","p");//在指定范围内(所有段落文本p元素内选择span元素)
//red.css("color","red");
//$("span").css("font-size","50px");//把span元素转换为jQuery对象,然后调用css()方法定义字体大小
//var span = document.getElementsByTagName("span")[0];//获取节点对象,此时返回DOM元素对象
//var span = $(span);//将DOM对象转换为jQuery对象
//span.css("color","blue");
//var span = $(span)[0];//把jQuery对象转换为DOM对象
//var span = $("span").get(0);//除了使用集合索引值把jQuery对象转换为DOM对象外,还 可以使用jQuery的get()获取对象内指定索引的元素
//span.style.color = "green";//调用DOM对象的style属性,设置字体颜色为蓝色
//调用DOM属性定义文字字体
//var span = $("span");
//span.each(function(n){ //遍历span元素集合
//this.style.fontSize = (n+1)*20+"px";
//});
//调用jQuery对象方法定义文字字体
/*var span = $("span");
span.each(function(n){
$(this).css("font-size",(n+1)*20"+px"); //语法问题错误
});*/
//alert($("span").size());//返回jQuery对象中的元素个数
//alert($("span").length);//返回2
//var spans = $("span").get().reverse();//把当前jQuery对象转换为DOM对象,并颠倒他们的位置
//spans[0].style.color = "red";
//var a = $("body *");//获取body元素包含的所有子元素
//var e = document.getElementsByTagName("div")[0];//获取div元素在文档中的索引值
//alert(a.index(e));//显示索引值
//attr(name):根据属性名(name 参数)获取 jQuery 对象中第一个元素的对应属性值
//var href = $("a").attr("href");
//alert(href);
//attr(key,value):为jQuery 对象定义属性并赋值
//$("img").attr("width","300");
//attr(key,fn):我们还可以为传递的属性值设置为一个函数,通过函数计算所得的值来为属性赋值
//$("img").attr("title",function(){
//return this.src
//});
//attr(properties):为 jQuery 对象同时定义多个属性。多个属性以名/值对的形式组成对象进行参数传递
//$("img").attr({width:"200",height:"200",title:"这是一个示例",alt:"示例图像"});
//removeAttr(name):该方法能够移出 jQuery 对象内指定属性
//$("img").removeAttr("width");
//无效果?
//如果要为元素增加样式类,可以使用addClass(class)方法
//$("p").addClass("red");
//可以使用attr()方法定义样式类,此时是把它看作一个普通的属性进行增加
//$("p").attr("class","blue");
//如果要删除样式类,则可以使用 removeClass(class)方法,具体用法就不再举例,同样也可以使用removeAttr(name)方法来删除样式类。
//jQuery 还自定义了一个toggleClass(class)方法,它如同一个开关,如果元素已经定义了指定样式类,则会删除该样式类,否则增加该样式类。巧用这个 //方法,可以很轻松地设计鼠标经过或单击时动态改变元素样式的效果。
$("li").each(function(){ //遍历jQuery对象内所有对象
this.onmouseover = function(){ //为当前元素注册鼠标经过时事件
$(this).toggleClass("bg");
}
this.onmouseout = function(){
$(this).toggleClass("bg");
}
this.onclick = function(){
$(this).toggleClass("bg1");
}
});
});
</script>
</head>
<body>
<div><span>文本块1</span></div>
<p><span>文本块2</span></p>
<a href="hello.html" accesskey="k" id="img" target="_blank">超链接</a>
<img src="img/hardworking.jpg"/>
<p>段落文本1</p>
<p>段落文本2</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>
分享到:
相关推荐
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
个人学习jquery时的一些笔记,比较基础。
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
锋利的JQuery学习笔记
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记
javascript jquery 学习笔记 资料
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
JQUERY学习笔记.doc JQUERY学习笔记.doc JQUERY学习笔记.doc
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
NULL 博文链接:https://goyourauntie.iteye.com/blog/745626
JQuery学习笔记,docx格式,记录了JQuery的一些知识要点,供大家参考。
JQuery学习笔记.txtJQuery学习笔记.txtJQuery学习笔记.txt
这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配,是学习熟悉jQuery的好资料!
JQuery学习笔记 详 个人学习Jquery时记下的心得笔记 详细
jquery 学习笔记源码 1第一个jquery
]_封捷_jQuery学习笔记
jquery 学习笔记源码 1-3章
锋利的JQuery学习笔记,总结超经典!