对象
var obj = new Object(); 定义对象属性 1， obj.name = "张三"; obj.sex = "女"; obj.age = "18"; 2， obj['age'] = 18; var a = 'age'; obj[a] = 22; alert(obj['age']) 定义对象的方法 1， obj.sing = function(){ alert('二营长') } 2， var a = 'dance'; obj[a] = function(){ alert('你他娘的意大利炮呢'); }; obj.dance();
json 1, var 对象名 = {属性名1：属性值，属性名2：属性值2，…….} var rr = { name:'玲玲',sex:'女', dance:function(){ alert(this.name); } }; 2, function person(a,sex,age){ this.name = a; this.info =function(){ alert(this.name); } } var a = new person('翠兰') var b = new person('三炮') a.info()
数组
数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。
定义数组的方法 //对象的实例创建 var aList = new Array(1,2,3); //直接量创建 var aList2 = [1,2,3,'asd']; 操作数组中数据的方法 1、获取数组的长度：aList.length; var aList = [1,2,3,4]; alert(aList.length); // 弹出4 2、用下标操作数组的某个数据：aList[0]; var aList = [1,2,3,4]; alert(aList[0]); // 弹出1 3、push() 和 pop() 从数组最后增加成员或删除成员 var aList = [1,2,3,4]; aList.push(5); alert(aList); //弹出1,2,3,4,5 aList.pop(); alert(aList); // 弹出1,2,3,4 4、unshift()和 shift() 从数组前面增加成员或删除成员 var aList = [1,2,3,4]; aList.unshift(5); alert(aList); //弹出5,1,2,3,4 aList.shift(); alert(aList); // 弹出1,2,3,4 5、splice() 在数组中增加或删除成员 var aList = [1,2,3,4]; aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素 alert(aList); //弹出 1,2,7,8,9,4 多维数组 多维数组指的是数组的成员也是数组的数组。 var aList = [[1,2,3],['a','b','c']]; alert(aList[0][1]); //弹出2;
正则
var str = 'aaaa1q?i+cn1312w4o_#ilovem4$2enshaizi '; //转义字符 var reg = /w/; var reg = /\w/; //单个字母数字下划线 var reg = /\W/; //单个非字母数字下划线 var reg = /\d/; //单个数字 var reg = /\D/; //单个非数字 var reg = /\s/; //单个空白字符 var reg = /\S/; //单个非空白字符 //元字符串 var reg = /./; //除了换行外的任意字符 var reg = /1*/; //匹配0次或多次(看第一个字符) var reg = /q+/; //匹配至少一次或多次 var reg = /i+?/; //拒绝贪婪模式 var reg = /a{3}/; //指定匹配次数 var reg = /a{1,5}/; //指定匹配1-3次 var reg = /[a-z,A-Z,_,0-9]+/;//指定字符范围 var reg = /i(lo(v)e)m/;//子组 var reg = /cn|com|net/;//或 //开头和结尾 var reg = /^\w+\d$/; //开头除了特殊字符结尾数字 var reg = /^\w{10,20}\d$/; //开头除了特殊数字匹配10-20次数字结尾 var reg = /^\d+[a-z]+$/;//数字开头字母结尾 var reg = /^\w+@\w{2,10}\.(cn|com)$/;//匹配邮箱 // 方法 var res1 = reg.test(str);//返回布尔类型 var res2 = reg.exec(str); //按照规则探索,有则以数组形式返回,无则返回null console.log(res1); console.log(res2);
return作用
在函数中如果不写 return 或者只写return 没有返回指定值时 默认返回值 undefined; 在函数中写了return 代表当前函数要立即结束,并将结果返回 return flase 1 阻止事件冒泡 2 阻止元素的行为
JQuery
选择器
$('li') //选择所有的li元素 $('#myId') //选择id为myId的网页元素 $('.myClass') // 选择class为myClass的元素 $('input[name=username]') // 选择name属性等于username的input元素 $('#ul1 li span') //空格层级获取选择id为为ul1元素下的所有li下的span元素 $('#id,.class');//逗号并列获取 对选择集进行修饰过滤(类似CSS伪类) $('#ul1 li:first') //选择id为ul1元素下的第一个li $('#ul1 li:odd') //选择id为ul1元素下的li的奇数行 $('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li 对选择集进行函数过滤 $('div').has('p'); // 选择包含p元素的div元素 $('div').not('.myClass'); //选择class不等于myClass的div元素 $('div').filter('.myClass'); //选择class等于myClass的div元素 $('div').first(); //选择第1个div元素 $('div').eq(5); //选择第6个div元素 选择集转移 $('div').prev('p'); //选择div元素前面的第一个p元素 $('div').next('p'); //选择div元素后面的第一个p元素 $('div').children(); //选择div的所有子元素 $('div').siblings(); //选择div的同级元素 $('div').parent(); //选择div的父元素 $('#abc').parents(); //选择id为abc的所有的先辈元素 $('div').find('.myClass'); //选择div内的class等于myClass的元素
样式操作和获取操作
// 给当前的楼号加样式 其他移除 $(this).addClass('cur').siblings().removeClass('cur') // 获取div的样式 $("div").css("width"); //设置div的样式 $("div").css("width","30px"); 设置样式,多个样式 $('.as').css({border:'2px solid red',background:'#666'});
//通过标签名获取元素 document.getElementsByTagName() //$('li').css('border','2px solid #f39'); //通过标签中的属性获取元素 [] //$('li[name=y]').css('border','2px solid #f39'); //$('img[width="100%"]').css('border','2px solid #f39'); //$('img[name=logo]').css('border','2px solid #f39'); //空格 层级关系获取元素 //$('#images li').css('border','2px solid #f39'); //逗号 并列获取 //$('.w,#img').css('border','2px solid #f39'); //选择id为menu元素下的第一个li //$('#menu li:first').css('border','2px solid #f39'); /选择id为section元素下的li的奇数行 // $('#section li:odd').css('border','2px solid #f39'); // $('#section li:even').css('border','2px solid #f63'); //选择id为section元素下的第3个li 下标从0开始 // $('#section li:eq(1)').css('border','2px solid #f63'); //id为section 前面第一个div元素 //$('#footer').prev('p').css('color','#f39'); //id为section 后面第一个div元素 //$('#section').next('p').css('color','#f63'); //选择images的所有子元素 //$('#images').children().css('border','2px solid #f63'); //选择id为acc的同级元素 //$('#acc').siblings().css('border','2px solid #f39'); //选择id为acc的父级元素 //$('#acc').parent().css('border','2px solid #f63'); //选择id为acc的所有的先辈元素 //$('#acc').parents().css('border','2px solid #f39'); //选择id为acc的先辈元素中 id为all的元素 //$('#acc').parents('#all').css('border','2px solid #f63'); //选择id为images下的id为acc元素 var c = $('#images').find('#acc'); console.log(c)
类名操作
操作样式类名 $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2 $("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式 $("#div1").removeClass("divClass divClass2") //移除多个样式 $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
文本操作
$('#as').html('<span style="color:red">11</span>') 可以执行的样式操作 $('#as').text('<span style="color:blue">22</span>') 取出或添加文本内容 var r = $('#as').html(); var b = $('#as').text();
属性操作
属性操作 1、attr() 取出或设置某个属性的值 // 取出图片的地址 var $src = $('#img1').attr('src'); $("input[name='sex'][value='{{user.sex}}']").attr("checked", true); 选择框尾name时sex,值为当前选项的添加默认选项 // 设置图片的地址和alt属性 $('#img1').attr({ src: "test.jpg", alt: "Test Image" }); //也可以用户设置class属性 $('#abc').attr('class','all') //也可以自定义 属性 $('#abc').attr('love','iloveyou') 2、removeattr()删除属性 $('#abc').removeattr('class') $('#abc').removeattr('love') 3 toggleClass() 如果存在,则移除,如果不存在.则添加 $('#as').toggleClass('myclass');
获取尺寸操作
1 获取元素距离文档偏移量 //var innero = $('.inner').offset(); var innerTo = $('.inner').offset().top 2 获取当前元素相对于父级元素的偏移量 //var innerp = $('.inner').position(); 3 获取文档滚动的距离 var wt = $(window).scrollTop(); 4 快速获取元素的宽高 // var w = $('.inner').width(); // var h = $('.inner').height(); 5 设置元素的宽高 // var w = $('.inner').width(200); // var h = $('.inner').height(100); 6 获取可视区域的宽高 // var ww = $(window).width(); // var wh = $(window).height(); 7 获取整个文档的宽高 var dw = $(document).width(); var dh = $(document).height();
事件
方法绑定 1 click 2 bind 方法绑定 bind('dblclick',function(){ 3 live 动态方法绑定 live('click',function(){ 4 trigger 自动触发 $('#move').trigger('click'); 5 解除事件绑定 $('#move').die('click') 解除动态绑定 $('#move').unbind() 单击事件 click 双击事件 dblclick 鼠标抬起 mouseup 鼠标按下 mousedown 鼠标右键 oncontextmenu window.oncontextmenu = function(){ alert(2);} 鼠标移入 mouseover 鼠标移出 mouseout 鼠标移动查看位置: $('.move').mousemove(function(e){ // 鼠标相对于浏览器的窗口 var x = e.clientX; var y = e.clientY; // 鼠标相对于文档的窗口 // var x = e.pageX; // var y = e.pageY; console.log(x,y) }) 键盘按下 keydown 键盘抬起 keyup //获取按键信息 function里一般传入参数 e var k = e.keyCode; 获取焦点事件 focus 丧失焦点事件 blur 改变值之后的事件 change 文档滚动事件,当文档发动滚动时触发的事件 $(window).scroll(InitScroll); 网页加载事件 window.onload = function(){}
节点操作
创建节点 var $div = $('<div>'); 在元素内部尾部添加 append 在元素内部头部添加 prepend 在元素外部头部添加 before 在元素外部尾部添加 after 删除 remove 清空 empty 克隆 clone 弹出一个询问框,带有取消和确定按钮,返回布尔类型 var res = confirm('您确定要删除这个元素码?');
效果
!所有的效果后面都可以加时间. $('#move').show(2000); //显示 $('#move').slideDown();//滑动显示 $('#move').fadeIn();//渐变 $('#move').hide(2000);//隐藏 $('#move').slideUp;//滑动隐藏 $('#move').fadeOut();//渐变 $('#move').toggle(2000);//隐藏和显示切换 $('#move').slideToggle(2000);//滑动隐藏和显示切换 $('#move').fadeToggle(2000);//渐变隐藏和显示切换 自定义动画 $('#move').animate({ width:'300px',height:'400px', top:'100px',left:'100px', borderRadius:'50%' },3000) $('#move').stop(); 暂停动画效果 // 延时执行自定义动画 (delay 延时多长时间 ) $('#move').delay(1000).animate({ width:'300px',height:'400px', top:'100px',left:'100px', borderRadius:'50%', },4000) // 绑定文档滚动事件 $(window).scroll(function(){ // 获取整个文档的高度 var dH = $(document).height(); // 获取可视区域的高度 var cH = $(window).height; // 获取文档的滚动距离 var dT = $(window).scrollTop(); // 判断 是否触底 if(dT == dH-cH){ requestGoods(); } })
json
json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。 javascript对象字面量： var tom = { name:'tom', age:18 } json格式的数据： { "name":'tom', "age":18 } 与json对象不同的是，json数据格式的属性名称需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。 json的另外一个数据格式是数组，和javascript中的数组字面量相同。 ['tom',18,'programmer']
ajax 异步和同步
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 通过 HTTP 请求加载远程数据 jQuery 底层对 AJAX 实现进行了封装.使得我们在进行ajax操作时,不必像原生js中那么复杂 $.get, $.post, $.ajax() 返回其创建的 XMLHttpRequest 对象。多数情况下我们不需要去操作返回的对象 /发送ajax请求 1.url 2.可选 发送get请求时携带的参数 ,3,可选 回调函数,请求完之后做什么事 4,可选,返回的数据类型 json $.get(url,{携带的参数},function(data){},'json'); $.post(url,{携带的参数},function(data){},'json'); $.ajax({ url:'/cgi-bin/1.py', 当前请求的url地址 type:'post', 当前请求的方式 get post data:{name:'fei'}, 请求时携带的参数 dataType:'json', 返回的数据类型 success:function(data){ 请求成功后执行的代码 alert('请求成功') }, error:function(){ 请求失败后执行的代码 alert('请求错误') }, timeout:2000, 毫秒 设置当前请求的超时时间,必须异步 async:false ture异步, flase 同步 })
ajax异步 同步 //设置ajax的全局配置 async:false 设置当前请求为同步 $.ajaxSetup({ async:false }) 关于ajax中 异步 和 同步 ajax默认就是异步请求, async (默认: true) 默认设置下，所有请求均为异步请求。 如果需要发送同步请求，请将此选项设置为 false。 同步请求,就发ajax请求发出去后必须等待ajax的结果返回后才能继续往下执行 一般情况下都使用异步操作就可以,除非有特殊情况,必须等ajax的结果回来后才能做处理的,就用同步
注意 1.ajax是无刷新请求服务器,所以我们在浏览器中是感觉不到,也看不到ajax的具体请求和执行情况的., 因此我们需要借助浏览器的调试工具 (F12打开) 进行查看 2.ajax的请求是基础HTTP协议的,就要求你当前打开这个带有ajax的html时必须使用http协议 3.ajax要求同源策略 http://127.0.0.1:8000/cgi-bin/1.py 即: 协议(http https) 域名或IP 以及端口(80 443 8000 8080 ...)都必须一致 4.关于返回的数据类型 在get() post() ajax() 都可以设置返回的数据类型 'json' 如果要求返回json格式数据,那么就必须返回json,如果不正确, 在get和post方法将拿不到data中返回的数据,在ajax方法中则会进去error方法 5.在python中返回json格式数据, 引入 json模块 json.dumps(数据) 使用json_dumps方法进行json格式的编码转换 6.在使用ajax方法时.会创建一个对象 XMLHttpRequest 那么在ajax的方法中使用的 $(this) 就代表 ajax的对象 $(this) 永远代表一个对象,没有指明对象时 代表的时window对象, 在它有对象时 代表的就是当前的这个对象
ajax注意
在ajax使用$(this)时,一定要用变量接受 var uid=$(this).parents('tr').find('td:first').text() var btn = $(this)
Bootstrap
head格式(注意:js需要改名) <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="./public/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="./public/js/jquery-1.12.4.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="./public/js/bootstrap.min.js"></script>
商城统计
window.onload=function(){ var x = document.getElementsByName('xiaoji'); ##小计的name var num = 0; for (var i = x.length - 1; i >= 0; i--) { console.log($(x[i]).text()); num = num + parseInt($(x[i]).text()); }; console.log(num); $('.zj').html(num); }
