一、通过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');
新闻热点
疑难解答