初学jQuery就遇到了一些让人很尴尬的问题。
1.
function initRegion(){
var countries = document.getElementById("countries");//获取第一个下拉列表节点
for(var i in country)
{
countries.add(new Option(i,i),null);
}
}
定义了这么一个函数,用来当作级联中的第一级,在页面加载时进行初始化国家列表,使用js获取id元素是可以实现的,但是如果写成:
function initRegion(){
var countries = $("#countries");//获取第一个下拉列表节点
for(var i in country)
{
countries.add(new Option(i,i),null);
}
}
jQuery的形式就没有任何作用,我还想了半天到底是问什么,后来想到,使用jQuery对象时,并不能调用Dom对象的方法,添加option元素必须写成:
function initRegion(){
var countries = $("#countries");//获取第一个下拉列表节点
for(var i in country)
{
countries.append("<option>"+i+"</option>");
}
}
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/按钮样式.css"/>
</head>
<body>
<div><font color="yellow"></font></div>
<span></span>
<br />
<input type="button" class="btn" value="设置文档html" onclick="docHtml()" onmouseover="changeBtnOver(this)" onmouseout="changeBtnOut(this)"/>
<input type="button" class="btn" value="设置文档text" onclick="docText()" onmouseover="changeBtnOver(this)" onmouseout="changeBtnOut(this)"/>
<input type="button" class="btn" value="获取文档val" onclick="docVal(this)" onmouseover="changeBtnOver(this)" onmouseout="changeBtnOut(this)"/>
<input type="button" class="btn" value="设置文档attr" onclick="docAttr()" onmouseover="changeBtnOver(this)" onmouseout="changeBtnOut(this)"/>
</body>
<script src="../js/jquery-1.11.0.js"></script>
<script src="../js/按钮移入移出样式.js"></script>
<script>
function docHtml(){
$("div").html("<h1>这是一个文档.</h1>");
$("span").text("");
}
function docText(){
$("div").text("这是一个文档内容.");
$("span").text("");
}
function docVal(id){
$("div").text("");
var btn_value = $(id).val();//当前标签的value值(value值只有一个)
$("span").text(btn_value);
if (btn_value == "") {
$("span").text("value值为空值.");
}
}
function docAttr(){
$("font").attr("color","yellow");
alert("haha");
}
</script>
</html>
明明设置了黄色字体,却没有生效。
在函数docHtml()中,设置html的是div标签,而设置黄色字体的是font标签。
最后暂时写成了这样(可以修改颜色了):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/按钮样式.css"/>
</head>
<body>
<div><font></font></div>
<br />
<br />
<input type="button" class="btn" value="设置文档html" onclick="docHtml()" onmouseover="changeBtnOver(this)" onmouseout="changeBtnOut(this)"/>
<input type="button" class="btn" value="设置文档text" onclick="docText()" onmouseover="changeBtnOver(this)" onmouseout="changeBtnOut(this)"/>
<input type="button" class="btn" value="获取按钮val" onclick="docVal(this)" onmouseover="changeBtnOver(this)" onmouseout="changeBtnOut(this)"/>
<input type="button" class="btn" value="设置文档attr" onclick="docAttr()" onmouseover="changeBtnOver(this)" onmouseout="changeBtnOut(this)"/>
</body>
<script src="../js/jquery-1.11.0.js"></script>
<script src="../js/按钮移入移出样式.js"></script>
<script>
function docHtml(){
$("font").html("<h1 style='color: pink;'>这是一个文档.</h1>");
}
function docText(){
$("font").text("这是一个文档内容.");
}
function docVal(id){
var btn_value = $(id).val();//当前标签的value值(value值只有一个)
$("font").text(btn_value);
if (btn_value == "") {
$("font").text("value值为空值.");
}
}
function docAttr(){
$("font>h1").attr("style","color: blue");
}
</script>
</html>
3.使用索引获取标签元素时:
var elem = $("ul li:eq(2));//获取索引为2的元素
上述写法运行程序后识别不出来,须得写成:
var elem = $("ul li").eq(2);
4.实现点击链接不跳转,而响应某些事件时:
[不当写法]
<a href="javascript:事件()">链接文本</a>
[推荐写法]
<a href="javascript:void(0)" onclick=事件()>链接文本</a>