一、为什么要写这篇文章
说到为什么要写这篇文章主要有以下的两个原因
1、由于公司比较忙，所以最近没有怎么写博客分享自己的学习成果了，这个对于一个喜欢写博客的人来说会感到非常的不适应，因为习惯了写博客的习惯，没有写博客好像思想上同技术上都没有进步一样，这个对于一个程序员来说是非常的不好的，所以就在自己百忙中抽出一点时间来写一些博客、梳理一下最近工作上面的一些知识点和问题的解决思路
2、最近对于前端该学习哪些内容有点迷茫，而且身体上是真心的累了，所以博客也就没有像以前一样的更新频率
3、博主本人很坚信写博客是一个很好的习惯，能够触进自己的学习进步，提高自己的技能
二、jquery上面的常见问题解决
1、比较jquery中的html()、text()和append()
首相我们先比较一下html()和text()方法，这两个方法有点类似但是有点不同，假设我们有一个列表如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>笔记测试</title> </head> <body> <ul id="ul"> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> </ul> </body> </html>
如果我们在html()和text()方法中同时对都将id="one"的节点中的内容设置为this is one那么我们来看一下怎样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>笔记测试</title> </head> <body> <ul id="ul"> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> </ul> </body> <script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script> <script> window.onload=function(){ //$("#one").html("this is one"); $("#one").text("this is one"); } </script> </html>
经过测试两段代码的运行结果是一样一样的，那么这两个的区别究竟在哪里呢？如果当我们要把id="one"的节点设置为this is one并且将字体加粗那么结果这两个的区别就显而易见了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>笔记测试</title> </head> <body> <ul id="ul"> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> </ul> </body> <script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script> <script> window.onload=function(){ //html()实现 $("#one").html("<b>this is one</b>"); //text()实现 $("#one").text("this is one"); $("#one").css("font-weight","bold"); } </script> </html>
这里不用说明已经很清楚了吧，html()这个会把括号内的内容转换成为html代码的信息添加在指定的地方上，而text()则会把括号内的内容转换成为字符串的形式。
接下来我们来说一下append方法
append方法顾名思义就是添加到后面的意思
如果还是上面的添加，我们向append中传入this is one看看会是怎么样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>笔记测试</title> </head> <body> <ul id="ul"> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> </ul> </body> <script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script> <script> window.onload=function(){ //append方法 $("#one").append("this is one"); } </script> </html>
节点1返回的结果是：1this is one，这个说明了append这个标签是会在原来的基础上添加内容的，然而html()和text()是会将指定位置上面的内容替换掉
2、比较jquery中的attr()、prop()
不知道大家有没有遇见过使用attr()这个属性出现了一些莫名其妙的状况，例如：
$("#test").click(function(){
$(this).attr("checked");
});
点击id为test的checkbox，然后这个时候将checkbox设置为勾选，但是这样写有时候出现无法生效，这个时候你可以尝试着使用prop()
当时什么时候使用attr什么时候使用prop，这个其实在官方文档中是这样写的
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
所以我们应该有写成
$("#test").click(function(){
$(this).prop("checked");
});
3、jquery的last和last-child
last()返回的是匹配的最后一个集合中的最后一个元素
$("ul li").last()
last-child返回的是每个匹配集合中的最后要给元素，换句话说也就是返回一个集合
$("ul li:last-child")
三、总结
上面的知识点是我在这个月的开发工作中遇见的一些自己不是很清楚的知识点，在这里就和大家分享一下，不喜勿喷