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
今天就先到这了,我也是个初学者,以上都是在老师讲了的情况下自己跟着写的,有什么不对的地方或者建议请大胆的告诉我,大家一起共同进步,除非特殊情况今后几个月应该每天都会写点(节假日除外哈哈)。