jQuery--引入jq&jq简单方法

最新推荐文章于 2024-04-23 11:12:03 发布

是原来的你吗

最新推荐文章于 2024-04-23 11:12:03 发布

阅读量779

点赞数

文章标签： jquery javascript html

本文链接：https://blog.csdn.net/weixin_71792169/article/details/127758005

版权

下面用到的有关jq的方法

1 css()

2 ready()

3 click()

还有相对应的js例子

<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- jq学习开始
jq导入方式 :1本地 src jquery.js
   2外网cdn src 网址

以js和jq的不同例子来学习，他们分别有自己的也只能和自己的方法配合使用 -->


<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

</head>
<body>

<a href="#" id="a" >点击变色</a>



</body>

<script type="text/javascript">
/*点击a 变色
1 id不需要加[0]，因为只有一个
2 onclick放在最上面不加上onload就会报错 ::Uncaught TypeError: Cannot set property 'onclick' of null
所以放在最下面或者加onload   PS(前端优化 js放最下面 不堵塞前面html的解析) */

//js例子 
 /*var a = document.getElementById('a');
 a.onclick = function(){
 this.style.border = "10px orange solid";
 }

*/

// jq例子
var a = $('a');
a.css('color','yellow').click(function(){
$(this).css('border','10px solid orange');
});




// js的onload jq也有对应的
// js例子
/*window.onload = function(){
alert('abc');
 }
*/

// jq例子
$(document).ready(function(){
alert('abc');
});
// 还可简写
/*$(function(){

});*/


/*window.onload 和ready的区别

1 onload把整个页面解析后才去执行 包括图片 视频等
$(document）.ready只要把body里解析出来后就执行 不包括上面图片等，所以这个更快一点

2onload只能写一个 写多也覆盖   
ready可写多个 依次执行
*/
</script>
</html>

是原来的你吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery--引入jq&jq简单方法

点击变色
复制链接

扫一扫

jQuery--引入jq&jq简单方法

“相关推荐”对你有帮助么？