Power Save Mode 智能联想 在file中
Ctrl+Alt+L,格式化 自动排版
ctrl+D 复制到下一行
点击“File”-> “settings” 或者 ctrl+alt+s
Webstorm预置了其他编辑器的快捷键配置,可以点击Keymap中Keymaps下拉框切换快捷键的风格配置
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
height: 200px;
background: pink;
margin-bottom: 10px;
display: none;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
//jquery min 是压缩过的版本
//区别 我们开发的时候 会用未压缩的版本 或者压缩
//项目上线的时候 要用压缩过的版本 积小成多
//2.xxx 版本不再支持IE6、7、8
//把jQuery 源文件放到项目中
//在页面中 引用jQuery
//$ 未定义 肯定是没有引用jQuery 源文件
//用jQuery之前 先引入jQuery 然后再写jQuery代码
//1、入口函数的方式
$(document).ready(function () {
$("#demo").click(function () {
$("div").show(1000).html("我哦")
})
});
//1、事件源
//js 中 document.getElementById("id");
//$("#id");
//
/*
2、事件
* js document.getElementById("id").onclick
* jQuery:$("#id").click
* 区别 jQuery的事件不带on
* 3、事件处理程序
* js document.getElementById("id").onclick = function()
* {
* //语句
* }
* jQuery:$("#id").click(function(){
* //语句
* });
*/
</script>
</head>
<body>
<input type="button" value="按钮" id="demo">
<div></div>
<div></div>
<div></div>
<div></div>
</body>
<style type="text/css">
div{
height: 200px;
background: black;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
//js 命名规范下划线 字母 $ 数字
//但是不能以数字作为开头
/*
var $ = "我是$";
jQuery 的两个变量 $和jQuery
jQuery 占用了我们两个变量 $和jQuery
*/
/*jQuery(document).ready(function () {
jQuery("#butClick").click(function () {
//语句
jQuery("div").hide();
console.log("sss");
});
});*/
/*
jQuery入口函数和js函数
js的window.onload事件是等到所有内容以及我们的外部图片之类的文件加载完后
才会执行
jQuery的入口函数 是在html所有标签都加载完后就回去执行 jQuery比较早
*/
/* window.onload = function () {
alert("#img3").width();
alert(document.getElementsByTagName("img")[2].clientWidth);
}
$(function () {
alert(document.getElementsByTagName("img")[2].clientWidth);
alert($("#img3").width());
})*/
var iQuery = function(dom){
var obj={
ready : function (func) {//指定了个属性
console.log("woshgs");
//判断一下 document.onload 有没有被赋值(或者说有没有这个事件)
//1、有:接收一下旧的函数 然后 先去调用新的函数 再调用旧的函数
//2、没有 直接赋值个onload事件
if(typeof dom.onload == "function"){//判断类型
var oldFunc = dom.onload;
dom.onload = function () {
//调用新的函数
func();
//调用旧的函数
oldFunc();
}
}else{
dom.onload = func;
}
}
};
return obj;
}
iQuery(window).ready(function(){
alert("第一次调用");
});
iQuery(window).ready(function(){
alert("第e次调用");
});
/*
js创建对象
三种方式
var ob={};
var obj1 = new Object();
var obj2 = Object.create();
1跟2区别
推荐使用第一个方式
第二种方式存在效率问题因为要new对象 会涉及到原型查找的问题
*/
var obj ={
ready: function(){
}
};
var obj1 = new Object();
obj1.ready = function () {
};
//Object.create();
</script>
</head>
<body>
<input type="button" value="du" id="butClick">
<div></div>
</body>
<script src="jquery-1.11.1.js"></script>
<script>
/*
符号 说明 用法
#id Id选择器 #id{color:red;}
.class 类选择器 .class{//}
Element 标签选择器 P{//}
* 通配符选择器 配合其他选择器来使用
, 并集选择器 div,p{}
空格 后代选择器 div span{} 选择div下面所有后代的span元素
> 子代选择器 div>span{} 仅span改变 span内部的不同于span的不变
+ 紧邻选择器 div+p 选择div紧挨着的p元素
*/
$(document).ready(function () {
//#id选择器
//js document.style.backgroundColor = ""; js 中没有横线 所以用大写替换横线
//设置被选择的元素的样式属性
//$("#b03").css("background","red");
//获取被选择元素的样式属性
/*var bg = $("#b03").css("color");
console.log(bg);*/
//$(".team").css("background","red");
//隐式迭代 自己内部循环
//$("li").css("color","red");
//jQuery的一个特点 隐式迭代
//$("*").css("font-size","25px");
//并集选择器
$(".team,div").css("background","blue");
$("#b03").css({
"color":"red",
"font-size":"22px"
});
})
/*
jQuery基本选择器
符号 说明 用法
$("#demo") 选择id为demo的第一个元素 $("#demo").css("background","red");
$(".team") 选择所有类名(样式名)为team的元素 $(".team").css("background","red");
$("div") 选择所有标签名字为div的元素 $("div").css("background","red");
$("*") 选择所有元素 少用或配合其他选择器来使用 $("*").css("background","red");
$(".team,div") 选择多个指定的元素 这个地方是选择了.team 和div元素 $(".team,div").css("background","red");
规律 $(selector).css("background","red");
*/
</script>
</head>
<body>
<!--ul>li{兄弟$}*8 按顺序生成8个 按下tab键 -->
<ul>
<li class="team">兄弟1</li>
<li>兄弟2</li>
<li id="b03">兄弟3</li>
<li class="team">兄弟4</li>
<li>兄弟5</li>
<li class="team">兄弟6</li>
<li>兄弟7</li>
<li>兄弟8</li>
</ul>
<div>
我是谁
</div>