摘要: 记录jquery所学的点点滴滴
学前端也有一段时间了,都说搞IT的最好能写博客,我理解的意思是权当自己学习记录了,当笔记用。
jQuery总结点代码,都是最基础的,但是为了记录还是写出来加深理解吧
-
jQuery对象转化成DOM对象:
var $div = $('div') //jQuery对象 var div = $div.get(0) //通过get方法,转化成DOM对象 div.style.color = 'red' //操作dom对象的属性
var i=$(div);//定义一个变量i,因为jQuery是一个数组对象,所以i是一个数组 var x=i[0];//定义变量x,为i数组的第一个元素 x.style.color("red");//将z的颜色设置为红色
经过自己理解,改变变量名后其实就是下面的代码,其实在jQuery变量前加$符号是有必要的,以便与其他变量区分。
-
DOM对象转化成jQuery对象
var div = document.getElementsByTagName('div'); //dom对象 var $div = $(div); //jQuery对象 var $first = $div.first(); //找到第一个div元素 $first.css('color', 'red'); //给第一个元素设置颜色
var i=document.getByTagName("div");//定义i为dom对象 var z=$(i);//定义z为jQuery对象 var x=z.first();//找到第一个div元素 x.css("color","red");//给第一个元素设置颜色
后面又继续学习选择器,比如$('#id');$('.class');$('p');$('*');,分别是id选择器,类选择器,p(元素)选择器和全选择器,对应JS中的代码是
-
层级选择器
其他选择器都比较好理解,将层级选择器单独拿出来,层级选择器又包括下列几种选择器
子选择器 后代选择器 兄弟选择器 相邻选择器
$('div > p')//div下的第一个P元素
$('div p')//div下的所有P元素
$(".prev + div")//.prev 选择器所在元素紧跟着的元素,必须和实际元素(此处指div)相符
$(".prev ~ div")//.prev 选择器所在元素后面的所有div元素
-
内容筛选选择器
$('.div:contains("12345")').css("color", "#A0A0A0");
//选择包含指定文本(此处指12345,如果一个元素中文本为1234567,也会被选定,但是文本为123不行)的元素,设置颜色
$('.div:has(span)').css("color", "blue");
//选择包含指定选择器(此处指span)的元素
$('a:12345').css("border", "3px groove blue");
//选择所有包含子元素或者文本(此处指12345,如果一个元素中文本为1234567,或者123也会被选定,)的a元素
$('a:empty').text("empty").css("border", "3px groove red");
//找到a元素下面的所有空节点(没有子元素),并赋值为empty
注释有点多,是通过自己实践之后的一些理解总结出来的
两个script中的变量可以相互比较吗,这两个script中的变量是局部变量还是全局变量
一个是elements1一个是elements2,分别在两个script中,这样也可以比较吗?elements1 elements2 是局部变量还是全局变量, 有没有详细讲解?
© 著作权归作者所有