JavaScript+jQuery学习的的干货(一)

最新推荐文章于 2022-08-19 19:48:57 发布
最新推荐文章于 2022-08-19 19:48:57 发布
阅读量369 收藏
点赞数 1
分类专栏： javascript JavaScript知识点

下面整理了下，自己在学习这些知识中遇到的一些比较常用的知识点，所以整理了一下，当然还有很多不足的，这只是部分的知识点，我会在遇到了新的时候，再继续进行更新。欢迎大家与我共同一起学习！

1：JS中的创建对象，有如下方式：

（1）：单体模式 ，，，比如： 

[javascript]  view plain  copy
  1. var text1 = {  
  2.         name : '小明',  
  3.         age : 20,  
  4.         showname : function () {  
  5.             alert('我的名字' + this.name)  
  6.         },  
  7.         showage : function () {  
  8.             alert('我的年龄' + this.age)  
  9.         }  
  10.     }  
  11.     alert(text1.name);  
  12.     text1.showage();  
  13.     text1.showage()  

（2）：工厂模式

[javascript]  view plain  copy
  1. function Person(name , age) {  
  2.         var people = new Object();  
  3.         people.name = name;  
  4.         people.age = age;  
  5.         people.showname = function () {  
  6.             alert('名字' +  this.name)  
  7.         };  
  8.         people.showage = function () {  
  9.             alert("年龄" + this.age)  
  10.         }  
  11.     }  
  12.     var Tom = Person('tom' , 20);  
  13.     Tom.showage();  
  14.     Tom.showname();  

（3）：构造函数

[javascript]  view plain  copy
  1. function Person(name , age) {  
  2.         this.name = name;  
  3.         this.age = age;  
  4.         this.showname = function () {  
  5.             alert('名字' +  this.name)  
  6.         };  
  7.         this.showage = function () {  
  8.             alert("年龄" + this.age)  
  9.         }  
  10.     }  
  11.     var Tom = new Person('tom' , 20);  
  12.     Tom.showage();  
  13.     Tom.showname();  

（4）原型模式

[javascript]  view plain  copy
  1. function Person(name , age) {  
  2.        this.name = name;  
  3.        this.age = age;  
  4.    }  
  5.    Person.propertype.showname = function () {  
  6.        alert('我的名字' + this.name)  
  7.    }  
  8.    Person.propertype.showage = function () {  
  9.         alert('我的名字' + this.name)  
  10.    }  
  11.    var Tom = new Person('tom' , 20);  
  12.    Tom.showage();  
  13.    Tom.showname();  

2：JS中的继承（开发中，感觉用的不是很多，除非公司里面有一套要自己进行开发的模块）

[javascript]  view plain  copy
  1. function fclass(name , age ) {  
  2.         this.name = name;  
  3.         this.age = age;  
  4.     }  
  5.      fclass.propertype.showname = function () {  
  6.         alert('我的名字' + this.name)  
  7.     }  
  8.     fclass.propertype.showage = function () {  
  9.          alert('我的名字' + this.name)  
  10.     }  
  11.       
  12.     function sclass(name , age ,job) {  
  13.         fclass.call(this , name , age);  
  14.         this.job = job ;  
  15.     }  
  16.     sclass.propertype = new fclass();  
  17.     sclass.propertype.showjob = function () {  
  18.         alert('我的工作' + this.job)  
  19.     }  
  20.     var Tom = new sclass('tom' , 20 ,'工程师');  
  21.     Tom.showage();  
  22.     Tom.showname();  
  23.     Tom.showjob();  

jQuery基础知识

（1）加载的方式（三种，掌握最简单的一种即可）

[html]  view plain  copy
  1. //JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载)  
  2.             jQuery(document).ready(function(){  
  3.                 alert("李四");  
  4.             });           
  5.             //JQ不存在覆盖问题，加载的时候是顺序执行  
  6.             $(document).ready(function(){  
  7.                 alert("王五");  
  8.             });           
  9.             //简写方式  
  10.             $(function(){  
  11.                 alert("汾九");  
  12.             });  

（2）JQ对象向DOM对象转换

[html]  view plain  copy
  1. <span style="white-space:pre">  </span>//JQ对象向DOM对象转换方式一  
  2.         $("#span1").get(0).innerHTML="美美哒！";  
  3.                       
  4.     //JQ对象向DOM对象转换方式二  
  5.         $("#span1")[0].innerHTML="棒棒哒！";  
  6.                       
  7.     });  
  8. });  
  9. </script>  
  10.     </head>  
  11.     <body>  
  12.         班长：<span id="span1">你好帅！</span>  

（3）DOM对象转为JQ对象（html还是用的上面的例子）

[html]  view plain  copy
  1. //将DOM对象转换成JQ对象  
  2. $(spanEle).html("思密达");  

（4）JQ的基本选择器使用

[html]  view plain  copy
  1. <script>  
  2.             $(function(){  
  3.                 $("#btn1").click(function(){  
  4.                     $("#one").css("background-color","pink");  
  5.                 });  
  6.                   
  7.                 $("#btn2").click(function(){  
  8.                     $(".mini").css("background-color","pink");  
  9.                 });  
  10.                   
  11.                 $("#btn3").click(function(){  
  12.                     $("div").css("background-color","pink");  
  13.                 });  
  14.                   
  15.                 $("#btn4").click(function(){  
  16.                     $("*").css("background-color","pink");  
  17.                 });  
  18.                   
  19.                 $("#btn5").click(function(){  
  20.                     $("#two,.mini").css("background-color","pink");  
  21.                 });  
  22.             });  
  23.         </script>  
  24.               
  25.     </head>  
  26.     <body>  
  27.         <input type="button" id="btn1" value="选择为one的元素"/>  
  28.         <input type="button" id="btn2" value="选择样式为mini的元素"/>  
  29.         <input type="button" id="btn3" value="选择所有的div元素"/>  
  30.         <input type="button" id="btn4" value="选择所有元素"/>  
  31.         <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>  
  32.         <hr/>  
  33.         <div id="one">  
  34.             <div class="mini">  
  35.                 111  
  36.             </div>  
  37.         </div>  
  38.           
  39.         <div id="two">  
  40.             <div class="mini">  
  41.                 222  
  42.             </div>  
  43.             <div class="mini">  
  44.                 333  
  45.             </div>  
  46.         </div>  
  47.           
  48.         <div id="three">  
  49.             <div class="mini">  
  50.                 444  
  51.             </div>  
  52.             <div class="mini">  
  53.                 555  
  54.             </div>  
  55.             <div class="mini">  
  56.                 666  
  57.             </div>  
  58.         </div>  
  59.           
  60.         <span id="four">  
  61.               
  62.         </span>  

（5）JQ层级选择器的使用

[html]  view plain  copy
  1. <script type="text/javascript">  
  2.             $(function(){  
  3.                 $("#btn1").click(function(){  
  4.                     $("body div").css("background-color","gold");  
  5.                 });  
  6.                   
  7.                 $("#btn2").click(function(){  
  8.                     $("body>div").css("background-color","gold");  
  9.                 });  
  10.                   
  11.                 $("#btn3").click(function(){  
  12.                     $("#two+div").css("background-color","gold");  
  13.                 });  
  14.                   
  15.                 $("#btn4").click(function(){  
  16.                     $("#one~div").css("background-color","gold");  
  17.                 });  
  18.             });  
  19.         </script>  
  20.           
  21.           
  22.     </head>  
  23.     <body>  
  24.         <input type="button" id="btn1" value="选择body中的所有的div元素"/>  
  25.         <input type="button" id="btn2" value="选择body中的第一级的孩子"/>  
  26.         <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>  
  27.         <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>  
  28.           
  29.         <hr/>  
  30.         <div id="one">  
  31.             <div class="mini">  
  32.                 111  
  33.             </div>  
  34.         </div>  
  35.           
  36.         <div id="two">  
  37.             <div class="mini">  
  38.                 222  
  39.             </div>  
  40.             <div class="mini">  
  41.                 333  
  42.             </div>  
  43.         </div>  
  44.           
  45.         <div id="three">  
  46.             <div class="mini">  
  47.                 444  
  48.             </div>  
  49.             <div class="mini">  
  50.                 555  
  51.             </div>  
  52.             <div class="mini">  
  53.                 666  
  54.             </div>  
  55.         </div>  
  56.           
  57.         <span id="four">  
  58.               
  59.         </span>  
  60.     </body>  
对于层级选择器总结下面的结果：

 1）标签之间没有符号，则是取到前者标签元素的儿子，孙子，重孙子的相对应的标签

 2）标签之间>符号，则是取到前者符号对应的儿子标签

 3）标签之间的+符号，则是取到前者标签的同桌标签

 4）标签之间的~符号，则是取到前者的兄弟标签

（6）JQ的过滤选择器（HTML还是用的上面的内容）

[html]  view plain  copy
  1. <script>  
  2.             $(function(){  
  3.                 $("#btn1").click(function(){  
  4.                     $("body div:first").css("background-color","red");  
  5.                 });  
  6.                   
  7.                 $("#btn2").click(function(){  
  8.                     $("body div:last").css("background-color","red");  
  9.                 });  
  10.                   
  11.                 $("#btn3").click(function(){  
  12.                     $("body div:odd").css("background-color","red");  
  13.                 });  
  14.                   
  15.                 $("#btn4").click(function(){  
  16.                     $("body div:even").css("background-color","red");  
  17.                 });  
  18.             });  
  19.         </script>  
（7）属性选择器（HTML还是用的上面的）
[html]  view plain  copy
  1. <script>  
  2.             $(function(){  
  3.                 $("#btn1").click(function(){  
  4.                     $("div[id]").css("background-color","red");  
  5.                 });  
  6.                   
  7.                 $("#btn2").click(function(){  
  8.                     $("div[id='two']").css("background-color","red");  
  9.                 });  
  10.                   
  11.             });  
  12.         </script>  
  13.           
（8） 表单选择器
[html]  view plain  copy
  1. <form>  
  2.     <input type="button" value="Input Button"/>  
  3.     <input type="checkbox" />  
  4.   
  5.     <input type="file" />  
  6.     <input type="hidden" />  
  7.     <input type="image" />  
  8.   
  9.     <input type="password" />  
  10.     <input type="radio" />  
  11.     <input type="reset" />  
  12.   
  13.     <input type="submit" />  
  14.     <input type="text" />  
  15.     <select><option>Option</option></select>  
  16.   
  17.     <textarea></textarea>  
  18.     <button>Button</button>  
  19.   
  20. </form>  
要求1）查找所有的input元素      ：解析：$('：input')

2）匹配所有的单行文本框    解析：$('：text')

3）匹配所有单选按钮   解析：$('：radio')

4）匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)    解析：$(' input：checked')

5）查找所有选中的选项元素              解析：$('select option ： select'ed)

（9）JQ实现全选/全不选

3：用jQuery实现选项卡（相比用原生的js来写方便很多），要记得引用jQuery的jar

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>jQuery选项卡</title>  
  6. </head>  
  7. <style type="text/css">  
  8.     .div2 div{  
  9.         text-align: center;  
  10.         width: 500px;  
  11.         height:500px;  
  12.         display: none;  
  13.         border: 1px solid red;  
  14.         background-color: green;  
  15.         line-height: 300px;  
  16.     }  
  17.     .div2 div.active{  
  18.         display: block;  
  19.     }  
  20.     .div2{  
  21.         width: 300px;  
  22.         height:300px;  
  23.     }  
  24.     .div1 input{  
  25.         width: 100px;  
  26.         background-color:rosybrown;  
  27.     }  
  28.     .div1  input.selete{  
  29.         background-color:red;  
  30.     }  
  31. </style>  
  32. <script type="text/javascript" src="/static/MyDjango/js/jquery-1.12.4.min.js"></script>  
  33. <script type="text/javascript">  
  34.     $(function () {  
  35.         $('.div1 input').click(function () {  
  36.             $(this).addClass('selete').siblings().removeClass('selete');  
  37.             $('.div2 div').eq($(this).index()).addClass('active').siblings().removeClass('active');  
  38.         });  
  39.     })  
  40. </script>  
  41.   
  42. <body>  
  43.     <div class="div1">  
  44.         <input type="button" value="选项一" class="selete">  
  45.         <input type="button" value="选项二" >  
  46.         <input type="button" value="选项三" >  
  47.     </div>  
  48.     <div class="div2">  
  49.         <div class="active">我是内容一</div>  
  50.         <div >我是内容二</div>  
  51.         <div >我是内容三</div>  
  52.     </div>  
  53. </body>  
  54. </html>  
4:操作标签的属性

（1）：获取标签中的HTML内容：比如

[html]  view plain  copy
  1. <div class="div1">我的html内容:哈哈哈</div>  
  2.     alert($('.div1').html());  
[html]  view plain  copy
  1. 还有就是 alert($('.div1').text());  这只会获取标签中的文字内容与html（）方法的区别  

（2）：获取标签中的属性：比如

[html]  view plain  copy
  1. <div class="div1">我的html内容:哈哈哈</div>  
  2.     alert($('.div1').attr('class'));  

（3）：获取标签设置的属性（如checkbox的checked），比如 

[html]  view plain  copy
  1. <input type="checkbox" class="box" name="box" value="点我呀" checked>  
  2.     $('.box').prop('checked')  

（4）：设置标签中的属性（其实就是类似操作CSS伪类一样，通过键值对的形式），比如

[html]  view plain  copy
  1. $('.div').html('<a>我是一个链接</a>>');  
[html]  view plain  copy
  1. $('.div').attr({title : '这是一个div哦'});  
[html]  view plain  copy
  1. $('.box').prop({checked:true});  

5：jQuery的特效

比如：：fadeout()淡出  ，，fadeToggle（）却换淡入淡出 ， hide（）隐藏元素，，show（）显示元素等等。。。还有挺多的

6：jQuery的动画

例如：$('.div1').animate({width:200 , height:200},1000，'swing' , function(){      })  //参数一是要进行的变化，参数二是变化的时间，参数三是中间快，开始和结束慢，还有就是靠阳用linear，就是所有都匀速。默认是swing。。参数四是回调函数，用来动画完了的操作

7：获取标签的绝对位置：var $position = $（'.div1'）.offset()  ，，然后可以得到$position.left （左边的距离） ，$position.top（距离上边的距离）

8：（1）获取窗口可视区的高度：$(window).height()

     （2）获取页面的高度：$(document).height()

     （3）获取滚动左边距离：$(document).scrollLeft()

     （4）获取滚动顶部距离：$(document).scrollTop()

    （5）页面滚动事件：$(window).scroll(function(){   })

    （6）添加计时器：setInterval（funciton（）｛｝ ， 1000）  //第一个参数：是操作的内容，第二个参数：是执行的间隔时间

还有个方法就是setTimeout（），，功能类似

9：标签监听事件：

（1）鼠标移入（进入子元素也触发）：mouseover（）

（2）鼠标移出（移出子元素也触发）：mouseout（）

（3）鼠标移入（进入子元素不触发）：mouseenter（）

（4）鼠标移出（移出子元素不触发）：mouseleave（）

（5）点击事件：click（），同时双击还有个事件：dblclick（）

（6）消除由于多次事件发生产生的冒泡事件的处理：在调用事件前，先调用stop（）方法，即例如：

$('.div1')..mouseover(function(){   

$（this）.stop().animate({left：50});

    });

（7）元素失去焦点：blur（）

（8）元素获取到焦点时：focus（）

（9）表单元素中的值变化：change（）

（10）鼠标按下：mousedown（）

（11）鼠标松开：mouseup（）

（12）鼠标在元素内部移动：mousemove（）

（13）对应的就有键盘的按下和松开：keypress（）和keyup（）

（14）浏览器窗口大小发生变化：resize（），一般这个用于window对象中来进行

（15）用户选中文本框中的内容：select（）

（16）用户递交表单:：submit（）

（17）用户离开页面：unload（）

10：标签绑定事件的方法：

（1）用标签。事件名的一般写法

（2）将多个事件绑定到同一个标签上，这种方法适合多个事件同时绑定。例如：

[javascript]  view plain  copy
  1. $('.div1').bind('click mouseover' , function () {  
  2.         alert("hello world")  
  3.     })  

 上面实现了，同时绑定点击和鼠标进入到一个div的事件。。 如果想要接触绑定事件，则可以：

[javascript]  view plain  copy
  1. $('.div1').bind('click mouseover' , function () {  
  2.         alert("hello world")  
  3.         $(this).unbind('mouseover')  
  4.     })  

11：自定义标签事件：例子：

[javascript]  view plain  copy
  1. //绑定事件，自定义名字叫做myevent  
  2.  $('.div1').bind('myevent', function () {  
  3.      alert("自定义的事件")  
  4.  })  
  5.     //当点击其他的一个标签为div2时，则触发myevent事件,当然可以设置任何要进行触发自定义事件的标签和时机  
  6.  $('.div2').click(function () {  
  7.      $('.div1').trigger('myevent');  
  8.  })   

12：事件冒泡（很重要），这个原理就是会将子元素的事件往父元素进行传递。

（1）阻止事件冒泡：

[javascript]  view plain  copy
  1. $('div1').click(function (event) {  
  2.     event.stopPropagation();  
  3. })  
（ 2）阻止页面的右键功能
[javascript]  view plain  copy
  1. $('document').contextmenu(function (event) {  
  2.         event.preventDefault();  
  3.     })  
（3）其实，上面的两个可以合起来写，更方便，直接在里面返回 return false ;这样就可以了

13：将消息打印到浏览器中进行查看：console..log（"加消息内容"）

14：事件委托（重要），就是将需要绑定事件的子元素，通过父元素来进行实现。比如：

[javascript]  view plain  copy
  1. //实现一个序表，将li中的点击事件通过ul来实现  
  2.     //参数一：要进行委托事件的对象  
  3.     //参数二：要进行委托的事件  
  4.     //参数三：进行的操作  
  5.     $('.current').delegate('li' , 'click' , function () {  
  6.         alert($(this).html());  
  7.     })  
  8.     //html内容  
  9.     <ul class="current">  
  10.     <li><a href="#">苹果</a></li>  
  11.     <li><a href="#">梨子</a></li>  
  12.     <li><a href="#">葡萄</a></li>  
  13.     <li><a href="#">火龙果</a></li>  
  14.      </ul>  
[javascript]  view plain  copy
  1. //上面的等价于：$('.current li').click(funciton(){  操作的内容 })           效率没有上面的高  
15：jQuery元素节点的操作

（1）append（）：在当前元素内部从后面添加节点。例：$span = $('<span>我是span</span>');           $('.div1').append($span);

（2）appendTo（）：在当前元素内部从后面添加节点。例：$span.appendTo('.div1');

（3）prepend（）：在当前元素内部，从前面添加节点。

（4）prependTo（）：在当前元素内部，从前面添加节点。

（5）defore（）：插入到某元素外部前面。

（6）insertBefore（）：插入到某元素外部前面

（7）after（）：插入到某个元素的后面

（8）insertAfter（）：插入到某个元素的后面

（9）remove（）：删除元素。例：$('.div1').remove（）；

下面有个简单的例子可以帮助大家理解理解，这个在动态改变方面还是很有作用的。

[javascript]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>规划自己的计划</title>  
  6. </head>  
  7. <style type="text/css">  
  8.   
  9. .content{  
  10.     width: 400px;  
  11.     margin: 50px auto 0 ;     
  12. }  
  13.  .list{  
  14.     margin:0;  
  15.     padding:0;  
  16.     list-style:none;  
  17.     margin-top:20px;      
  18.  }  
  19.   
  20.  .list li{  
  21.     height:30px;  
  22.     line-height:30px;  
  23.     border-bottom:1px solid #ccc;     
  24.  }  
  25.  .list li span {  
  26.     margin-left: 0px;  
  27. }  
  28. .list li a{  
  29.     float:right;  
  30.     text-decoration: none;  
  31.     margin: 0 10px;  
  32. }  
  33. .addtext{  
  34.     width: 320px;  
  35.     height: 20px;  
  36.     }  
  37. </style>  
  38.   
  39. <script type="text/javascript" src ="js/jquery-1.12.4.min.js"></script>  
  40. <script type="text/javascript">  
  41.   
  42.     $(function() {  
  43.           
  44.         var $btn = $('.addbtn');  
  45.         //按钮的点击事件  
  46.         $btn.click(function(){  
  47.             //得到输入框的内容(下面这个方法只能读取，而不能进行设置值)  
  48.             var contentinput = $('#addtext').val();   
  49.             if(contentinput == ''){  
  50.                 alert('请输入内容！');  
  51.                 return;  
  52.             }  
  53.         //新增一个节点  
  54.         var $sli = $('<li><span>'+contentinput+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>')  
  55.         //将节点添加到对应的父节点中  
  56.         $sli.appendTo($('#list'));    
  57.         //添加完之后再将输入框的内容清空，方便下次添加内容  
  58.         document.getElementById('addtext').value = '';  
  59.         });  
  60.           
  61.           
  62.         //设置删除的点击事件(这样的话有个问题，就是新增的节点无法有这样的操作)  
  63.         /* 
  64.         $('.del').click(function() { 
  65.             alert("111"); 
  66.         }); 
  67.         */  
  68.         //由于上面的原因，所以要采用事件委托的方式来进行  
  69.         $('#list').delegate('a' , 'click' , function() {  
  70.             var type = $(this).attr('class');  
  71.             //判断当前要操作的类型  
  72.             if(type == 'del'){   //删除操作  
  73.                 $(this).parent().remove();  
  74.             }  
  75.             else if(type == 'up'){  //上移操作  
  76.                 //判断是否在最上面  
  77.                 if($(this).parent().prev().length == 0){  
  78.                     alert("当前已经时最上面了，不能移动了哦");  
  79.                     return ;  
  80.                 }  
  81.                 $(this).parent().insertBefore($(this).parent().prev());  
  82.             }  
  83.             else if(type == 'down'){  //下移操作  
  84.                 if($(this).parent().next().length == 0){  //得到当前标签是否还有同级的标签，如果没有则就表示时最后一个了  
  85.                     alert("当前已经时最下面了，不能移动了哦");  
  86.                     return ;  
  87.                 }  
  88.                 $(this).parent().insertAfter($(this).parent().next());  
  89.             }  
  90.         })        
  91.     })  
  92.   
  93. </script>  
  94.   
  95. <body>  
  96. <div class="content">  
  97.     <h1>To do Plan</h1>  
  98.     <input type="text" class="addtext" id="addtext">  
  99.     <input type="button" value="增加" class="addbtn" id="addbtn">  
  100.     <ul class="list" id="list">  
  101.         <li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>  
  102.     </ul>  
  103. </div>  
  104. </body>  
  105. </html>  
16：通过ajax来获取公开的jsonp接口的数据。例如：（请先掌握json格式数据和jsonp的区别）
[javascript]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>ajax学习</title>  
  6. </head>  
  7. <script type="text/javascript" src ="js/jquery-1.12.4.min.js"></script>  
  8.   
  9. <script type="text/javascript">  
  10.   
  11.     //用ajax请求公开的接口数据  
  12.     //该例子功能：通过360的一个搜索jsonp接口，然后当输入c的时候，获取360网页搜素框弹出来的内容  
  13.     $.ajax({  
  14.         url:'http://sug.so.360.cn/suggest?',     //需要请求的url链接  
  15.         type:'get',                  //请求的方式，还有post  
  16.         dataType:'jsonp',<span style="white-space:pre"> </span>  //数据类型为jsonp，这里还可以为xml，html，json都可以<span style="white-space:pre">  </span>  
  17.         data:{word:'c'}           //这是设置一下关键字  
  18.     })  
  19.     //当请求成功执行下面：  
  20.     .done(function(data) {  
  21.         //将请求到的数据显示出来,jQuery知识中的添加节点  
  22.         for(var i =0 ; i <data.s.length ; i++){  
  23.             var $li = $('<li>'+data.s[i]+'</li>');  
  24.             $li.appendTo($('.list'));  
  25.         }  
  26.     })  
  27.     //请求失败执行下面：  
  28.     .fail(function() {  
  29.         alert("fail");  
  30.     })  
  31. </script>  
  32. <body>  
  33.     <ul class="list" id="list">  
  34.     </ul>  
  35. </body>  
  36. </html>  
当使用ajax的时候，要记住引用jQuery的js文件，因为jQuery里面已经封装好了。

17：针对上面的内容，我这里在写一个简单又经常碰到的例子，就是关键字搜索框（界面简单，自己可以进行修改，关键在于知识点）

[javascript]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>ajax学习</title>  
  6. </head>  
  7. <script type="text/javascript" src ="js/jquery-1.12.4.min.js"></script>  
  8.   
  9. <script type="text/javascript">  
  10.   
  11.     //实现一个简易版的搜索框事件  
  12.     $(function () {  
  13.         $('.inputkey').keyup(function() {  
  14.             var values = $('.inputkey').val();            
  15.             //用ajax请求公开的接口数据  
  16.             //该例子功能：通过360的一个搜索jsonp接口，然后当输入c的时候，获取360网页搜素框弹出来的内容  
  17.             $.ajax({  
  18.                 url:'http://sug.so.360.cn/suggest?',  
  19.                 type:'GET',  
  20.                 dataType:'jsonp',  
  21.                 data:{ word : values}           //这是设置一下关键字  
  22.             })  
  23.             //当请求成功执行下面：  
  24.             .done(function(data) {  
  25.                 $('.list').empty();  
  26.                 //将请求到的数据显示出来,jQuery知识中的添加节点  
  27.                 for(var i =0 ; i <data.s.length ; i++){  
  28.                     var $li = $('<li>'+data.s[i]+'</li>');  
  29.                     $li.appendTo($('.list'));  
  30.                 }  
  31.             })  
  32.             //请求失败执行下面：  
  33.             .fail(function() {  
  34.                 alert("fail");  
  35.             })  
  36.         })  
  37.     })  
  38. </script>  
  39. <body>  
  40.     <input type="text" id ="inputkey" class="inputkey">  
  41.     <ul class="list" id="list">  
  42.     </ul>  
  43. </body>  
  44. </html>  
18：正则表达式的相关内容(用于表单验证和url匹配中相对较多)

（1）定义正则表达式

[javascript]  view plain  copy
  1. //第一种方法：  
  2.     var re = new RegExp('a' , 'ig');  //第一个参数：匹配的字符    参数二：匹配的要求  
  3.     //第二种方法：  
  4.     var re2 = /a/ig;  
  5.     //功能：验证是否匹配，用到test（）函数  
  6.     var str = 'abc';  
  7.     alert(re2.test(str));  

（2）常用的转义字符匹配

\d：匹配一个数字，即0-9

\D：匹配一个非数字
\w：匹配一个单词
\w:匹配一个非单词
\s:匹配一个空白符
\S:匹配一个非空白符
\b:匹配单词边界
\B:匹配非单词边界
.:匹配任一字符
\1:重复子项 

[abc1233]：匹配字符串中任意一个

[a-z0-9]：匹配其中的任意一个

{5，15}：表示为5到15位

（3）限制开头和结尾，即用^符号和$

（4）常用的函数

1：test（），，这是一种懒惰匹配

2：search（‘正则’），匹配成功，则返回正则匹配到的位置

3：match（‘正则’）：匹配成功，则返回匹配到的数组

4：replace（‘正则’ ，新的字符串）：匹配成功则进行替换，这一般可以用来过滤敏感词

19：jQuery自动生成表格中的序号（HTML+jQuery+Django）

我想这个功能应该看到过，就是当看到一个表格的时候，表格的第一列是序号，对应着就是数据的次序数了，从1---N不等，，开始碰到这个的时候，自己挺傻的，因为在查到数据后，由于数据段中是不含序号这个字段的，而且这些数据的条数都改变的，当然需要自动生成了，所以开始自己的做法是将得到的数据后，又封装到一个Bean层中，然后把Bean层的对象添加到变量再传到页面中，这样就能够在获取对象的时候用Bean中的序号字段了，这样当然就可以自动生成对应条数的数据所对应的序号了。。真是傻，后面突然就想到，怎么就不知道用jQuery来实现了，jQuery的强大就在于它能够动态控制页面中的内容啊（类似的还有aJax这个的强大用法，页面布局刷新），这不就一下就可以做到嘛，然后抱着试一下的态度，一改代码，一次性通过就达到了和之前的效果，真的绝望，后面想了想，还好至少自己知道了两种实现的方法，虽然这次是只要序号，如果以后还要加什么表格列对应要显示的内容的话，那么用Bean层封装数据再传也比较好，因为有时候这样封装对数据处理还是有很大的帮助的。下面就讲下jQuery的实现方法。（注意一下：我这后台是用python的Django框架写的，所以和JavaWeb中的JSP页面还是有区别的，如果是JSP那么直接用JSTL标签中的foreach标签就一下实现了，自带一个索引，所以注意一下）

（1）HTML代码（截取了自己页面中的部分，关键也在这里就够了）

[html]  view plain  copy
  1. <tbody class="assistantshow-table-tbody" id="assistantshow-table-tbody">  
  2.                    {% for everydata in dbinfoDatda %}  
  3.                        <tr>  
  4.                            <td></td>  
  5.                            <td>{{ everydata.assistant_number }}</td>  
  6.                            <td>{{ everydata.assistant_name }}</td>  
  7.                            <td>{{ everydata.class_number }}</td>  
  8.                            <td>  
  9.                                <a href="#" data-toggle="modal"  data-target="#modal01"><span class="glyphicon glyphicon-trash"></span>删除</a>  
  10.                                <a href="#" data-toggle="modal"  data-target="#modal02"><span class="glyphicon glyphicon-refresh"></span>更新</a>  
  11.                            </td>  
  12.                        </tr>{% endfor %}  
  13.                </tbody>  
（2）jQuery代码
[html]  view plain  copy
  1. $(function() {  
  2.   
  3.     /**  
  4.      * 自动生成显示助教信息表格中的编号（这种方法很好）  
  5.      */  
  6.     var strlength = $('#assistantshow-table-tbody tr').length;  
  7.     for(var i= 0 ; i < strlength ; i++){  
  8.         $('#assistantshow-table-tbody tr:eq('+i+') td:first').text(i+1);  
  9.     }  
  10. ｝）  
（3）OK，这样就可以实现了，因为这个是动态生成的表格的数目，所以肯定序号也是动态的啦。。想想是不是很简单呢？当然，我这也只是一种方法，相信其他的大神还有更好的办法，我是个菜鸟，在学习阶段，多多包涵。后面找到有个博客写得也类似，而且贴了图，大家有需要的可以看看。

http://www.cnblogs.com/picaso/archive/2012/10/08/2715564.html

20：原生JS实现全选/全不选

（1）HTML

<input type="checkbox" id="selectcontro" οnclick="seleteIsAll(this.checked)">全选/全不选

（2）JS代码

[html]  view plain  copy
  1. //全选和全不选的控制  
  2.     function seleteIsAll(flag) {  
  3.         var checkselecte = document.getElementsByName("addismessage");  
  4.         for(var i = 0 ;i<checkselecte.length;i++){  
  5.             checkselecte[i].checked = flag;  
  6.         }  
  7.     }  
        注解： 其中addismessage是checkbox多选框，通过名字拿的话就可以把具有相同name属性的引用都拿到，这样就方便进行处理了，记住一点，要实现全选/全不选，那么一定要满足要实现选择的内容具有相同的name属性。。否则难以实现。

方法二：通过JQ简单的实现

[html]  view plain  copy
  1. <span style="white-space:pre">  </span><script>  
  2.     $(function(){  
  3.         $("#select").click(function(){  
  4.         //获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。  
  5.         //attr方法与JQ的版本有关，在1.8.3及以下有效。  
  6.         //$("tbody input").attr("checked",this.checked);          //注意点  
  7.         $("tbody input").prop("checked",this.checked);  
  8.     });  
  9.     });  
  10.     </script>  
  11.           
  12.     </head>  
  13.     <body>  
  14.         <table border="1" width="500" height="50" align="center" id="tbl" >  
  15.             <thead>  
  16.                 <tr>  
  17.                     <td colspan="4">  
  18.                         <input type="button" value="添加" />  
  19.                         <input type="button" value="删除" />  
  20.                     </td>  
  21.                 </tr>  
  22.                 <tr>  
  23.                     <th><input type="checkbox" id="select"></th>  
  24.                     <th>编号</th>  
  25.                     <th>姓名</th>  
  26.                     <th>年龄</th>  
  27.                 </tr>  
  28.             </thead>  
  29.             <tbody>  
  30.                 <tr >  
  31.                     <td><input type="checkbox" class="selectOne"/></td>  
  32.                     <td>1</td>  
  33.                     <td>张三</td>  
  34.                     <td>22</td>  
  35.                 </tr>  
  36.                 <tr >  
  37.                     <td><input type="checkbox" class="selectOne"/></td>  
  38.                     <td>2</td>  
  39.                     <td>李四</td>  
  40.                     <td>25</td>  
  41.                 </tr>  
  42.             </tbody>  
  43.         </table>  
21：点击按钮实现添加表格的行数（jQuery实现）

（1）jQuery代码

[html]  view plain  copy
  1. //点击按钮，增加添加助教信息的表格，方便一次添加多条信息  
  2.     $('#addassistanttablenumber').click(function () {  
  3.         var $str = $('<tr>');//添加一行  
  4.         var $content = $('#tablecountid'); //得到目前table条目的个数  
  5.         $number = parseInt($content.val()) + 1;  
  6.         //拼接增加行的内容  
  7.          var content = '<td><input type="checkbox" name="addismessage" value="'+$number+'"></td> ' +  
  8.              '<td><input type="text" name="assistantNumber'+$number+'" id="assistantNumber'+$number+'"></td>' +  
  9.              '<td><input type="text" name="assistantName'+$number+'" id="assistantName'+$number+'"></td>' +  
  10.              '<td><input type="text" name="assistantClass'+$number+'" id="assistantClass'+$number+'"></td>' +  
  11.              '<td> <a href="#" data-toggle="modal"  data-target="#modal03"><span class="glyphicon glyphicon-ok"></span>添加</a> </td>';  
  12.         var $std = $str.html(content);  
  13.         $std.appendTo($('#assistantaddd-table-tbody'));  
  14.         document.getElementById('tablecountid').value = $number;  
  15.         alert("添加条目成功!");  
  16.     })  
（2）HTML代码（因为后面要实现表格内容的提交，所以需要用到form标签，如果只是单纯的增加内容，则在添加的时候不需要这样麻烦）
[html]  view plain  copy
  1. <form action="" method="post" id="addtable-form" enctype="multipart/form-data">  
  2.            <div class="table-responsive">  
  3.                {% csrf_token %}  
  4.                <input type="hidden" name="tablecount" value="1" id="tablecountid">  
  5.                <input type="hidden" id="tableinfoindex" name="tableinfoindex">  
  6.                <table class="table table-bordered assistantadd-table">  
  7.                    <thead>  
  8.                    <tr class="assistantadd-table-tr">  
  9.                        <th><input type="checkbox" id="selectcontro" onclick="seleteIsAll(this.checked)">全选/全不选</th>  
  10.                        <th>助教学号</th>  
  11.                        <th>助教姓名</th>  
  12.                        <th>助教班级</th>  
  13.                        <th>操作</th>  
  14.                    </tr>  
  15.                    </thead>  
  16.                    <tbody class="assistantadd-table-tbody" id="assistantaddd-table-tbody">  
  17.                    <tr>  
  18.                        <td><input type="checkbox" name="addismessage" value="1"></td>  
  19.                        <td><input type="text" name="assistantNumber1" id="assistantNumber1"></td>  
  20.                        <td><input type="text" name="assistantName1" id="assistantName1"></td>  
  21.                        <td><input type="text" name="assistantClass1" id="assistantClass1"></td>  
  22.                        <td>  
  23.                            <a href="#" data-toggle="modal" data-target="#modal03"><span  
  24.                                    class="glyphicon glyphicon-ok"></span>添加</a>  
  25.                        </td>  
  26.                    </tr>  
  27.                    </tbody>  
  28.                </table>  
  29.            </div>  
  30.        </form>  

 注解：这里我运用的只是一个小细节，就是在表单中用了一个隐藏的<input>，这个功能主要是用来标记有多少个表格行了，这样我才好对表格中的输入框的属性进行相应的设置，否则在表单提交过后，处理数据则不方便。当然还有其他的方法，这只是其中的一种。

22：JQ实现省市二级联动的效果

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>使用jQuery完成省市二级联动</title>  
  6.         <style type="text/css">  
  7.             .top{  
  8.                 border: 1px solid red;  
  9.                 width: 32.9%;  
  10.                 height: 50px;  
  11.                 float: left;  
  12.             }  
  13.   
  14.             #clear{  
  15.                 clear: both;  
  16.             }  
  17.             #menu{  
  18.                 border: 1px solid blue;  
  19.                 width: 99%;  
  20.                 height: 40px;  
  21.                 background-color: black;  
  22.             }  
  23.             #menu ul li{  
  24.                 display: inline;  
  25.                 color: white;  
  26.                 font-size: 19px;  
  27.             }  
  28.             #bottom{  
  29.                 text-align: center;  
  30.             }  
  31.             #contanier{  
  32.                 border: 1px solid red;  
  33.                 width: 99%;  
  34.                 height: 600px;  
  35.                 background: url(../img/regist_bg.jpg);  
  36.                 position: relative;  
  37.             }  
  38.             #content{  
  39.                 border: 5px solid gray;  
  40.                 width: 50%;  
  41.                 height: 60%;  
  42.                 position: absolute;  
  43.                 top: 100px;  
  44.                 left: 300px;  
  45.                 background-color: white;  
  46.                 padding-top: 50px;  
  47.             }  
  48.   
  49.         </style>  
  50.         <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>  
  51.         <script>  
  52.             $(function(){  
  53.                 //2.创建二维数组用于存储省份和城市  
  54.                 var cities = new Array(3);  
  55.                 cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");  
  56.                 cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");  
  57.                 cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");  
  58.                 cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");  
  59.                   
  60.                 $("#province").change(function(){  
  61.                     //10.清除第二个下拉列表的内容  
  62.                     $("#city").empty();  
  63.                       
  64.                     //1.获取用户选择的省份  
  65.                     var val = this.value;  
  66.                     //alert(val);  
  67.                     //3.遍历二维数组中的省份  
  68.                     $.each(cities,function(i,n){  
  69.                         //alert(i+":"+n);  
  70.                         //4.判断用户选择的省份和遍历的省份  
  71.                         if(val==i){  
  72.                             //5.遍历该省份下的所有城市  
  73.                             $.each(cities[i], function(j,m) {  
  74.                                 //alert(m);  
  75.                                 //6.创建城市文本节点  
  76.                                 var textNode = document.createTextNode(m);  
  77.                                 //7.创建option元素节点  
  78.                                 var opEle = document.createElement("option");  
  79.                                 //8.将城市文本节点添加到option元素节点中去  
  80.                                 $(opEle).append(textNode);  
  81.                                 //9.将option元素节点追加到第二个下拉列表中去  
  82.                                 $(opEle).appendTo($("#city"));  
  83.                             });  
  84.                         }  
  85.                     });  
  86.                       
  87.                 });  
  88.             });  
  89.         </script>  
  90.               
  91.     </head>  
  92.     <body>  
  93.   
  94.             <!--3.中间注册表单部分div-->  
  95.             <div id="contanier">  
  96.                 <div id="content">  
  97.         <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">  
  98.                         <form method="get" action="#" onsubmit="return checkForm()">  
  99.                         <tr>  
  100.                             <td colspan="2" align="center">  
  101.                                 <font size="5">会员注册</font>  
  102.                             </td>  
  103.                               
  104.                         </tr>  
  105.                         <tr>  
  106.                             <td>  
  107.                                 用户名  
  108.                             </td>  
  109.                             <td>  
  110. <input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')"   
[html]  view plain  copy
  1. onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>  
  2.                             </td>  
  3.                         </tr>  
  4.                         <tr>  
  5.                             <td>密码</td>  
  6.                             <td>  
  7. <input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')"   
[html]  view plain  copy
  1. onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>  
  2.                             </td>  
  3.                         </tr>  
  4.                         <tr>  
  5.                             <td>确认密码</td>  
  6.                             <td>  
  7.                                 <input type="password" name="repassword" />  
  8.                             </td>  
  9.                         </tr>  
  10.                         <tr>  
  11.                             <td>email</td>  
  12.                             <td>  
  13.                                 <input type="text" name="email" id="email" />  
  14.                             </td>  
  15.                         </tr>  
  16.                         <tr>  
  17.                             <td>姓名</td>  
  18.                             <td>  
  19.                                 <input type="text" name="name" />  
  20.                             </td>  
  21.                         </tr>  
  22.                         <!--1.编写HTML文件部分的内容-->  
  23.                         <tr>  
  24.                             <td>籍贯</td>  
  25.                             <td>  
  26.                                 <!--2.确定事件，通过函数传参的方式拿到改变后的城市-->  
  27.                                 <select id="province">  
  28.                                     <option>--请选择--</option>  
  29.                                     <option value="0">湖北</option>  
  30.                                     <option value="1">湖南</option>  
  31.                                     <option value="2">河北</option>  
  32.                                     <option value="3">河南</option>  
  33.                                 </select>  
  34.                                 <select id="city">  
  35.                                       
  36.                                 </select>  
  37.                             </td>  
  38.                         </tr>  
  39.                         <tr>  
  40.                             <td>性别</td>  
  41.                             <td>  
  42.                                 <input type="radio" name="sex" value="男"/>男  
  43.                                 <input type="radio" name="sex" value="女"/>女  
  44.                             </td>  
  45.                         </tr>  
  46.                         <tr>  
  47.                             <td>出生日期</td>  
  48.                             <td>  
  49.                                 <input type="text" name="birthday" />  
  50.                             </td>  
  51.                         </tr>  
  52.                         <tr>  
  53.                             <td>验证码</td>  
  54.                             <td>  
  55.                                 <input type="text" name="yanzhengma" />  
  56.                                 <img src="../img/yanzhengma.png" />  
  57.                             </td>  
  58.                         </tr>  
  59.                         <tr>  
  60.                             <td colspan="2">  
  61.                                 <input type="submit" value="注册" />                                              
  62.                             </td>  
  63.                         </tr>  
  64.                         </form>  
  65.                     </table>  
  66.                 </div>  
  67.             </div>  
  68.               
  69.         </div>  
  70.     </body>  
  71. </html>  
内容会持续更新的哦，欢迎大家共同学习交流！！！！！！！！！！
[html]  view plain  copy
  1. <p></p><pre code_snippet_id="2490820" snippet_file_name="blog_20170730_39_8057850" name="code" class="html"><pre code_snippet_id="2490820" snippet_file_name="blog_20170730_39_8057850" name="code" class="html"></pre>  
  2. <pre></pre>  
  3. <pre></pre>  
  4. <pre></pre>  
  5. <pre></pre>  
  6. <pre></pre>  
  7. <pre></pre>  
  8. <pre></pre>  
  9. <pre></pre>  
  10.      
  11. </pre>  
javascript干货分享
HuaJian_Y的博客
09-27 339
下面部分案例需要使用node 目录 下面部分案例需要使用node 1.同步与异步 2.单线程 3.process.nextTick 与 setImmediate方法 4.事件循环 5.宏任务和微任务 6.promise与async函数 1.同步与异步 同步：同步程序按顺序执行 console.log(1)console.log(2)console.log(3) 执行结果： 123 ...
JS干货--几个容易忽视的知识点
descire
11-01 386
JS中的全局变量 ---------------- 隐式声明全局变量 ---------------- 在JavaScript中全局变量会变成全局对象(浏览器中为window)的属性 一下两种方式会隐式的成为全局变量: 1、no var function add(a, b) { //result变成全局变量 result = a + b; ret
JavaScript干货
Osean_li的博客
01-17 407
JavaScript web 开发人员必须学习的 3 门语言中的一门： 1.HTML 定义了网页的内容 2.CSS 描述了网页的布局 3.JavaScript 网页的行为 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 ————————————————
JS干货--拷贝与继承
descire
11-07 570
浅拷贝与深拷贝 ------------- 浅拷贝 ------------- var obj = { name: 'name' } var a = obj; a.name = 'new name'; console.log(a.name); // 'new name' console.log(obj.name); // 'new name' 这里就是
web前端期末大作业基于html+css+javascript+jquery制作家乡主题风景网页设计与实现——张家口
QQ_____365392777的博客
08-18 655
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
javascript以及jquery的学习
coding乐园
11-17 347
/** * Created by chen on 2015/11/17. * javascript以及jquery的学习 */ var myInput = document.getElementsByName('myInput');// 获取name属性为myInput的所有元素（为UI，通常为一组UI的值） var mtInputId = document.getElementById('m
HTML期末作业 蛋糕bootstrap响应式网站html+css+javascript+jquery+bootstarp
QQ_____365392777的博客
08-11 409
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
JavaScript+jQuery日常学习(一)
qq_60142726的博客
08-19 655
JavaScript日常学习记录
JavaScript学习-jQuery
王学明
06-10 218
XMind下载链接 概述 选择器 操作DOM 事件 动画 AJAX 扩展
JavaScript之干货（一）---走进JS世界
weixin_44680403的博客
03-19 194
1.1 如何使用 在HTML中两种方式 > 一种是在body标签内末尾使用script标签 > 另一种则是<script src="index.js"><script> 1.2 在三元表达式中使用模板字符串 涉及转义符，反引号，占位符 let str = `我是${ true ? `浙江--${true ? '杭州' : '丽水'}` : `江苏-${t...
前端基本功jsday01
微信公众号：一颗向上的草莓
07-31 357
1.体验js1.1Alert弹框window.alert(“我是弹框”)；window窗口对象，一般是可以省略的。alert弹框可以在调试js代码时使用。1.2console控制台输出console.log(“输出”)控制台输出，普通输出语句。console.info(“输出”)控制台输出信息。console.warn() 控制台警示。 console.error();错误提示。 一般常用con
前端js干货
xdongll的专栏
05-11 508
前端最常用JS Jean05月05日 1. HTML5 DOM 选择器 // querySelector() 返回匹配到的第一个元素 var item = document.querySelector('.item'); console.log(item); // querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合 var items = d
JS设计模式理解干货
宝宝是个小气鬼i
03-10 276
构造函数本身就是一个函数，只不过该函数是出于创建对象的目的而定义的。 创建Object实例的两种方式:new 操作符var person = new Object(); person.name = "yehui"; person.age = 20;对象字面量var person ={ name : 'yehui', age : 20 }创建对象虽然用Object构造函数或对象字面量
原生js干货
cqj0008的博客
12-14 270
1.网站的性能优化? http越少越好 (文件合并) http越小越好 (文件压缩css,js,图片) 图片的延迟加载 使用CDN托管,理想的状态下(需要钱) 不需要的代码及时清理(比如定义的变量) 变量尽量使用局部的,少使用全局的(变量的冲突) 能使用系统的方法尽量不使用自己的方法 尽量使用正则操作字符串(速度很快) DOM操作是昂贵的,能少操作就少操作2.16毫秒是人眼最合适的
HTML期末学生大作业——基于html+css+javascript+jquery+bootstrap响应式音乐酒吧网站
HTML网页设计
08-06 732
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结......
jQuery与JavaScript入门学习（一）
zjapoi的博客
10-30 92
2018.10.1~2018.10.30完成十二章节内容，继续保持！
JS干货--Function
descire
11-02 325
函数的声明方式 ------------------ 1、采用new关键字 ------------------ var add = new Function('a, b','return a + b;'); 好像没人会这么写，各种不爽。 ----------------- 2、函数声明 ----------------- function add(a, b)
JavaScript基础培训（公司内部干货）
04-10
动态语言与动态类型语言 ECMAScript与JavaScript，JavaScript与BOM、DOM JavaScript基础语法 JavaScript对象机制、类与继承 JavaScript执行机制、作用域链和闭包 JavaScript编程建议
JavaScript精编干货
weixin_34365635的博客
01-10 295
浅析用 js 解析 xml 的方法 由于项目上需要解析 xml，于是各种百度，然后自己总结了下各个主流浏览器解析 xml 的方法，只能是很浅显的知道他的用法，但是还没有深层次的研究。 装 X - 建立自己的斗图网站库 之前加过一个斗图群，看到很多经典的表情，然后就收藏到了 QQ， 迫于本屌丝开不起某 Q 会员，就只能收藏到本地，无法在其他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值