首页 > 网站 > WEB开发 > 正文

数往知来JQuery_选择器_隐式迭代_链式编程<二十>

2024-04-27 15:01:13
字体:
来源:转载
供稿:网友

一、通过js实现页面加载完毕执行代码的方式与jquery的区别

1、通过jquery的方式可以 让多个方法被执行,而通过window.onload的方式只能执行最后一个,

因为最后一次注册的方法会把前面的方法覆盖掉

1、 window.onload需要等待页面的所有元素资源比如说img里的图片一些连接等等都下载完毕后才会触发;

2、 而jquery只要页面的标签元素都下载完毕就会触发了

二、$.map(数组,function(ele,index){})函数对数组进行遍历,遍历之后会返回一个新的数组

function()里的两个元素

--》第一个是原来数组的每一个元素,

--》元素的索引

$.each(数组/对象,function(key,val){});也是对一个数组遍历,但是不会返回新的数组,

针对键值对的数组,普通数组也可以

function()里的两个参数

--》第一个是键(索引)

--》第二个是值

在each里也可以用this,表示当前元素的值,就是val

一个小技巧:

var arryInt=[];    //现在数组的长度为0

arryInt[arryInt.length]=10;    //那么现在这句话的意思就是:给arryInt这个数组的索引为0元素赋值,

因为一开始arryInt的长度是0,所以现在这个话里的[arryInt.length]就是0

arryInt[arryInt.length]=20;   //这里是给arryint数组的索引为1的元素赋值

,因为前面已经往数组插了一个元素了,到这一句话的时候arryInt的长度就是1了,

所以依次下去就一直都是给数组的下一个元素赋值

3)tirm()函数  去空格

方法原型:var str='12253653dfdfds';

str.replace(/^[/s/xA0]+/,'').replace(/[/s/xA0]+$/,'');   //用正则表达式替换/xA0也表示空格,

全角的空格去不掉,要去掉的话要找正则表达式里表示全角空格的符号加上去

三、jquery对象转换为dom对象

-->第一种方式var domObj=jqueryObj.get[0];

---》第二种方式:var domObj=jqueryObj[0];

把DOM对象转换为

var jqueryObj=$(domObj);

DOM的方法属性只能用DOM对象使用

JQuery的方法只能用JQuery对象调用

两者不能混用,要用的话必须要转换

2)jquery里的选择器

jquery中的id选择器,表示直接获取页面上ID为dv1的DOM对象,并且返回值就是一个jquery对象

--》id选择器

  $('#dv1');

  --->标签选择器

    $('div');

$('div').text('hahahah');  //这里是获取页面上的所有div标签,给这些标签赋值,

jquery的内部已经帮我们循环了每一个标签,所以一句话就可以搞定了,这就是隐式迭代

--》类选择器

$('.cla');  //选择页面上所有应用了cla类样式的元素

-->多条件选择器:表示应用了myid 样式的元素,页面上所有的p元素,

所有的应用了cla类样式的元素的CSS样式的前景色设置为红色

$('#myid,p,.cla').css('color','red');

-->层次选择器:要注意空格

表示选中div下的所有p元素,无论是直接子元素还是后代元素

$('div p').css('color','red');

$('div > p')    div下的直接子元素,不包含后代元素

$('div + p')   选中div后面紧跟着的p元素  注意:div后紧跟着的一个元素,并且这个元素必须是p元素,

否则就不能选中了

$('div + p')   等价于  $('div').next('p')     获得div后面

$('div ~ p')    选中当前元素的紧跟着的所有的兄弟P元素

$('div ~ p')   等价于   $('div').nextAll('p')

$('div').PRev();    获得div的前一个兄弟

$('div').prevAll();    获得div前面的所有兄弟元素

$('div').siblings()   获得到除了当前div元素之后的所有前面和后面的元素

3)链式编程

$('p').text('你们都是p').css('color','red').css('border','1px solid pink').click(function(){

alert('哈哈,我又变帅了');

});

他是怎么实现的呢?

其实它每一个方法调用最后都返回了这个对象它自己   return this

--》注意:

由于prev()、nextAll()这些方法返回值已经不是当初调用该函数的的对象了,所以已经破坏了这个链了,

所以再继续链式调用的时候就不行了

要想继续链式就在链断的后面加 end()方法

--》jquery方法的一般规律,如果传递参数白哦是设置一个值,如果不传递参数表示获取一个值

--》设置元素的值是通过val()方法来设置的,当传递参数的时候,表示为元素的value赋值

--》.html()方法相当于innerText    html是设置该元素的html内容  ,

注意html返回的我是字符串而不是对象本身,所以破坏了链式编程中的链,

html后面要是链一些字符串没有的方法就不能不能链式了,

    .text()相当于innerText    text是该元素显示的文字

html()、text()这两个方法当不传递参数的时候是取值,当时隐式迭代的时候

(就是返回标签元素集合的时候)html()取的是第一个元素的值,text()取的是所有元素的值

四、JQuery的迭代(包装集)

通过$(选择器)获取到的对象,其实是个集合

var val=$('txt').val();

alert(val);    //这里即便页面上没有id为txt的元素,也不会报错,

因为jquery选择器返回的是一个集合,如果有元素则放在集合中,

如果没有元素则这个集合的长度为0,即:集合是一个空集合

当要设置多个css样式的时候,可以通过调用一次css()方法,

传递一个键值对对象进去就可以了,通过这种方式设置的是元素的“行内样式“->”在style属性中显示的样式

<stylr type='text/css'>

.c1{

border:1px solid pink;

color:red;

}

</style>

<div></div>

通过类样式来设置div的显示样式

$('div').addClass('c1');

移除一个类样式

$('div').removeClass('c1');

把一个元素的所有类样式移除

$('div').removeAttr('class')

判断是否引用了一个类样式

$('div').hasClass('c1');

五、过滤选择器

在选中的所有元素中,选中第一个p元素

$('p:first').css()

等价于

$('p').first().css()

在选中的所有元素中,选中第一个p元素

$('p:last').css()

等价于

$('p').last().css()

在选中的所有元素中,选中索引为2的元素,如果所有超出界限没有任何效果

$('p:eq(2)').css()

选中所有索引大于2的元素,不包含当前元素

$('p:gt(2)').css()

选中所有索引小于2的元素,不包含当前元素

$('p:lt(2)').css()

选中除了应用了某个(cls)类样式的所有元素

$('p:not(.cls)').css()

选中页面上所有的h标签,无论是h几

$(':header').css();

选中页面上所有的偶数的p元素

$('p:even');

选中页面上所有的位置排在奇数的p元素

$('p:odd');


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表