jQuery浏览器CSS3特写兼容实例

本文实例讲述了jQuery浏览器CSS3特写兼容的方法。分享给大家供大家参考。具体分析如下：

CSS3充分吸收多年了web发展的需求，吸收了很多新颖的特性。例如border-radius

css3特性中最令人兴奋的莫过于选择器的增强，例如属性选择器可以根据某个属性值来选择标记，位置选择器可以根据子元素的位置来选择标记。

在目前很多使用的很多浏览器，例如IE7,主要支持css2.大部分属性选择器都不理想。

正是因为浏览器对css3的兼容性问题。各个浏览器都未对其做更好的标准支持。

jQuery通过预先的javascript编程，提供了几乎所有css3标准下的选择器。开发者可以利用这些选择器轻松选择各种元素。供javascript编程使用。

代码如下:

<script type="text/javascript">
    $(function() {
 $("li:nth-child(2)").addClass("altcss");
    });
</script>

以上使用选择器li:nth-child(2),表示选择<li>中的第二个元素标记。并且可以在ie7和chorme浏览器中测试通过。

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery修改class属性和CSS样式整理

    class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个class属性.但是class属性的值可以是多个名称,即可能包含一个词的列表,中间用空格分隔. 具体使用方法见:http://www.w3school.com.cn/css/css_selector_class.asp   用jQuery进行类名修改既可以用attr()方法修改"class"属性,也可以用addClass(), rem

  • jQuery使用CSS()方法给指定元素同时设置多个样式

    本文实例讲述了jQuery使用CSS()方法给指定元素同时设置多个样式的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(

  • JQuery操作元素的css样式

    我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元 素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能, 虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句 话 – "jQuery让JavaScript代码变得简洁!" 1. addClass() – 添加CSS类 复制代码 代码如下: $("#target"

  • jQuery的css() 方法使用指南

    定义和用法 css() 方法返回或设置匹配的元素的一个或多个样式属性. 返回 CSS 属性值 返回第一个匹配元素的 CSS 属性值. 注释:当用于返回一个值时,不支持简写的 CSS 属性(比如 "background" 和 "border"). 复制代码 代码如下: $(selector).css(name) name 必需.规定 CSS 属性的名称.该参数可包含任何 CSS 属性.比如 "color". 实例 取得第一个段落的 color 样式

  • jQuery+CSS3实现树叶飘落特效

    请使用Chrome浏览器查看本效果. html源代码: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <title>HTML5树叶飘落动画-柯乐义</title><base target="_blank" href="http://keleyi.com/keleyi/phtml/css3/" /> <meta charset="utf-8&qu

  • Jquery使用css方法改变样式实例

    本文实例讲述了Jquery使用css方法改变样式.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • jQuery的css()方法用法实例

    本文实例讲述了jQuery的css()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置匹配元素的一个或多个样式属性. 语法结构: 语法一: 取得指定样式属性的属性值. 以样式属性名称作为参数.例如: 复制代码 代码如下: $("div").css("color") 以上代码能够获取div的字体颜色值. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta c

  • Jquery中CSS选择器用法分析

    Jquery中CSS选择器用法分析

    本文实例讲述了Jquery中CSS选择器用法.分享给大家供大家参考.具体如下: jQuery使用了一套css选择器,共有5种,即标签选择器,ID选择器,类选择器,通用选择器和群组选择器,现分述如下: 1. 标签选择器 用于选择HTML页面中已有的标签元素,又称元素选择器,格式:$("element"),如$("div"),同getElementByTagName 2. ID选择器 用于获取某个具有id属性的元素,格式如下:$("id"),同get

  • jQuery浏览器CSS3特写兼容实例

    本文实例讲述了jQuery浏览器CSS3特写兼容的方法.分享给大家供大家参考.具体分析如下: CSS3充分吸收多年了web发展的需求,吸收了很多新颖的特性.例如border-radius css3特性中最令人兴奋的莫过于选择器的增强,例如属性选择器可以根据某个属性值来选择标记,位置选择器可以根据子元素的位置来选择标记. 在目前很多使用的很多浏览器,例如IE7,主要支持css2.大部分属性选择器都不理想. 正是因为浏览器对css3的兼容性问题.各个浏览器都未对其做更好的标准支持. jQuery通过

  • jQuery监听浏览器窗口大小的变化实例

    方法一:在标签上加入  onLoad="" onResize=""  方法  写上对应的方法即可 方法二:window.onresize=function(){///.....} 在方法里面写上对应的代码即可 着两种方法基本都可以解决问题. <script> function adjust(obj){ var div = document.getElementById("pad"); var txt = document.getEle

  • 详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

    详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

    最近做了个项目,其中有一目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动到某位置功能 博客目录的一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用. 此处应使用浏览器原生提供的 getBoundingClien

  • jQuery封装animate.css的实例

    animate.css是一个有趣的,跨浏览器的css3动画库. 一.首先引入animate css文件 <link rel="stylesheet" href="animate.css" rel="external nofollow" > 二.给指定的元素加上指定的动画样式名 <div id="box" class="animated bounce"></div> 这里包

  • jQuery中DOM 属性使用实例详解下篇

    目录 DOM属性(下) .html() .val() .attr() .removeAttr() DOM属性(下) .html() 获取集合中第一个匹配元素的HTML内容 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容. 如果选择器匹配多个元素,那么只有第一个匹配元素的 HTML 内容会被获取. $('div.demo-container').html(); html()方法还可以设置每一个匹配元素的html内容. 我们可以使用 .html() 来设置元素

  • jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码

    jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码

    本文实例讲述了jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码.分享给大家供大家参考.具体如下: 这里实现圆角表单,圆角输入框,无刷新验证,漂亮唯美,是对这款基于HTML5/CSS3/jQuery来实现的表单效果的简要概括,用HTML5可以实现很多超乎寻常的效果,从此你会喜欢上HTML5,会骂一下万恶的IE,到现在IE8还不支持HTML5,正悲哀着呢. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-htm

  • 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

    解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

    最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动到某位置功能 一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用. 此处应使用浏览器原生提供的 getBoundingClientRect 接口,此

  • Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题

    需求很简单,点击一个文件链接下载该文件,同时向后台发送请求.需求很常见,用户点击下载后通常要进行下载量的统计,统计的话可以利用 script标签 或者 img标签(图片ping) 的跨域能力,将它们的 src 属性指向统计地址,但是这次用了 ajax 进行统计,遂出现了这个问题. demo 代码如下: <a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe&q

  • jQuery Ajax 全局调用封装实例代码详解

    有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi

  • jQuery实现拼图小游戏(实例讲解)

    jQuery实现拼图小游戏(实例讲解)

    小熊维尼拼图 jQuery代码实现拼图小游戏,鼠标选中拼块,用上下左右键移动拼块. html代码 <div id="box-div"> <!--走不通时的提示!--> <div id="tips"> <p>\(╯-╰)/ 哎呦,走不通啦!</p> </div> <div id="container"> <div class="row"&g

随机推荐