jQuery入门
程序员文章站
2022-07-14 22:57:13
...
jQuery入门和一丢丢简单快捷键
直接上代码和一部分注释
入门
<body>
<div id="div1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div id="div2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
<script>
/*var arr=[1,2,3,4];
console.log(arr.length);
console.log(arr.pop());//返回被删除的数据（末尾）
console.log(arr.push(8));//返回新数组的长度；
console.log(arr.shift());//删除数组头部元素，返回被删除元素；
console.log(arr.unshift(10));//新增数组头部元素，返回被新元素；
console.log(arr.reverse());//倒序
console.log(arr.slice(0,-1));//截取
console.log(document.getElementsByTagName("li"));返回HTML集合，是一个伪数组（有数组的属性，没有数组的方法）*/
console.log(document.querySelectorAll("#div1 li"))
</script>
解决多库冲突
<script src="../../prototype.js"></script>
<script src="../../jquery-3.1.1.js"></script>
<script>
var $j=jQuery.noConflict();
/*方法一*/
jQuery("#ccy").hide();
/*方法二*/
$j("#ccy").hide();
/*方法三*/
!function ($){
$("#ccy").hide();
}(jQuery);
**与js比较**
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<!--$(document).ready(function(){});或者$(function(){})就绪函数
js文档就绪函数和jQuery的区别：
1.执行的时机不一样
js的是等dom加载完毕，并且完全显示后执行
jquery是等dom加载完之后即可执行（执行的时机会提前）
2.js的文档就绪函数不能重复定义
jQuery的可以重复定义
3.js的没有简写方法
jQuery的简写方案为$(function(){})；
-->
</head>
<body>
<div id="div1"></div>
<button id="bu1">sf</button>
</body>
<script src="../../jquery-3.1.1.js">
/*var btn = document.getElementById("bu1");
var con = document.getElementById("div1");
btn.onclick = function(){
if(con.style.display!="none"){
con.style.display="none";
}else{
con.style.display="block";
}
}*/
</script>
<script>
/*js对象和jQuery对象是不能相互使用的*/
var div1=$("#div1");
$("#bu1").click(function(){
div1.toggle();
});
</script>
和js对象转换
<head>
<meta charset="UTF-8">
<title>js和jQuery对象的相互转换</title>
<style>
#div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div"></div>
<button id="btn">Button</button>
</body>
<script src="../../jquery-3.1.1.js"></script>
<script>
/*jquery 对象*/
var jq = $("#btn");
/*jquery转化js*/
var js = jq[0];
var js = jq.get(0);
js.onclick=function(){
};
jq.click(function(){
console.log(1);
});
var js=document.getElementById("btn");
var jsDiv=document.getElementById("div");
js.onclick=function(){
jsDiv.style.display="none";
/*js转化jquery $()jQuery对象的加工厂 $=jQuery */
var jqDiv=$(jsDiv);
jqDiv.hide();
}
</script>```
**几个简单的快捷键**
alt+上下方向键 快速移动
命名规则（驼峰命名法）：
1.所有的变量命名要有意义，看到名字就知道变量存储的数据
2.大驼峰 Person Animal Student Worker UniversityTeacher
3.小驼峰 name age height weight add show showInfo
4.全驼峰 PI ID
格式化：
ctrl alt l
ctrl shift f
代码缩进 Tab
今天就先到这了，我也是个初学者，以上都是在老师讲了的情况下自己跟着写的，有什么不对的地方或者建议请大胆的告诉我，大家一起共同进步，除非特殊情况今后几个月应该每天都会写点（节假日除外哈哈）。
上一篇： PHP 判断当前浏览器版本
下一篇： Python基础（4）循环