jquery和css的区别是什么?_前端

jQuery

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

CSS (层叠样式表)

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

CSS选择器和jQuery选择器的区别

我们知道,jQuery选择器和CSS选择器的写法十分类似,都具有隐式迭代的特点,无需循环遍历符合选择器要求的每个元素,使用起来相对方便,通常,把css选择器用$("")包起来就成了一个jQuery选择器,如

jquery和css的区别是什么?_前端_02

见下面的例子,CSS为每个段落的文字设置成14px,颜色是红色,jQuery中设置文字为16px,颜色为蓝色,因为jquery设置的是DOM加载后的行为,所有的段落表现为蓝色,16px字

<!doctype html><html><head><meta charset="utf-8"><title>选择器</title><style type="text/css">p { font-size: 14px; color:#F00 }p:nth-child(3){color:#690}</style><script src="jquery/jquery-1.11.3.js"></script><script>$(document).ready(function() {  $("p").css({"color":"#00f","font-size":"16px"});  $("p:nth-child(3)").css({"font-size":"24px"});
});</script></head><body>  <p>第一段</p>  <p>第二段</p>  <p>第三段</p>  <p>第四段</p></body></html>

那么两者的区别在哪里呢?

1、但两者的作用不同,CSS选择器找到元素后为设置该元素的样式,jQuery选择器找到元素后添加行为。

2、jQuery选择器拥有更好的跨浏览器的兼容性。

3、选择器的效率。

CSS选择器的效率

  1. id选择器(#myid)

  2. 类选择器(.myclassname)

  3. 标签选择器(div,h1,p)

  4. 相邻选择器(h1+p)

  5. 子选择器(ul > li)

  6. 后代选择器(li a)

  7. 通配符选择器(*)

  8. 属性选择器(a[rel="external"])

  9. 伪类选择器(a:hover,li:nth-child)

上面九种选择器的效率是从高到低排下来的,基中ID选择器的效率是最高,而伪类选择器的效率则是最底。

jQuery选择器的效率

  1. id选择器$('#id')和元素标签选择器$('form')

  2. 类选择器$('.className')

  3. 属性选择器$('[attribute=value]')和伪类选择器$(':hidden')

以上就是jquery和css的区别是什么?的详细内容,