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

╰半夏微凉° 2022-06-05 04:49 128阅读 0赞

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

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

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

**\[javascript\]** [view plain][] [copy][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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

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

**\[html\]** [view plain][] [copy][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

1.  **<****div** class="div1"**>**我的html内容:哈哈哈**</****div****>**
2.   alert($('.div1').html());

**\[html\]** [view plain][] [copy][view plain]

1.  还有就是 alert($('.div1').text()); 这只会获取标签中的文字内容与html（）方法的区别

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

**\[html\]** [view plain][] [copy][view plain]

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

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

**\[html\]** [view plain][] [copy][view plain]

1.  **<****input** type="checkbox" class="box" name="box" value="点我呀" checked**>**
2.   $('.box').prop('checked')

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

**\[html\]** [view plain][] [copy][view plain]

1.  $('.div').html('**<****a****>**我是一个链接**</****a****>****>**');

**\[html\]** [view plain][] [copy][view plain]

1.  $('.div').attr(\{title : '这是一个div哦'\});

**\[html\]** [view plain][] [copy][view plain]

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][view plain]

1.  $('.div1').bind('click mouseover' , **function** () \{ 
2.   alert("hello world") 
3.   \})

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

**\[javascript\]** [view plain][] [copy][view plain]

1.  $('.div1').bind('click mouseover' , **function** () \{ 
2.   alert("hello world") 
3.   $(**this**).unbind('mouseover') 
4.   \})

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

**\[javascript\]** [view plain][] [copy][view plain]

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][view plain]

1.  $('div1').click(**function** (event) \{ 
2.   event.stopPropagation(); 
3.  \})

（2）阻止页面的右键功能

**\[javascript\]** [view plain][] [copy][view plain]

1.  $('document').contextmenu(**function** (event) \{ 
2.   event.preventDefault(); 
3.   \})

（3）其实，上面的两个可以合起来写，更方便，直接在里面返回 return false ;这样就可以了

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

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

**\[javascript\]** [view plain][] [copy][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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][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][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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. 
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][view plain]

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][view plain]

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. 
23. **<****tr****>**
24. **<****td****>**籍贯**</****td****>**
25. **<****td****>**
26. 
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][view plain]

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.  
9.  **</****pre****>**

[view plain]: http://blog.csdn.net/Cs_hnu_scw/article/details/75309127?locationNum=10&fps=1#
[http_www.cnblogs.com_picaso_archive_2012_10_08_2715564.html]: http://www.cnblogs.com/picaso/archive/2012/10/08/2715564.html