jQuery学习笔记1 -

jason_onetwo

浏览: 25418 次
性别:
来自: 上海

最近访客更多访客>>

cx_shw

huangwenhui5000

panqianyong

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery学习笔记1

<!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>

分享到：