正文
JQuery学习二（获取元素控件并控制）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
$(’#id‘).+function;
例如：
1 <head>
2 <title>JQuery</title>
3 <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
4 <script type="text/javascript">
5 $(function () { alert($('#div1').text()); });
6 $(function () { alert($('#div1').html()); });//通过这两种函数调取的内容不一样。
7 </script>
8 </head>
9 <body bgcolor="blue">
10 <div id="div1">你好呀<font color="red">朋友</font></div>
11 </body>
12 </html>
$('#id').html();和$('#id').text()中有参数就说明是赋值，没有参数就是取值
$(dom对象)可以将dom转换成jquery对象。
Jquery函数没有封装的函数必须使用dom对象。
可以通过var domobj=jquery[0]或者var domobj=jquery.get[0]的方式将Jquery对象转换成dom对象。
1 <head>
2 <title>JQuery</title>
3 <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
4 <script type="text/javascript">
5 $(function(){
6 var div = $('#div1')[0];
7 alert(div.innerText);
8 alert(div.innerHTML);})
9 </script>
10 </head>
11 <body bgcolor="blue">
12 <div id="div1">你好呀<font color="red">朋友</font></div>
13 </body>
14 </html>
$('#id').css(“background”,"red")或者$('#id').css("background"),分别是可以用来赋值和取值
1 <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
2 <script type="text/javascript">
3 $(function () {
4 alert($(document.body).css("background-color"));
5 $(document.body).css("background", "red");
6 })
7
8 </script>
$('#id').val()有参数就是赋值，无参数就是取值
1 <head>
2 <title>JQuery</title>
3 <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
4 <script type="text/javascript">
5 $(function () { $('#text1').val(new Date()); })
6 $(function () { alert($('#text1').val()); })
7
8 </script>
9 </head>
10 <body bgcolor="blue">
11 <input type="text" id="text1" />
12 </body>
13 </html>
$('.className') $('p')$('input')等$("#id")三种主要的获取控件的方式
$("div li")获取div下面的所有li元素
$("div > li")获取仅直接在div下面的li元素
$("div + item")获取div后面的第一个item 元素
$("div~item")获取div后面的所有item元素
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery</title>
<style type="text/css">
.warning {
background-color:yellow;
}
</style>
<script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(function () { $('p').html("<font color='red'>我们都是p</font>") });
//$('p').html("<font color='red'>我们都是p</font>")这段代码不能单独执行，
//这样它会发生在<P>控件加载完毕之前，无法将下面的相应控件进行赋值
$(function () { $('p').click(function () { alert('我是p'); }) }) $(function () { $('.warning').click(function () { alert("这里有警告信息！") }) })
$(function () { $("div > p").click(function () { alert("这里是div下面的p！"); }) })
//通过$().click()可以为这一个事件赋予多个执行函数
</script>
</head>
<body bgcolor="blue">
<p></p>
<p></p>
<p></p>
<div>这里没事！</div>
<div class="warning">这是警告信息</div>
<div class="warning"></div>
<div class="warning">here</div>
<input class="warning"value="点我呀" />
<div><p>请勿触碰</p></div> </body>
</html>
