用jquery查询html元素是利用jquery的选择器实现的。
几点说明:
jQuery 选择器允许程序员对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于jquery的选择器</title>
<script src="./jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide()
})
})
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>
运行结果:
1、显示一个button和两段文字:
2、点击button后段落消失
jQuery的引用方式和其他的外部js文件一样,如下:<script type="text/javascript" src="scripts/jquery-1.5.2.min.js"></script>
因为这个js文件都是放在scripts文件夹下,所以就可以像上面那样引用到当前文件中来。但是需要注意的一点是,这个引用应该放在其他js文件的引用之前,这样其他的js文件才能使用jQuery方法。
一般而言,采用jQuery函数库的HTML文件,通常应该是这样的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>jquery 测试</title>
<meta name="keywords" content="" />
<meta name="discription" content="" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</head>
<body>
</body>
</html>
自己的js内容应该写到另一个文件中去,如上面所示,新建了一个index.js来存放自己的js内容,这样可以保证jQuery不会被误操作导致不完整,也有利于重用。
多看文档..html是操作元素innerHTML属性, 直接操作这个属性会导致元素内部所有元素的事件绑定被清除
比如
$('div').append($('<span>').html('test').click(function(){alert('Click')}))
$('div').html($('div').html())
然後span上绑定的click事件就没了
after是在元素的同级到後面添加新元素
<div id="outer">
<div id="inner"></div>
</div>
$('#inner').after('<span>')
能把一个标签替换成另一个标签的是
replaceAll和replaceWith
html并不会把<div>变成<h2>