1 <style type="text/css"> 2 #aa{ color:#F90} 3 </style> 4 5 <script src="jquery-1.11.2.min.js"></script> 6 7 </head> 8 9 <body> 10 <div id="aa" style="100px; height:100px; background-color:#63F">端口号非空</div> 11 <div class="aa"></div> 12 <span class="aa"></span> 13 14 <input name="aa" type="text" bs="1" id="cc" /> 15 16 <input type="button" value="测试" class="test" /> 17 <input type="button" value="测试1" class="test" /> 18 <input type="button" value="测试2" class="test" /> 19 <input type="button" value="测试3" class="test" /> 20 <input type="button" value="测试4" class="test" /> 21 22 </body> 23 <script type="text/javascript"> 24 25 JS 26 取元素 27 var a = document.getElementById("aa"); //DOM对象 28 var a = document.getElementsByClassName("aa"); 29 var a = document.getElementsByTagName("div"); 30 var a = document.getElementsByName("aa"); 31 32 操作内容 33 非表单元素 34 a.innerText = "ceshi"; 35 alert(a.innerText); 36 a.innerHTML = "<span style='color:red'>hello</span>"; 37 alert(a.innerHTML); 38 表单元素 39 a.value = "请输入用户名"; 40 alert(a.value); 41 42 操作属性 43 alert(a.getAttribute("bs")); //获取属性 44 a.setAttribute("test","test"); //添加属性 45 a.removeAttribute("bs"); //移除属性 46 47 操作样式 48 alert(a.style.color); //获取样式 49 a.style.color = "green"; //设置样式 50 51 52 Jquery 53 取元素 54 var a = $("#aa"); //Jquery对象 55 var a = $(".aa"); //根据class名找 56 alert(a.eq(0)); //取第几个jquery对象 57 //var a = $("div"); //根据标签名找 58 var a = $("[bs=1]"); //根据属性找 59 60 操作内容 61 非表单元素 62 a.text("hello"); 63 alert(a.text()); 64 a.html("aaa"); 65 alert(a.html()); 66 表单元素 67 a.val("aa"); 68 alert(a.val()); 69 70 操作属性 71 a.attr("test","test"); //添加属性 72 alert(a.attr("bs")); //获取属性 73 a.removeAttr("bs"); //移除属性 74 75 操作样式 76 alert(a.css("color")); //获取样式 77 a.css("background-color","red"); //设置样式 78 79 80 加事件 81 $("#cc").blur(function(){ //匿名函数 82 alert("失去焦点了"); 83 }) 84 85 事件一般有两个参数：事件源 事件数据 86 Jquery事件源不写，事件数据可写可不写 87 批量加事件 88 $(".test").click(function(e){//写个参数e获取鼠标坐标 89 alert($(this).val()); 90 alert(e.clientX);//鼠标坐标X轴 91 //alert("按钮点击了"); 92 }) 93 94 95 96 97 </script> 98 99 </html>
要使用jQuery要引用jQuery文件，在头标签中引用
<script src="jquery-1.11.2.min.js"></script> //引入jQuery文件
注意：页面同时引用多个js文件，jQuery一定是最前面
在jQuery中“$”符号是代表选择器
<script type="text/javascript">
//页面加载完成
$(document).ready(function(e) {
//页面加载完成后执行
});
</script>
jQuery的几种操作（注意和js的区别）：
1.选取元素
//JS中的找元素,DOM对象 //var a = document.getElementById("aa"); //根据id找 //alert(a); //var a = document.getElementsByClassName("aa"); //根据class名找 //alert(a[1]); //var a = document.getElementsByTagName("div"); //根据标签找 //var a = document.getElementsByName("uid"); //根据name找 //alert(a[0]);
jQuery选取元素：
<div id="aa">1111</div>
（1）根据id找
//var a = $("#aa"); //根据ID找：# //alert(a); //1.找的是jQuery对象<br> alert(a[0]); //2.找的就是id的
<div class="bb"></div>
<span class="bb"></span>
（2）根据class名找
var a = $(".bb"); //根据class名找：. //alert(a[0]); //找到的是dom对象<br>//alert(a[1]);
找到的是Jquery对象
var a = $(".bb"); alert(a.eq(0)); //1.找jQuery对象<br>alert(a.eq(0)[0]); //1.找到的就是相应的dom对象
（3）根据标签找
var a = $("div"); //根据标签名找
alert(a[1]);
<div id="aa">1111</div> <div class="bb"></div> <span class="bb"></span> <input type="text" name="cc" />
（4）根据属性找
var a = $("[name='cc']"); //1.根据属性找 var a = $("[id='aa']"); //2.根据属性找 alert(a[0]);
2.操作内容
//JS中的操作内容 //a.innerHTML //操作元素里面的html代码 //a.innerTEXT //操作元素里面的文本 //a.value //操作表单元素的值
jQuery操作内容：
<div id="aa">1111</div> <div class="bb"></div> <span class="bb"></span> <input type="text" name="cc" />
（1）非表单元素
//a.html(); //操作元素里面的HTML代码 //a.text(); //操作元素里面的文本
（2）表单元素
var a = $("[name='cc']"); //根据属性找 a.val("hello");
3.操作属性
//JS中的操作属性 //a.setAttribute("",""); //设置 //a.removeAttribute(""); //移除 //a.getAttribute(""); //获取
jQuery操作属性：
//设置属性 //a.attr("bs","test"); //获取属性 //alert(a.attr("aa")); //移除属性 //a.removeAttr("aa");
复选框
<input type="checkbox" value="1" name="aa"/>
1
2
var a = $("[name=aa]");
a.prop("checked",true); //false是不选中，true是选中
4.操作样式
//JS中的操作样式：只能操作内联样式 //a.style.backgroudColor = "red";
jQuery的操作样式：jQuery是可以操作内嵌样式
var a = $("#aa"); //根据id名找 a.css("background-color","red"); //设置css样式