JQuery网页技术-第一天-ASP.NET

第一天

为改变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');