summer_021
- 浏览: 58005 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
892870119：
这么基础的问题，我怎么不知道，查了半天，唉~~~~
Struts s:if 标签 判断中文 -
wnjustdoit：
给力。。。。
struts.xml向页面传参 -
summer_021：
wkshippou 写道汗！怎么去添加web应用的时候不要加上 ...
EE5 jar 冲突解决办法 -
wkshippou：
汗！怎么去
EE5 jar 冲突解决办法
<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_基础4_Ajax_JSON_XML
2011-08-12 16:30 895<script type="text/ja ... -
jQuery_基础2
2011-08-12 16:10 768if(document.getElementById(& ... -
jQuery_基础
2011-08-05 08:12 718//$:代表jquery对象 // ready方法的 ... -
Ajax_原生
2011-08-05 08:08 1021var xmlHttpRequest = null; ... -
JS学习笔记_基础篇_2
2011-08-05 08:02 856var add = function(num, num2, n ... -
JS学习笔记_基础篇
2011-08-05 07:47 1127var globe = "全局变量"; ...
相关推荐
3. 使用jQuery：现在，你可以在DW中直接编写jQuery代码。通过插入HTML元素，然后在代码视图中使用jQuery选择器和方法，例如`$("selector").action()`。DW会自动补全代码，提供提示，帮助你避免语法错误。 4. 实时...
一、jQuery Dialog基础 1. 初始化Dialog：创建Dialog的第一步是选择一个HTML元素，并通过`.dialog()`方法将其转化为对话框。例如： ```javascript $("#dialog").dialog(); ``` 这会将ID为"dialog"的元素转换为一个...
3. 查找元素：$.find()用于在当前匹配的元素集中查找后代元素，$.children()则只查找直接子元素。 4. 属性操作：$.attr()和$.removeAttr()用于获取和设置元素的属性，$.prop()则更适用于处理DOM元素的特性。 四、...
总结来说，这个压缩包包含了一份关于jQuery的学习资料，涵盖了从基础到高级的jQuery用法，特别强调了jQuery API和Ajax的使用。通过这些资源，开发者可以深入理解jQuery的工作机制，提升JavaScript编程技能，并熟练...
《jQuery Learning.zip - Jquery 基础教程_javascript 教程_jquery_web前端》 在Web前端开发领域，jQuery是一个不可或缺的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个...
Jquery的知识 pdf格式的
### jQuery 基础 - **选择器**: jQuery 的核心在于强大的选择器，它允许开发者轻松选取DOM元素。如 `$("#id")` 选择ID为"id"的元素，`$(".class")` 选择所有class为"class"的元素，`$("tag")` 选择所有特定标签的...
本CHM手册旨在帮助广大jQuery爱好者快速了解jquery库和jquery开发人员提供一份速查手册。 以上内容来自本版的原作者一揪，下面说说做这版的原因。 一直以来我都是1.1和1.2版的手册同时使用，不肯放弃1.1版的...
1. **jQuery基础**：首先，你需要理解jQuery，这是一个强大的JavaScript库，简化了DOM操作、事件处理和Ajax交互。它通过简洁的API让JavaScript编程变得简单易行。 2. **jQuery EasyUI介绍**：jQuery EasyUI 是...
除了基础的多选下拉框，`jquery_multiselect` 还可以与其他 jQuery 插件结合使用，如 DataTables、Bootstrap 等，实现更复杂的数据展示和交互。例如，可以将其应用于表格列的过滤条件，或者作为表单组件，用于用户...
总结来说，jQuery_LigerUI是构建高效用户界面的得力助手，它的全面性和实用性体现在各个组件上，而这些组件又通过jQuery的强大基础，为开发者带来便捷的开发体验。无论你是新手还是经验丰富的开发者，jQuery_LigerUI...
**jQuery插件基础** jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。jQuery插件是基于jQuery的扩展，可以增加特定的功能或行为到网页中。jQuery_Tips插件是其中一种，用于...
jQuery 1.3 在原有的 CSS 选择器基础上进行了扩展，支持更多的标准 CSS3 选择器，如 `:nth-child()`, `:nth-of-type()`, `:first-child` 和 `:last-child` 等，使得开发者能够更精确地选取页面元素。 ### 2. DOM ...
首先，jQueryAPI-100214.chm是一个官方的jQuery API帮助文档，包含了从基础选择器到高级插件的全面指南。在这个文档中，你可以找到每个jQuery方法和函数的详细说明，以及相关的示例代码，帮助你快速掌握如何使用这些...
3. 创建容器：在HTML结构中，为jQuery_ZSlide预留一个容器元素，如`<div id="zslide"></div>`。 4. 初始化插件：使用jQuery选择器找到容器元素，然后调用`.zSlide()`方法初始化插件，传入PPT文件的URL和其他配置...
jQuery选择器是其强大功能的基础，它借鉴了CSS选择器，如ID选择器(#id)，类选择器(.class)，元素选择器(element)等，同时增加了基于属性的选择器，如[attr=value]。在“jquery_box.zip”中，我们可以看到如何使用...
js_html_css_jQuery_bootstrapPDF文档基础到框架 包含了html css js jquery booststrap 从简到难,讲解详细,初学者可以看懂,满足很多想学习前端的人群
jQuery基础知识 理解`jquery_paginator`之前，首先需要了解jQuery的基本概念和用法。jQuery通过简洁的API，让JavaScript代码更加简洁易读。例如，通过`$`符号选择元素，使用`.click()`绑定点击事件，`.html()`或`....
本书首先介绍了jQuery的基础知识，包括如何在网页中引入jQuery库，以及如何使用选择器选取DOM元素。选择器是jQuery的核心功能之一，它能够帮助开发者高效地定位到网页中的特定元素，从而实现对这些元素的操作。 ...