怎么用jquery查询html元素

html-css08

怎么用jquery查询html元素,第1张

用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>