共有回帖数 0 个
-
jquery的介绍：http://baike.baidu.com/view/1020297.htm
jquery下载：http://jquery.com/
首先我用的工具
服务器为apache 数据库为mysql
创建test.html
创建test.html
html
head
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
$("p").click(function(){
alert("你好，jquery")
});
});
/script
/head body
p点击我/p
/body
/html
script type="text/javascript" src="js/jquery.js"/script
为引用外部js脚本文件，jquery.js就是下载的js框架 js是文件名
下面为jquery基本格式
$(document).ready(function(){
里面的代码在页面加载完毕就会运行
});
还有简写模式
$(function(){
});
body这里的alert('hello');要等到页面全部加载完毕才执行，注意是全部加载，包括dom,图片等其它资源。
而
$(function(){
alert('hello');
});
当dom加载完就可以执行了。
html
head
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
$("p").click(function(){
$("p").hide();
});
});
/script
/head body
p点击我,会消失/p
/body
/html
$("p").hide();可替换为$(this).hide(); this表示当前对象，即$("p")
$("p")就是js里的document.getElementsByTagName("标签名称");
$("#p")就是document.getElementById("id名")
$(".p") 获取有class属性的对象
这3点和css的选择器很像
html
head
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
/script
/head body
p点击我们任意一个都消失/p
p点击我们任意一个都消失/p
/body
/html
html
head
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
$("#b").click(function(){
alert("你输入的值为"+ $("#a").val());
});
});
/script
/head body
请输入值： input type="text" id="a" input type="button" id="b" value="点击"
/body
/html
val()要比value给力多了
html
head
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
if($("button").html()=="隐藏")
$("button").html("显示");
else
$("button").html("隐藏");
});
});
/script
/head
body
button type="button"隐藏/button
p哈哈哈哈哈/p
/body
/html
toggle();是切换隐藏和显示 hide（）和show（）的结合
html()相当于js里的innerHTML
html
head
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
$("p").click(function(){
alert($("p").size());
alert($("p").length);
});
});
/script
/head
body p哈哈哈哈哈/p
p哈哈哈哈哈/p
p哈哈哈哈哈/p
/body
/html
size（）和length结果一样，都是3
html
head
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
$("p").click(function(){
$("body").css("background-color","red");
});
});
/script
/head body
p点击我把背景色改为红色/p
/body
/html
html
head
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
$("p").click(function(){
$("#a").load('/txt/1.txt');
});
});
/script
/head body
p点击我就从外部文件获取内容/p
div id="a"/div
/body
/html
下面一个简单的ajax操作，验证用户名是否存在 动态脚本用的php 就没连接数据库了
html
head
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
$("#user").focus(function(){
$("#msg").html("");
});
$("#user").blur(function(){
var name=$(this).val();
if(name.length==0)
{
$("#msg").css("color","red");
$("#msg").html("用户名不能为空");
}else if(!name.match(/^[w]{6,20}$/))
{
$("#msg").css("color","red");
$("#msg").html("用户名不能为汉字或少于6个字符大于20个字符");
}else
{
$.post("check.php",{Name:name},function(data){
if(data=="true")
{
$("#msg").css("color","green");
$("#msg").html("用户名可以注册");
}
else
{
$("#msg").css("color","red");
$("#msg").html("该用户已注册");
}
}); }
});
});
/script
/head
body
用户名：input type="text" id="user" name="username"/
div id="msg"/div
/body
/html
check.php的页面
?php
$name=$_REQUEST['Name'];
if($name=="jquery")
echo "false";
else
echo "true";
?
html
head
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
$("li").click(function(){
alert($('#list').text());
});
});
/script
/head
body
ul id="list"
li1/li
li2/li
li3/li
li4/li
/ul
/body
/html
text() ul里子标签li数组 返回一段字符串
html
head
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
var i=1,j=0;
$("#b").click(function(){
if(!($("#t").val()).match(/^[d]$/))
alert("只能输入数字");
else
for(;i=parseInt($("#t").val())+j;i++)
$("#input").append("文本框"+i+"：input type='text' id="+i+"/br/");
j=i-1;
});
});
/script
/head
body
请输入你要添加文本框的个数
input id="t" type="text"/ input id="b" type="button" value="ok"/
div id="input"/
/body
/html
append可以添加元素内容
加强版
html
head
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
var i=1,j=0;
$("#b").click(function(){
if(!($("#t").val()).match(/^[d]$/))
alert("只能输入数字");
else
for(;i=parseInt($("#t").val())+j;i++)
$("#input").append("div id='d"+i+"'文本框"+i+"：input type='text' id="+i+"//div");
j=i-1;
});
$("#del").click(function(){
if(!($("#tdel").val()).match(/^[d]$/))
alert("只能输入数字");
else
for(;j=i-parseInt($("#tdel").val());j--)
$("div").remove("#d"+j+"");
i=j+1;
});
$("#kong").click(function(){
$("#input").empty();
}); });
/script
/head
body
请输入你要添加文本框的个数
input id="t" type="text"/ input id="b" type="button" value="ok"/br/
请输入你要删除文本框的个数
input id="tdel" type="text"/ input id="del" type="button" value="ok"/br/
清空文本框
input id="kong" type="button" value="清空"/br/
div id="input"/
/body
/html
remove删除指定元素 empty删除指定元素**
html
head
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
$("#all").click(function(){
$("input[name='ck']").each(function(){
$(this).attr('checked',!$(this).attr('checked'));
});
});
});
/script
/head
body
p复选框的应用/p 全选/反选： input type="checkbox" id="all" /br/br/ 1: input type="checkbox" name="ck" /br/
2: input type="checkbox" name="ck" /br/
3: input type="checkbox" name="ck" /br/
4: input type="checkbox" name="ck" /br/
5: input type="checkbox" name="ck" /br/
/body
/html
each对指定元素进行遍历
attr（name）获取元素属性的值
attr（key，name）给元素的属性添加值
楼主 2016-05-06 17:23 回复
Copyright © 2010~2015 直线网 版权所有,All Rights Reserved.沪ICP备10039589号
意见反馈 |
关于直线 |
版权声明 |
会员须知
