jQuery_基础3

el/2024/2/26 0:06:33
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">

$(function()
{
var p = $("p");//有这样一种命名规范:jquery对象命名 $p 加一$符号 表示jquery对象 不加表示dom对象
var li = $("ul li:eq(1)");//第二个li

var title = p.attr("title");//attr();一个参数:属性的名字返回属性的值(读操作). 两个参数:属性的name属性的值,写入操作
//上面那句=p[0].title//取得tilte属性的值
var title2 = li.attr("title");
var text = li.text();

alert(title);
alert(title2);
alert(text);

li.attr("title", "myTitle");//传两个参数就是写操作

});
</script>
</head>
<body>
<p title="hello world">您认为圣思园培训好不好呢?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>

 var addItems = function()
{
/*
document.getElementById("div1").innerHTML = "";//最快的清空方式.每次appendChild之前清空.也可以用remove方法
//但是innerHTML="" 最佳实践

var value = parseInt(document.getElementById('itemsNumber').value);

for(var i = 0; i < value; i++)
{
//参数:标签的名字
var input = document.createElement("input");
//设置属性,什么样的input.
input.setAttribute("type", "text");

var br = document.createElement("br");

document.getElementById("div1").appendChild(input);//往div1标签下附加子元素
document.getElementById("div1").appendChild(br);//这些JS的操作不会反馈到右键查看源代码
//可以通过firebug查看,右键源代码不会显示附加的代码

}
*/
document.getElementById("div1").innerHTML = "";
var value = parseInt($("#itemsNumber").val());

var str = "";

for(var i = 0; i < value; i++)
{
str += "<input type='text'><br>";
}

$("#div1").append(str);

}
</script>
</head>
<body>
<input type="text" id="itemsNumber">
<input type="button" id="btn" value="click" onclick="addItems();">
<div id="div1"></div>
</body>

 <script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">

$(function()
{
//附加两条li到后面
$("ul").append("<li title='abc'>hello</li>")
.append("<li title='xyz'>world</li>");
//第二种写法 附加一条li到后面
$("<li title='abc'>hello</li>").appendTo($("ul"));
});
</script>
</head>
<body>
<p title="hello world">您认为圣思园培训好不好呢?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>

<script type="text/javascript">
$(function()
{
var li1 = $("<li title='hello'>hello</li>");
var li2 = $("<li title='hello'>world</li>");
var li3 = $("<li title='hello'>hello world</li>");

//附加到最后一个li后面
$("ul").append(li1);

//附加到第一个li前面
$("ul").prepend(li2);

//附加到指定位置
$("ul li:eq(4)").after(li3);

});
</script>
</head>
<body>
<p title="hello world">您认为圣思园培训好不好呢?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>

<script type="text/javascript">
$(function()
{
//将第3个节点插入到第5个节点后
$("ul li:eq(2)").insertAfter("ul li:eq(4)");
});
</script>
</head>
<body>
<p title="hello world">您认为圣思园培训好不好呢?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>

<script type="text/javascript">
$(function()
{
//remove方法会返回被移除的节点的jQuery对象
var removedLi = $("ul li:eq(3)").remove();

removedLi.appendTo($("ul"));

//$("ul li"):获得后代元素
//$("ul li").remove("li[title != 2]");

$("ul li:eq(3)").empty(); //清空元素中的内容

});
</script>
</head>
<body>
<p title="hello world">您认为圣思园培训好不好呢?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>

<script type="text/javascript">
/*
var addMore = function()
{
var div = document.getElementById("div1");

var br = document.createElement("br");
var input = document.createElement("input");
var button = document.createElement("input");

input.setAttribute("type", "file");
button.setAttribute("type", "button");
button.setAttribute("value", "Remove");

//每次删除的对象不一样. 删除当前对象
button.onclick = function()
{
div.removeChild(br);
div.removeChild(input);
div.removeChild(button);//把自己也要删除掉
}

div.appendChild(br);
div.appendChild(input);
div.appendChild(button);
}
*/

var count = 0;
$(function()
{
$("input[type=button]").click(function()
{
var br = $("<br>");
var input = $("<input type='file'>");
var button = $("<input type='button' value='Remove" + (++count) + " '>");

$("#div1").append(br).append(input).append(button);

button.click(function()
{
br.remove();
input.remove();
button.remove();
});
});
});

</script>
</head>
<body>
<input type="file"> <input type="button" value="more...">
<div id="div1"></div>
</body>

<script type="text/javascript">
$(function()
{
$("ul>li").click(function()
{
//当前对象赋值一份附加到ul上面
//this:当前所用的对象
//$(tihs):转成jquery对象
//clone(true):克隆出来的对象拥有被克隆对象的事件
$(this).clone(true).appendTo("ul");
});
});
</script>
</head>
<body>
<p title="hello world">您认为圣思园培训好不好呢?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>

<script type="text/javascript">

$(function()
{
//将整个的p元素替换掉. 两种方法等效
//$("p").replaceWith("<a href='http://www.google.com'>Google.com</a>");

$("<a href='http://www.google.com'>Google.com</a>").replaceAll("p");
});

</script>
</head>
<body>
<p title="hello world">您认为圣思园培训好不好呢?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>

<script type="text/javascript">
$(function()
{
//包在所有元素外面
//$("p").wrap("<a href='http://www.google.com'><b></b></a>");

//包在最内层文本外面
$("p").wrapInner("<a href='http://www.google.com'><b></b></a>");
});
</script>
</head>
<body>
<p title="hello world">您认为圣思园培训好不好呢?</p><br>
<p title="hello world">您认为圣思园培训好不好呢?</p><br>
<p title="hello world">您认为圣思园培训好不好呢?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>

<script type="text/javascript">
$(function()
{
$("input:eq(0)").click(function()
{
//给多个属性赋值
$("p").attr({"title":"welcome", "hello": "world"});
});

$("input:eq(1)").click(function()
{
//1个参数表示读取
alert($('p').attr("hello"));
});

$("input:eq(2)").click(function()
{
//删除属性
$('p').removeAttr("title");
});
});
</script>
</head>
<body>
<input type="button" value="button1">
<input type="button" value="button2">
<input type="button" value="button3"><br>
<p title="hello world">您认为圣思园培训好不好呢?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>

<html>
<head>
<style type="text/css">
.high{
font-weight: bold;
color:red
}

.another{
font-style:italic;
color:green
}
</style>

<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">

$(function()
{
//索引位置为0的inut
$("input:eq(0)").click(function()
{
alert($('p').attr("class"));
});

$("input:eq(1)").click(function()
{
//新加一个class. 如果原来就存在则替换掉原来的.
$("p").attr("class", "high");
});

$("input:eq(2)").click(function()
{
//对p元素附加一个css.原来就有的话 追加
$("p").addClass("high");
});

$("input:eq(3)").click(function()
{
//移除class中某个属性
$("p").removeClass("high");
});

$("input:eq(4)").click(function()
{
//移除class
$("p").removeClass();
});

$("input:eq(5)").click(function()
{
//如果有class为annother的. 则移除,如果没有则增加annother这个class
$("p").toggleClass("another");
});

$("input:eq(6)").click(function()
{
//alert($('p').hasClass('another'));
alert($('p').is('.another'));
});
});
</script>
</head>
<body>
<input type="button" value="button1">
<input type="button" value="button2">
<input type="button" value="button3">
<input type="button" value="button4">
<input type="button" value="button5">
<input type="button" value="button6">
<input type="button" value="button7">
<p title="hello world" class="hello">您认为圣思园培训好不好呢?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>
</html>

<script type="text/javascript">

$(function()
{
$("input:eq(0)").click(function()
{
//<b>您认为圣思园培训好不好呢?</b>
console.info($("p").html());
});

$("input:eq(1)").click(function()
{
//您认为圣思园培训好不好呢?
console.info($("p").text());
});

$("input:eq(2)").click(function()
{
//给p标签附上HTML代码
$("p").html('<a href="http://www.google.com">hello world</a>');
});

$("input:eq(3)").click(function()
{
//给p标签附上文本
$("p").text('<a href="http://www.google.com">hello world</a>');
});

$("input:eq(4)").click(function()
{
//button5
console.info($(this).val());
});

$("input:eq(5)").click(function()
{
//相当于标签里的value=""
$(this).val('hello world');
});
});


</script>
</head>
<body>
<input type="button" value="button1">
<input type="button" value="button2">
<input type="button" value="button3">
<input type="button" value="button4">
<input type="button" value="button5">
<input type="button" value="button6"><br>
<p title="hello world"><B>您认为圣思园培训好不好呢?</B></p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</body>

<script type="text/javascript">

$(function()
{
//输入框获得焦点后触发 jquery中没有on前缀了. js中是onfocus
$("#username").focus(function()
{
var value = $(this).val();

// this.defaultValue 此时this是dom的this. 表示页面加载完的值
if(value == this.defaultValue)
{
$(this).val('');
}
});

//blur 焦点离开
$('#username').blur(function()
{
var value = $(this).val();

if(value == '')
{
$(this).val(this.defaultValue);
}
});


//输入框获得焦点后触发 jquery中没有on前缀了. js中是onfocus
$("#password").focus(function()
{
var value = $(this).val();

if(value == this.defaultValue)
{
$(this).val('');
}
});

//blur 焦点离开
$('#password').blur(function()
{
var value = $(this).val();

if(value == '')
{
$(this).val(this.defaultValue);
}
});
}

);
</script>
</head>
<body>
<input type="text" id="username" value="用户名"><br>
<input type="password" id="password" value="aaaaaa"><br>
<input type="button" value="我是一个按钮">
</body>

$(function()
{
//获得body下面的所有孩子. 不包括孙子
var v1 = $("body").children();
//p的孩子
var v2 = $("p").children();
//ul的孩子
var v3 = $("ul").children();

console.info(v1.length);//2
console.info(v2.length);//0
console.info(v3.length);//6

for(var i = 0; i < v3.length; i++)
{
//jquery对象转成了dom对象
console.info(v3[i].innerHTML);
}
})

</script>

</head>

<body>

<p title="hello world">您认为圣思园培训好不好呢?</p>

<ul>

<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>

<script type="text/javascript">
$(function()
{
//同辈的下一个元素
var v1 = $("p").next();
console.info(v1.html());

//上一个同辈元素
var v2 = $('p').prev();
console.info(v2.html());

//上下所有的同辈元素
var v3 = $('p').siblings();
console.info(v3.length);
});
</script>
</head>
<body>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
<ul>
<li title="1">bb</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
<p title="hello world">您认为圣思园培训好不好呢?</p>
<ul>
<li title="1">aa</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>

<script type="text/javascript">
//js中默认的事件处理:冒泡. 单击里面的元素,外层也会处理. 向外寻找
var method1 = function()
{
console.info("div clicked");
}

var method2 = function(event)
{
console.info(event);
console.info("span clicked");
}

var method3 = function()
{
console.info("body clicked");

}
</script>
</head>
<body onclick="method3();">
<div id="content" onclick="method1();">
外层div元素
<span onclick="method2(event);">内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>

<script type="text/javascript">

var startTime = new Date().getTime();

$(document).ready(function(){
test1();
})

function test1(){
var endTime2 = new Date().getTime();
var a = endTime2 - startTime;
$("<div>jQuery的ready() : "+a+" ms</div>").appendTo("#div1");
}

function test2(){
var endTime1 = new Date().getTime();
var b = endTime1 - startTime;
$("<p>JavaScript的window.onload : "+b+" ms</p>").appendTo("#div1");
}
</script>
</head>

<!--
//onload:页面全部加载完毕,外部文件(图片,css,js)也要全部加载完.才执行dom的onload
//jquery的ready:执行时机比dom的onload早很多,dom已准备好就执行. 图片未加载前执行
-->
<body onload="test2();">
<img src="http://www.shengsiyuan.com/Images/Ad/N.jpg" style="width:200px;height:200px;"/>

<img src="http://www.infoq.com/resource/skyscraper/250/InfoQ%20Banner%20-%20ME4S.gif" style="width:200px;height:200px;"/>

<div id="div1"></div>
</body>

http://www.ngui.cc/el/4893637.html

相关文章

吃“软饭”的兄弟,你们过得好吗?(转)

看到此标题&#xff0c;是不是雷着了兄弟&#xff0c;此“软饭”非彼“软饭”。------软件行业 又一次夜深&#xff0c;困&#xff0c;睡不着。爬起来&#xff0c;打开电脑。写下了这些东西。以此纪念&#xff0c;缅怀那些曾经的过往。都说男人也有生理周期&#xff0c;每个月也…

Spring_定时任务_转

这几天因为工作的需要&#xff0c;用到了spring的定时任务的功能&#xff0c;网上查资料&#xff0c;并且实际运用了一下&#xff0c;觉得spring还是很智能化的,只需要配置一下配置文件就可以了&#xff0c;下面的这篇文章我觉得还是很好的&#xff0c;摘录下来&#xff0c;供以…

HTML_Css_张龙篇

css.css文件: /*p元素用classright 靠右对齐 p元素用classcenter 局中对齐*/p.right {text-align: right}p.center {text-align: center}/*对所有的p只用left对齐**/p {text-align: left}/*所有的h1-h6:用蓝色样式*/h1,h2,h3,h4,h5,h6 { color: blue }/*页面中所有classcent…

精通CSS.DIV网页样式与布局_第二章

<html><head><title>class选择器</title><style type"text/css"><!--.one{ color:red; /* 红色 */ font-size:18px; /* 文字大小 */}.two{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */}.three{ color:cyan; /*…

(转) Struts2 URL参数 s:if 判断应用

Struts2的s:if标签很怪异&#xff0c;下面来具体地看看&#xff0c;如何用s:if标签来判断URL中的参数。 访问一个带有URL参数的页面&#xff0c;如&#xff1a;http://localhost:8080/a.jsp?namexht555 # <% page language"java" contentType"text/html; ch…

从 iBatis 到 MyBatis(转)

从 iBatis 到 MyBatis&#xff0c;你准备好了吗&#xff1f; 对于从事 Java EE 的开发人员来说&#xff0c;iBatis 是一个再熟悉不过的持久层框架了&#xff0c;在 Hibernate、JPA 这样的一站式对象 / 关系映射&#xff08;O/R Mapping&#xff09;解决方案盛行之前&#xff0c…

Spring使用AOP时ClassCastException问题

[sizelarge]Spirng实现AOP采用动态代理还是CGLIB代理&#xff0c;两种方式如下&#xff1a;[/size] [sizemedium] 1、Spring&#xff1a;自动选择。[/size] 如果有实现接口采用JDK动态代理 如果没有实现接口采用cglib代理 <aop:aspectj-autoproxy proxy-target-class&qu…

Java SE 第一讲_JDK下载_安装_Java程序编译与执行

[sizelarge][b]Java SE 第一讲&#xff1a;[/b][/size] Java SE&#xff1a;Java Standard Edition Java ME: Java Micro Edition Java EE&#xff1a;Java Enterprise Edition Java是由Sun公司推出的&#xff08;2010年初被Oracle公司收购&#xff09;。 收购价格&#xff1…

Java SE 第二讲_原生数据类型

[b]Java SE 第二讲&#xff1a;[/b] 1. Windows: notepad, editplus, ultraedit, gvim Linux: vi, vim, gedit [colorred]2. Java中的数据类型分为两大类&#xff1a; 1&#xff09; 原生数据类型 &#xff08;Primitive Data Type&#xff09;共8种 2&#xff09; 引用类型…

Java SE 第三讲 Java原生数据类型

[sizemedium][b]Java SE 第三讲&#xff1a;[/b][/size] [colorred]1. Java中的原生数据类型共有8种&#xff1a;[/color] 1&#xff09; 整型&#xff1a;使用int表示。&#xff08;32位&#xff09; 2&#xff09; 字节型&#xff1a;使用byte表示。&#xff08;表示-128&…