jquery前端
参考https://www.leavesongs.com/HTML/begin-jquery.html
我们学习xss时,经常要用到javascript,以下介绍js的dom对象操作
javascript
1.dom结构,树形
2.访问
2.1通过getElementById()、getElementsByName()、getElementsByTagName()访问
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a id="baidu" href="http://www.baidu.com"> 百度一下</a>
<div class="shici0">安能摧眉折腰事权贵，使我不得开心颜。</div>
<!-- <div class="shici1">山重水复疑无路，柳暗花明又一村</div>
<div class="shici2">年年岁岁花相似，岁岁年年人不同</div> -->
<span name="gequ">健康歌</span>
<span name="gequ">亲亲我的宝贝</span>
<span name="gequ">青花瓷</span>
</body>
<script>
var aDiv=document.getElementsByTagName('div')
alert(aDiv[0].getAttribute("class"))
aDiv[0].setAttribute("class",'change')
</script>
</html>
上面例子看出
getElementsByTagName('div')得到的值为集合,aDiv[0].getAttribute("class")访问属性,aDiv[0].innerHTML访问值,aDiv[0].setAttribute("class",'change')修改属性值
getElementsByName('gequ')类似
getElementById说明
var x=document.getElementById("baidu")根据id访问,如果多个id="baidu",访问第一个
alert(x.id)访问属性
alert(x.innerHTML)访问值
jquery
1.一个例子,与浏览器版本有关也可能跟js有关,w3school可以实现,本地电脑无法实现
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div#exm").html("离别歌");
});
});
</script>
</head>
<body>
<button type="button">点击我</button>
<div id="exm"></div>
</body>
</html>
2.接收的概念
2.1选择器
$(xxx)xxx代表dom节点名称,如果xxx在dom有多个,第一个起作用。
<button type="button">点击我1</button>
<button type="button">点击我2</button>
2.2事件
怎么使用:$(xxx).事件(函数)
事件总结:见下文
2.3文档操作方法
3.文档操作方法
3.1修改标签内容 修改$("div#exm").html("离别歌"); 访问:var exm = $("div#exm").html();alert(exm)
3.2修改css属性 $("div#exm").css("color", "red");
3.3隐藏和显示动画效果 hide() show() toggle() $("div#exm").hide('slow');
3.4改变元素大小
3.5文本框获得、失去焦点 $(":text").val("");
4.jquery语法
4.1 选择器
|
序 |
说明 |
Jquery选择器 |
选择的元素举例 |
|
1 |
选择第一个id=xxx的元素 |
$("#main") |
<div id="main"></div> |
|
2 |
选择所有class=xxx的元素 |
$(".intro") |
<div class="intro"></div> |
|
3 |
选择所有X元素(X为标签名) |
$("h1") |
<h1></h1> |
|
4 |
选择第一个某元素 |
$("p:first") (第一个P元素) |
<p></p><p></p> |
|
5 |
选择第n个某元素 (Jquery中从0开始，css中从1开始) |
$("p:eq(1)") (第二个p元素) |
<p></p><p></p> |
|
6 |
选择tr元素下的第二个td元素 |
$("tr td:eq(1)") |
<tr><td></td><td></td></tr> |
|
7 |
选择所有带有某属性的元素 |
$("[name='user']") |
<input name="user" /> |
|
8 |
选择所有href="qq.com"的a元素 |
$("a[href='qq.com']") |
<a href="qq.com"></a> |
|
9 |
选择所有type="hidden"的<input>元素 |
$(":hidden") |
<input type="hidden" /> |
说明: 1.$("#main")多个id=main只选择第一个,可以通过$("div#main")实现查找其他的id=main的标签
2. $(".main")选择所有class=main标签,不能通过下表访问,如果要访问特定的标签,要通过$("p.main")来访问
3. $("div")访问所有div标签,不能通过下表访问,想访问特定标签需配合1,2来访问
4. $("div:first") (第一个div元素)
5. $("div:eq(1)")第二个div元素,修改1也可实现访问特定的div元素
4.2 事件
Click change focus blur load error mousemove
4.3 html操作详解
|
方法 |
例子 |
说明 |
|
html() |
var txt = $("div#main").html(); |
id=main的div元素，获取其中内容赋值给txt |
|
append() |
$("div#main").append('<br/>leavesongs.com'); |
向id=main的div元素中追加内容'<br/>leavesongs.com' |
|
prepend() |
$("div#main").prepend('leavesongs.com<br/>'); |
向id=main的div元素中，在最前端增加内容 |
|
attr() |
$("table").attr("width","500"); |
将所有table元素的属性设置为宽度等于500px |
|
val() |
var pass = $(":password").val(); |
获得密码框中的值(val()方法一般作为获取input框中内容的方法) |
|
hide() |
$("div#main").hide('slow'); |
缓慢隐藏id=main的div元素 |
|
show() |
$("div#main").show(2000); |
用2000毫秒的时间显示id=main的div元素 |
|
remove() |
$("div#main").remove(); |
移除id=main的div元素 |
Ajax
json
