码迷,mamicode.com
首页 > 其他好文 > 详细

JQ基础样式篇

时间:2016-10-31 13:03:05      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:css   效率   download   开发   nload   script   document   regular   mooc   

1-1

官方网站 http://jquery.com/download/ ,jQuery是一个JavaScript脚本库,不需要特别的安装,只需要我们在页面 <head> 标签内中,通过 script 标签引入 jQuery 库即可。

jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别在于 2.x 不再兼容 IE6、7、8浏览器,这样是为了兼容移动端开发。由于减少了一些代码,更小、更快。

jQuery 每一个系列版本分为:压缩版(compressed) 与 开发版(development),在开发过程中使用开发版(开发版本便于代码修改及调试),项目上线发布使用压缩版(因为压缩版本体积更小,效率更快)。

 

1-2jQuery对象与DOM对象

 原生的JS方法获取DOM元素得到一个DOM对象,然后再通过原生JS方法做其他处理。

通过JQ方法获取DOM元素得到一个类数组对象。它包含了DOM对象的信息并封装了很多操作DOM的方法。

var $p = $(#imooc);
$p.html(您好!).css(color,red);

 

1-3jQuery对象转化成DOM对象

jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。 通过数组下标获取div对象或直接使用JQ的get方法获取DOM节点。

方式一 : $a = $(header);var a = $div[0] ; //获得DOM对象  a.style.color=‘red‘;
方式二 : $a = $(header); var a = $a.get(0); a.style.color=red;

 

1-4DOM对象转化成jQuery对象

 如果传递给$(DOM)函数的参数是一个DOM对象,即可转换

var div = document.getElementsByTagName(div); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first();
$first.css(‘color‘, ‘red‘);

 

 2-1 JQ获取选择器

$(.imooc); //获取类选择器
$(#imooc); //获取id选择器
$(‘*‘);//获取所有选择器div,p等

 

 2-2层次选择器

子选择器 a>b : 选择a内的子标签

相邻选择器 a+next : 选中a的紧邻后面的标签

后代选择器 a b :选择a内所有对应后代(子孙)标签 如 $("form input")

兄弟选择器(a~b):同一个层次的选择器 如 $(div~p).css(‘color‘,‘green‘);<div></div><p></p>

 

 

 

 

 

 

 

 

JQ基础样式篇

标签:css   效率   download   开发   nload   script   document   regular   mooc   

原文地址:http://www.cnblogs.com/lzhlearn/p/6003022.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!