第一天
为改变javascript的跨浏览器不统一的问题,出现了javascript框架库,jQuery就是javascript语法写的一些函数类;是函数库;(开源的)
写的更少,做的更多;
很好的解决了不同浏览器的兼容问题
链式编程、隐式迭代、插件丰富、开源、免费。
先引入jQuery文件,再使用(引入完整的文件,可以有智能提示),它的顶级对象$
引入jQuery文件是
jQuery和$是一样的,只是一种简写而已,这里一般使用$;
匿名函数是会覆盖前面的赋值;
通过jQuery注册的页面加载事件,不会讲前面的语句覆盖掉,而是依次执行;
$(function(){执行语句});表示页面加载完要执行的代码;
$(document).ready(function(){要执行的语句});
两者的区别:
Window。Onload表示当前网页中的元素,(dom、css、图片、js等)全都下载完毕之后,才执行的代码;
$这种加载完毕,表示dom结构加载完毕就能触发的事件,所以这个更快些;
两者可以搭配使用;
$(window。Onload(function(){执行代码}));
执行的结果是:1.window事件被触发; 2.页面加载完了; 3.相当于window方法; 虽然说最后一个相当于第一个,但也只是相当于,并不是一回事 | 1.window.onload = function () { alert('window事件被触发');}; 2.$(function () { alert('页面加载完了');}); 3.$(window).load(function () { alert('相当于window方法);}); |
Map用来遍历修改数组
$.map(数组,function(ele,index){};)ele表示当前元素,index表示索引;返回值是一个数组,根据返回值确定新的数组的元素值,没有返回值就是空;
匿名函数中的参数,可以没有;
arguments[0] * 2;
对于匿名函数,不写参数就要用到arguments数组来实现对数组中的每个成员的遍历
对键值对使用map修改,返回的值是一个数组(老版本的js是不支持这个的)
$。Each(数组,function(key,val){this});
(this)相当于当前元素
这个可以遍历键值对和数组;数组中的下标就是键;
Return false相当于跳出循环,在内部,使用到了===进行完全等于判断;
Text文本、html可以设置一些字体的样式、设置属性
在不传参数的时候,就是获取值;
$(dom对象)表示将dom对象转换成jQuery对象;
在后面加上。Get(0)就可以回转,还可以是加上【0】;
$(css选择器).val.text();可以直接对这些样式进行赋值或其他操作;不用在进行转换,才进行;
一些操作;隐式迭代:
改变所有p的值;不需要进行循环赋值;
Click单击事件
This是dom中的,要进行转换才能直接使用
可以为一个对象接着写多个样式,这个就是链式编程;
链式编程,在每次调用了方法,返回值是自己,所以可以链式编程;
层次选择器 | ||
1.层次选择器,选择div下的所有的p标签: | $('div p').css('backgroundColor','blue'); | |
2.选择div下的所有p标签的直接子元素: | $('div >p').css('backgroundColor', 'blue'); | |
3.所有的直接子元素是把p变成* | ||
4.紧跟着div的p,必须是p: | $('div+p').css('backgroundColor','blue');等同于: $('div').next('p').css('backgroundColor','blue'); | |
5.表示div后面的所有的span | $('div~span').css('backgroundColor','red');等同于: $('div').nextAll('span').css('backgroundColor','red'); | |
6.div下的所有的元素 | $('div').nextAll().css('backgroundColor', 'red'); |
prevAll()属性设置的是当前所选对象的所有的前面对象;
nextAll()属性设置的是当前所选对象的所有的后面的对象;
prevAll()所返回的值不再是原来的对象,会破坏链式关系,可以使用end()属性结束当前的链式关系;
鼠标到达后,变成实心的,前面的也变成实心的,结束链接,后面的变成空心的;
jQuery选择器返回的是一个“包装集”,是一个集合,可以通过
判断是否存在元素:
对当前对象,添加类样式heig,移除类名为mei的对象的原有heig样式:
$(this).addClass('heig').siblings('.mei').removeClass('heig');
toggleClass切换样式,用于当前的样式,与指定样式之间的切换;
过滤器的使用 | |||||
所有的p元素: | $('p').css('border', '1px solid blue'); | ||||
第一个p元素 | $('p:first') | 最后一个p元素 | $('p:last') | ||
索引为1的p元素 | $('p:eq(1)') | 排除p1的所有p元素 | $('p:not(.p1)') | ||
索引为偶数的p元素 | $('p:even') | 索引为奇数的p元素 | $('p:odd') | ||
索引大于1的p元素 | $('p:gt(1)') | 索引小于2的p元素 | $('p:lt(2)') | ||
所有的h1-h6标签 | $(':header').css('color', 'red'); |
PS:一个还在苦苦学习的中高级Asp.Net软件开发工程师,学习会犯困的那种