初识JQuery

Posted 2022-01-04 f017

JQuery是对javascript的封装，简化了JS代码，是主流框架的基础(VUE,EasyUI,Bootstrap) 它是2006年推出的

JQuery的优势：
体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持

 

引入Jquery库：

<script src="js/jquery-3.4.1.js" type="text/javascript"></script>

 

JQuery加载页面触发：

<script type="text/javascript">
/*js代码*/
window.onload=function()
alert(‘js加载一‘);
;
/*jquery代码*/
$(document).ready(function()
alert(‘Jquery加载一‘);
);
jQuery(document).ready(function()
alert(‘Jquery加载二‘);
);
/*对Jquery加载上面两种方式的简写*/
$(function()
alert(‘Jquery加载三‘);
);
</script>

 

window.onload和$(document).ready区别：
window.onload只能有一个，没有简写方式，必须等待页面所有资源加载完毕之后才能触发
$(document).ready可有多个，简介为$(function()//代码)，等待页面上所有文档结构（html标签）记载完后触发

 

JQuery设置样式：

<script type="text/javascript">
/*操作样式addClass()方法*/
$(function()
//其实上就是动态的给标签加了一个class属性
/* $("#whtdiv").addClass("wht"); */
//单个设置css
/* $("#lldiv").css("color","yellow");
//设置多个
$("#lldiv").css("border":"1px solid blue","background-color":"pink");
//链式方式
$("#whtdiv").css("color","green").css("border","1px solid blue"); */

//下一个元素
$("#whtdiv").css("color","green").next().css("color","pink").next().css("color","orange");

);

</script>

 

JQuery常用方法和事件：详情请见W3C

$(function()
/*给显示图片按钮注册一个click事件*/
$("#show").click(function()
$("#imgs").slideDown(3000);
);
$("#hide").click(function()
$("#imgs").slideUp(3000);
);
);

 

----------------------------------------

$(function()
$("li").mouseover(function()
//不能用$("li")
$(this).css("color","blue");
).mouseout(function()
$(this).css("color","black");
);

); 
JQuery对象和Dom对象的相互转换：
<script type="text/javascript">
$(function()
/*js获取dom对象*/
/* var dom=document.getElementById("wht5"); */
/* alert(dom.innerHTML); */
/* alert(dom.innerText); */
/* 获取value属性值*/
/* alert(dom.value); */


/*jquery对象*/
/* var $jdom=$("#wht5"); */
/* alert(jdom.html()); */
/* alert(jdom.text()); */
/* 一般用于表单*/
/* alert($jdom.val()); */

/*Dom对象转换Jquery对象*/
var dom=document.getElementById("wht");
var $jdom=$(dom);
$jdom.html();


/*jquery转dom对象*/
var $jdom=$("#wht5");
var dom=$jdom[0];
/* var dom=$jdom.get(0); */
alert(dom.value);
); 
</script>