由于在做项目维护时,经常会遇到JS语言与JQ语言混用的情况,JQ相对JS来说,代码量更少更简洁,能做到JS做不到的功能,下面我给大家分享几个简单的JQ,JS互相转换的方法。
jq转换为js
a 索引方式
var $abc = $("p"); //$abc p集合对象(jq)
var p2_obj = $abc[1];
p2_obj.style.backgroundColor = blue;
b get方法
var $abc = $("p");
var p2_obj = $abc.get(1);
p2_obj.style.backgroundColor = blue;
...
当js转换为jq时我们通常使用工厂函数
语法案例如下:
var h1_obj = document.getEll...()[0];
$(h1_obj).next().css(xxx);
如下给出了进行连续js,jq转换的例子,希望大家能够理解
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<!-- JQ库包引入至当前网页文件 -->
<script src="../js/jquery3.js">
</script>
<script type="text/javascript">
//JQ网页加载时准备数据和事件
//JQ的作用域,编辑区
$(document).ready(function(){
//1~3 js
var li_objs = document
.getElementsByTagName("li");
li_objs[0].style.backgroundColor
= "red";
li_objs[1].style.backgroundColor
= "yellow";
li_objs[2].style.backgroundColor
= "blue";
//4~6 jq方式
var li04 = li_objs[3];
$(li04).css("background-color","cyan")
.next().css("background-color","greenyellow")
.next().css("background-color","deeppink");
//7~9 js方式
var $lis = $("li");
var li07 = $lis[6];
//JS DOM HTML
li07.style = "background-color:purple;";
var li08 = $lis[7];
li08.style = "background-color:#FF00FF;";
var li09 = $lis.get(8);
li09.style = "background-color:orange;";
//10~12 jq方式
var li10 = li_objs[9];
var $vvv = $(li10);
$vvv.css("background-color","yellow")
.next().css("background-color","HotPink")
.next().css("background-color","Salmon");
$vvv.prev().prev().prev()
.css("color","orange");
});
</script>
</head>
<body>
<div>
<ol>
<li>诸葛亮之子诸元明</li>
<li>蔡文姬弟弟蔡潇</li>
<li>杨先生表弟杨先东</li>
<li>曹玉涛</li>
<li>李月华</li>
<li>王龙</li>
<li>韦小宝弟弟韦明明</li>
<li>邵鹏飞</li>
<li>陆鹏飞</li>
<li>史鹏飞</li>
<li>林峰鹏飞</li>
<li>余琴鹏飞子</li>
</ol>
</div>
</body>
</html>