jQuery的引入包必须要在其他引入包的最上方,否则会出错。因为如果在页面加载完成后还未执行jQuery包,那么jQuery的引入包就没用了
如果浏览器报错:Uncaught Error: Bootstrap's JavaScript requires jQuery_...
就要注意文件引入的先后顺序,应该先引入jquery再引入bootstrap
//js或jquer y里面有数据存储的方式
//名字叫JSON
/* var json = {
code:"n001",
name:"张三",
js:{c:"p001",n:"回族"}
};
//取值 用点或者是索引
alert(json["code"]);
alert(json.js.n);
*/
//去空格
/*var str = " hello ";
str = str.trim(); //重要 非空验证的时候可以用来去空格,还可以在ajax返回值的时候去空格
alert(str.length);
*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--引入JQUERY包(要先引入jequery,再写js,否则有些功能无法实现,因为如果js在上面,加载完上面的js后并没有加载上jequery,有些功能就无法实现,,,,所以jequery要在所有的引入前面) min:压缩版--> <script src="jquery-3.1.1.min.js"></script> <style type="text/css"> #a1{ color:red; } .aa{ 100px; height:100px; background-color:#39F} </style> <title>无标题文档</title> </head> <body> <div id="a1" class="tt" style="100px; height:200px;">11</div> <div class="aa" bs="1">aaaa</div> <div class="aa" bs="2">bbbbb</div> <div class="aa" bs="3">ccccc</div> <div name="cc"></div> <div bs="1"></div> <input type="text" id="p1" /> <input type="button" id="b1" value="挂事件" /> <input type="button" id="b2" value="移除事件" /> <script type="text/javascript"> //JS //根据ID取元素,取到的是具体的元素 //var a = document.getElementById("a1"); //根据CLASS取 (取到的是数组) //var a = document.getElementsByClassName("aa"); //根据标签名取 //var a = document.getElementsByTagName("div"); //根据name取 //var a = document.getElementsByName("cc"); //alert(a); //操作元素 //操作内容 //非表单元素 只能通过ID找 //a.innerText = "hello"; 取值 //a.innerHTML = "<span style='color:red'>world</span>"; 赋值 //表单元素 赋值 取值 //a.value = "hello"; //操作属性 //a.setAttribute("bs","1"); //a.getAttribute("bs"); //a.removeAttribute("bs"); //操作样式 样式表里的样式和js里的样式不一样;js只能获取内联的 //a.style.color = red; //三个DIV隐藏 //找到后交给一个变量存起来 /*var a = document.getElementsByClassName("aa"); for(var i=0;i<a.length;i++) { a[i].style.display = "none"; }*/ //事件 在标签里面直接加 /**************************************************/ //Jquery //根据ID找元素,取到的是JQUERY对象;$是选取元素的方法 //var b = $("#a1"); //根据CLASS取 //var b = $(".aa"); //alert(b.eq(0)); //取jquery对象用eq()取元素本身用[] //根据标签名取 //var b = $("div"); //根据属性筛选 //var b = $("[name=aa]"); //操作元素 //操作内容 取值不给参数,赋值给参数 //非表单元素 //b.text(); //b.html(); //表单元素 //b.val(); //操作属性 //b.attr("bs","1"); 设置属性 //b.attr("bs"); 获取属性 //b.removeAttr("bs"); 移除属性 //操作样式 jquery还可以获取内嵌的和外部的 //alert(b.css("color")); //b.css("font-size","50px"); //alert(b[0]); //取jquery对象用eq()取元素本身用[] //隐藏三个元素 //$(".aa").css("display","none"); //Jquery【加】事件 先找元素,找到之后挂上事件; document:页面文档 匿名函数:function(e) {} 一般还是使用加 //页面加载完成之后执行的事件 "#a1" 代表事件源 e代表事件数据 $(document).ready(function(e) { /*//给a1加点击client $("#a1").click(function(){ alert('aa'); }) //给class为aa的所有元素加事件 $(".aa").click(function(){ //alert($(this).attr("bs")); $(".aa").css("background-color","#39F"); $(this).css("background-color","red"); })*/ //第二种方式【挂】事件 bind("要绑定的事件名",执行的方法) unbind("要移除的事件名") $("#b1").click(function(){ $("#a1").bind("click",function(){ alert("我是挂上的事件"); }); }) $("#b2").click(function(){ $("#a1").unbind("click"); }) }); </script> </body> </html>