jquery--操作html

作为一个java的高级开发，对于前台的vue，nodejs可以不精通，但是我们却不能不精通jquery，为什么，相信大家都有过这种经历了，前台人家吧界面写好了，我们写好接口了，然后互调的时候一些简单的bug只是因为我们不懂人家的框架，就告诉自己不会弄了，其实不是，再牛X的框架，他也是封装了一些jquery了，所以jquery我们是一定要学号的。

那么今天我们就来看看再jquery的一些常用的操作，尤其是对html的操作。

取值赋值

<form id="form1" class="form-horizontal">
<a class="del" href="#">删除按钮</a>    <input type="text" id="test"></br>
<a class="123" href="#">123按钮</a></br>
<a class="456" href="#">456按钮</a></br>

<p class="p1">这是第一个p标签</p></br>
<p class="p2">这是第二个p标签</p></br>
<p class="p3">这是第三个p标签</p></br>

<div class="divFather" style="background-color:yellow;width:200px,height:100px;border:1px solid black">
I'm father
<div class="child">
I'm children
</div>
</div>

</form>

对于上边的html，我们就对a标签来进行一次获取。

$("[href='#']") //所有标签属性为#的标签
$("[href]")     //所有带href标签的对象
$("[href!='#']") //标签不是#的对象

p标签的获取

$("p").text(); //获取所有p标签的属性。
$(".p1").text();  //获取类名称为p1的text内容。

p标签的赋值

$("p").text("menghaibin"); //获取所有p标签的属性。
$(".p1").text("menghaibin");  //获取类名称为p1的text内容。

其他的标签

$("#select1 option:selected").text()   //select标签获取文本
$("#select1").val()                    //取值val
$("#select1").append('<option value="menghaiibn">menghaibin</option>'); 赋值

$("input[name=myBox]").attr("checked",false||truess);   //checkBox的操作

添加和删除

添加

以p标签为例，添加有4中方式，append，prepend,after,before,append是再内部的最后添加，prepend是再之前添加，after是在外部的后边添加，before是在外部的之前添加，我们看一个小例子。

$(".p1").append('appendTop1');
$(".p1").prepend('prependTop1');
$(".p1").after('afterTop1');
$(".p1").before('beforeTop1');

像select，div这些标签都是一样的，只要他们能有父子兄弟等关系，就可以用这种方法来实现。

删除

删除方法有两种，一种是remove，一种是empty，remove是清楚该标签包含子标签，而empty是清楚子标签。

$(".divFather").empty()
$(".divFather").remove()

CSS属性设置

$(".p2,.p3").addClass("important blue");
$("p").css({"background-color":"yellow","font-size":"200%"});

小结

作为一个高级的开发，如果我们开发出接口，但是不会调界面，难道就真的吧接口扔给前台，然后前台测试半天说你少了一个属性，然后你再满满的调吗，这显然是不行的，所以我们一定要做好这些基本的准备，朝着全栈工程师前进吧。