第一天

为改变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软件开发工程师,学习会犯困的那种