首页 > 代码库 > JQ基础样式篇

JQ基础样式篇

2024-08-18 06:55:49   221人阅读

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基础样式篇


联系
我们