<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>
分享到:
相关推荐
Jquery_基础学习笔记 jquery还是要好好看看 不错的框架
Jquery的知识 pdf格式的
本CHM手册旨在帮助广大jQuery爱好者快速了解jquery库和jquery开发人员提供一份速查手册。 以上内容来自本版的原作者一揪,下面说说做这版的原因。 一直以来我都是1.1和1.2版的手册同时使用,不肯放弃1.1版的...
jQuery_1.4中文文档 jQuery基础教程 JQuery中文入门指南
【练习向】jQuery基础教程第四版章节源码——Book02_jQuery_选择元素
【练习向】jQuery基础教程第四版章节源码——Book05_jQuery_操作DOM
js_html_css_jQuery_bootstrapPDF文档基础到框架 包含了html css js jquery booststrap 从简到难,讲解详细,初学者可以看懂,满足很多想学习前端的人群
jquery入门教程,帮助大家学习web前端开发,教程清晰明了,适于学习基础。最好具有将啊vascriptde基础
与 jQuery 一样,JQM 是一个在 Internet 上直接托管、免费可用的开源代码基础。事实上,当 JQM 致力于统一和优化这个代码基时,jQuery 核心库受到了极大关注。这种关注充分说明,移动浏览器技术在极短的时间内取得了...
很实用的初学者入门教程,jQuery很小也很好用,值得学下
是一个jquery为基础的,可显示图像, divs ,或者远程页面。 它的使用简单,容易。
jQuery的基础教程。初步认识jQuery
jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记
jquery基础教程中文版2015
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨 是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装...
关于jeasyUIAPI的 CHM版本: ...所以翻译过程中,译者只能在着重准确表达原文意思的基础上力求辞藻优美,不管怎么说,实用 最重要。 限于译者的水平,文档中难免有错误疏漏之处,还望广大读者不吝斧正,不甚感激! 译
jquery-validate插件表单测试项目实例,里面包含一些基础的jquery-validate插件以及项目书写方法,上传文件方便需要时使用
jquery基础教程第四版源码,帮助学习jquery
JavaScript+jQuery 网页特效设计 jQuery(3.4.1)基础 1 jQuery简介 jQuery优势 jQuery安装 jQuery语法 1、jQuery简介 ...3、jQuery安装 “jquery-1.10.2.min.js”></script>// 需要注意下载的版本 3.1