Day01（jQuery，事件，选择器，demo置顶）
2017-10-09 本文已影响0人
AnnQi
首先，入口函数
window.onload
他有个事件覆盖的问题，比如说你的页面内有两个window.onload，那么后面一个就会覆盖前面一个；
代码的容错性差
兼容性问题多；
代码繁琐，代码量多
代码非常乱，动画效果实现困难；
这些东西，都可以通过我们的jQuery来解决掉；
jQuery
Jquery:他是javascript的一个集成库；
库：将一些常用操作进行封装成函数，供我们调用，并且不会影响我们的原生javascript，JQ的本质还是JS，终究还是在我们的JS上面进行操作的；
JQ的主旨：写的更少，做得更多；
jquery版本：3.2.1最新版，向下兼容；
它分为正常版本和压缩版本，正常版本开发使用，发布项目的时候，请使用压缩版本，减少用户的流量以及项目的体积；
使用jquery，就必须先导入，并且， 必须放在你自己的js前面；
Js入口函数：
window.onload=function(){}
Jq入口函数
jQuery(function(){});
JQuery引入进来之后，我们就要使用；
所以，我们就会有事件处理程序
1. 事件处理程序
1.1事件源
JS方式：document.getElementById(‘box’);
Jq方式：jQuery（‘#box’）;
这里开始，我们要注意，每次写jQuery特别麻烦
那么，我们有我们简略的写法:
jQuery === $
获取事件源，那么，我们JS里面，有通过ID获取，有通过类，也有通过name,标签获取，那么，在JQ里面，也有很多事件源的获取方法，我们叫做选择器；
和CSS选择器很像；
JQ改变对象CSS样式的方法：$(“#demo”).css(“background”,”red”)
Jq事件 和javascript其实没多大区别
一般就是少了一个on而已；
mouseenter事件也是鼠标移入事件
mouseover/mouseout鼠标移动到某个元素上，会被触发多次
mouseenter进入只会触发一次
$(.demo).text(...)==div.innerHTML=...
jQuery 选择器
选择器
1.id选择器：$('#lis2').css('font-size','88px');
2.class选择器：$('.lis'); //json形式
3.标签选择器：$('li');
4.组合选择器：$('#lis2,.lis');
5.通配符选择器：$('*');
改变多个属性
lis.css({
'color':'cyan',
'font-size':'80px'
});
层级选择器
1.后代选择器 用空格隔开：var lis = $('#lis-9 ul');
2.子代选择器：$('#lis-9>li');
3.下一个兄弟节点 +隔开 ，选中下一个节点：$('#lis2+li');
4.后面的所有兄弟节点： $('#lis2~li');
基本选择器
1.first 选择指定标签集合中的第一个标签：$('li:first');
2.last 选择指定标签集合的最后一个标签：$('li:last');
3.not()除了not()里面的元素，其他都选择：$('li:not(#lis2)');
4. even 选择索引为偶数的元素：var lis = $('li:even');
5.odd 选择索引为奇数的元素：var lis = $('li:odd');
6.eq 选择指定索引的元素：var lis = $('li:eq(3)');
7.gt 选择索引大于指定值得元素
//当前索引不会被选择
var lis = $('li:gt(5)');
8.lt 选择索引小于指定值的元素
//当前索引不会被选择
var lis = $('li:lt(5)');
内容选择器
1.contains 根据内容选择元素，如果内容包含的有指定的文本，就能被选择
var lis = $('li:contains(3)');
2 .empty 选择空标签，有空格、回车符号的都不是空标签
var lis = $('li:empty');
3.has 选择包含有指定标签的元素
var lis=$('li:has(ul)')
4.parent 选择所有非空的元素
//哪怕只有空格，回车，隐藏的，照样会被选择
var lis = $('li:parent');
5.hidden 选择所有被隐藏的标签
var lis = $('ul:hidden')；
6.选择所有显示状态的标签，包括空标签
var lis = $('li:visible');
属性选择器
1.选择所有具有指定属性的元素：
var lis = $('li[class]'); 只要li带有class属性，就会被选择，不论class是否相同
2、根据属性名和属性的值来选择：
var lis = $('li[class=lis-2]'); 先选中所有li，然后选择带有class的li，最后选择class为lis-2的元素
3.选择所有属性部位某个值的所有元素，没有这个属性也会被选择：
var lis = $('li[class!=lis-2]'); //只要没有class,或者class不等于lis-2，就会被选择
4.选择属性值以某个字符或者字符串开头的元素
//只要你的属性值以l开头，不管你后面是啥，都会被选择
var lis = $('li[class ^= l]');
5.选择属性值包含指定字符的所有元素
//只要你的属性值包含 - ，就会被选择，不论-在什么地方
var lis = $('li[class*=-]')
6.选择属性值以指定字符串结尾的元素
//只要你的属性值最后一个字符是3，那就选中你，不管你前面有什么东西；
var lis = $('li[class$=3]');
7.选择属性吗具有制定值的元素
var lis = $('li[class ~= lis-2]');
//和第二条的区别，第二条要求必须完全相等，多一个少一个都不行，而这个只要包含在其中就行了；
8.选择属性值以制定字符串为前缀的元素
//属性值以data-开头的属性；
var lis = $('li[ind |= data]');
9.多属性联合选择
var lis = $('li[class][id]')
//同时具有class属性和id属性的元素就会被选择
表单选择器
1.选择所有input
var ipt = $(':input');
2.选择文本输入框
var ipt = $(':text');
3.选择复选框
var ipt = $(':checked');
4.单选框
var ipt = $(':radio');
5.密码框
var ipt = $(':password');
6.提交按钮
var ipt = $(':submit');
7.普通按钮
var ipt = $(':button')
8.重置按钮
var ipt = $(':reset');
9.文件夹按钮
var ipt = $(':file');
10. 图片
var ipt = (':image');
表单属性选择器
1.选择可操作性的表单元素
var ipt = $(':enabled');
2.选择所有不可操作的表单元素
var ipt = $(':disabled');
3.选择下拉框中被选择的option
var ipt = $(':selected');
demo jQ置顶
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 150px;
height: 440px;
position: absolute;
top: 100px;
left: 0;
background: aqua;
}
.mian{
height: 4000px;
width: 10px;
}
</style>
<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$(document).scroll(function(){
var s = $(document).scrollTop();
console.log(s)
if(s>100){
$('.box').css('top',s+'px')
}
});
});
</script>
</head>
<body>
<div class="box">
</div>
<div class="mian">
</div>
</body>
</html>
