JQuery以及一个简单的表单演示

最新推荐文章于 2021-09-25 14:08:54 发布

安静点DGC

最新推荐文章于 2021-09-25 14:08:54 发布

阅读量405

点赞数

分类专栏： java 文章标签： jQuery

java 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

（1）JQuery核心函数的介绍

（1）jQuery的简单使用的方法与函数

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery类库使用演示</title>

<script type="text/javascript" src="${pageContext.request.contextPath/js/jquery.js} }" ></script>

</head>
<body>
<ul>
<li id="li1">aaaaa</li>
<li name=li2>bbbbbbbbb</li>
<li class="li3">ccccccc</li>
<li aaa="li4">dddddddddd</li>
<li >ffffffffff</li>
</ul>

<input type="button" id="btnTest" value="测试">
</body>
<script type="text/javascript">
/**
注意，在这了用了jQuery就不必再input中加上onclick事件了，如果在input中是这样写的：<input type="button" name="btnTest" value="测试">
，那么在下面的代码中的写法就是$("[name=btnTest]").click(代码);
注意：如果不是ID与class，其他属性都要用这种方式来写$("[属性名称=属性名称值]").click(代码);
**/
$("#btnTest").click(
function(){
//下面的代码是对ul中的li进行的遍历，取出值
/*
下面的代码也可以写成这样，单独对其中的某行进行取值，在这里用弹框进行输出
alert($("ul li:first").text());//表示取出第一个值
alert($("ul li:last").text());//表示取出最后一个值
*/
$("ul li").each(
function(i,v){
alert(i+":"+$(v).text());//在jQuery中获取标签的值用text（）函数
}
);

}
);
/*
获取ID属性值用这种方法：$("#ID")，
下面这个代码在鼠标点到ID值为li1的那行数据时会被触发。
*/
$("#li1").click(

function(){
//取值:$("#li1").text()
alert($("#li1").text());
//更改值,改完后
$("#li1").text("这是更改后的值");

}

);
/*
获取class属性用：$(".class值")
*/
$(".li3").click(
function(){

alert($(".li3").text());
}

);

</script>

</html>

（2）实际表单中的使用

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery类库使用演示</title>

<script type="text/javascript" src="${pageContext.request.contextPath/js/jquery.js} }" ></script>

</head>
<body>

<form action="" name="form1" >
用户名称：<input type="text" id="username" value="张三" abc="ds" ><br>
<input type="button" id="btnGetValue" value="取值">
<input type="button" id="btnHidden" value="隐藏">

</form>
<input type="button" id="btnDisplay" value="显示">

</body>
<script type="text/javascript">
$("#btnGetValue").click(
function(){
//表单控件取值用val()实现。
var v=$("#username").val();
alert(v);
//表单控件设置值也用val设置
$("#username").val("李四");
//更改属性(除了ID与class之外的属性)值
$("#username").data("abc","qw");//将abc属性的值改为qw
//更改css属性，如将鼠标移动到的地方变为手的模样，不是箭头模样
$("#username").css("cursor","pointer");
//改变背景颜色
$("#username").css("background","red");

}

);
//可以将整个表单隐藏
$("#btnHidden").click(
function(){

$("form").hide();

}

);

//可以将整个表单显示
$("#btnDisplay").click(
function(){

$("form").show();

}

);

</script>


</html>

注意：以上代码也可以写成：

$("#id值").click(function(){具体代码});

安静点DGC

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery以及一个简单的表单演示

（1）JQuery核心函数的介绍（1）jQuery的简单使用的方法与函数&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;&lt;title&gt;jQuery类库使用演示&lt;/title&gt;&lt;!-- 引入jquery类库的路
复制链接

扫一扫