Menu
Woocommerce Menu

允许在IE上使用CSS3绝大部分的酷炫功能,复制代码 代码如下

0 Comment


正文首要内容:
倘使用浏览器自带的打印开关,不可能进展此外和打字与印刷相关的操作,如传递打印次数等等。所以要求把浏览器打印的效应保留并予以到本人加上的开关在那之中,能够在点击按键的同有的时候间触发自定义的函数。
复制代码 代码如下:

1.属性操作

10个有助简化CSS3支付的工具

2011/05/18 · HTML5 ·
CSS3,
HTML5

Web 开荒人员能通过CSS3为网址设计扩大不菲前卫成分,CSS3
对CSS标准做了非常的大的修正。今后,本文将为您介绍12款有支持简化CSS3支出的工具。

1、CSS3Pie

同意在IE上应用CSS3多边的光彩夺目功效。

2、CSS3 Builder

由此该工具,你能够用相仿利用photoshop特效的界面来安排复杂的CSS3
box模型。特别节约时间。

3、CSS3 Drop shadow
generatr

通过滑块功能直观的设计阴影。只需复制已被电动创造的CSS代码并粘贴到CSS文件中便可。

4、Cascadr

非CSS3特有但却百般实用。允许输入HTML代码并能够侦测该代码中具有的内联CSS,将之从HTML中移除并增加到一个独门的体制表中。

5、Border Radius.com

现阶段最风靡的CSS3属性之豆蔻梢头。有扶植赶快创建圆角box模型并赢得适当的CSS3代码。

6、Button Maker

同意创制优良的开关。使得CSS3
按键设计变得老大轻易——只需搜罗颜色,调治半径,获代替码,粘贴代码至CSS文件就可以。

7、CSS3 Generator

选拔方便,有协助创设最风靡的CSS3属性代码,如 @font-face, 奥德赛GBA,
text-shadow,border-radius等代码。

8、Modernizr

用来侦测浏览器是不是帮衬CSS3,能为成分增添类以此在样式表上对特定浏览器成效扩充固化。举例,当浏览器不扶助多元背景时,”no-multiplebgs”就将被增添到成分上。

9、HTML5 & CSS3
Support

想清楚IE
8是或不是帮衬”text-shadow”属性?那就看看那张图片吧!该图形显示了颇有主流浏览器所支撑的CSS3属性,极具实用性。

图片 1
(点击查阅大图)

10、CSS3 Gradient Generator

渐变生成器。只需搜聚颜色、预览颜色,抓替代码并粘贴代码就能够。

11、CSS3 Please

卓越管用的可让客户复制并粘贴不足为道CSS3代码的站点。具备可供现场测量检验效果的预览区。

12、CSS3 Cheat
Sheet

CSS3 cheat sheets有扶植在编码进度中相当的慢回忆性质及其语法。Smashing
Magazine
创设了那么些图片,援助下载与打字与印刷。同时扶持.gif格式预览。

原文:Jean-Baptiste
Jung    译文:oschina

赞 1 收藏
评论

图片 2

>

1.1 基性情能操作

$("img").attr("src")                返回文档中所有图像的src属性值
$("img").attr("src","test.jpg")     设置文档中所有图像的src属性值
$("img").removeAttr("src")          将文档中图像的src属性删除

$("input[type='checkbox']").prop("checked",true)        选中复选框
$("input[type='checkbox']").prop("checked",false)       取消复选框
$("img").removeProp("src")              删除img的src属性值

attrprop的区别:

attr可以找到自定义的属性,prop只能找到固有的属性

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.2.1.js"></script>
</head>
<body>
<button class="select_all">全选</button>
<button class="reverse">反选</button>
<button class="cancel">取消</button>
<hr>
<table border="1">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
</table>
<script>
    //为"select_all"类绑定点击事件
    $(".select_all").click(function(){
        $(":checkbox").prop("checked",true);//选中所有的"checkbox"标签
    });

    //为"cancel"类绑定点击事件
    $(".cancel").click(function(){
        $(":checkbox").prop("checked",false);//取消选中的"checkbox"标签
    });

    //为"reverse"类绑定点击事件
    $(".reverse").click(function(){
        //循环每一个"checkbox"标签
        $(":checkbox").each(function(){
            $(this).prop("checked",!$(this).prop("checked"));//把所有的"checkbox"标签的属性取反
        })
    });
</script>
</body>
</html>

复制代码 代码如下:

1.2 class属性操作

$("p").addClass("test")             为p元素加上"text"类
$("p").removeClass("test")          从p元素中删除"test"类
$("p").toggleClass("test")          如果存在就删除,否则就添加"test"类
$("p").hasClass("test")             判断有没有"test",返回一个布尔值

1.3 标签文本text/HTML的个性

$("p").html()                   返回p标签的html内容
$("p").html("hello world")      设置p标签的html内容
$("p").text()                   返回p标签的text内容
$("p").text("test")             设置p标签的text内容
$("input").val()                获取文本框中的值
$("input").val("test")          设置文本框中的内容

2.CSS操作

2.1 样式

$("p").css("color")             访问查看p元素的color属性
$("p").css("color","red")       设置p元素的color属性的"red"
$("p").css({"color":"red","bakcground-color":"yellow"}) 设置p元素的color为"red",background属性为"yellow"(设置多个属性要用{}字典形式)

2.2 位置

$("p").offset()             元素在当前窗口的相对偏移,object{top:100,left:100}
$("p").offset().top         元素相对窗口顶部的偏移
$("p").offset().left        元素相对窗口左侧的偏移
$("p").position()           元素相对父元素的偏移,对可见元素有效,object{top:100,left:100}

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.2.1.js"></script>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
<div class="div1" style="width:200px;height:200px;background-color:darkblue"></div>
<script>
    var val_x=0;//初始化标签到浏览器左边框的距离
    var val_y=0;//初始化标签到浏览器上边框的距离

    //定义当鼠标悬浮在标签上面的时候,鼠标的样式为移动
    $(".div1").mouseover(function(){
        $(this).css("cursor","move")
    });

    //为盒子绑定鼠标左键按下事件
    $(".div1").mousedown(function(e){
        val_x=e.clientX;//定义标签的初始x坐标
        val_y=e.clientY;//定义标签的初始y坐标

        var $box_x=$(".div1").offset().left;//获取盒子相对窗口左侧的偏移
        var $box_y=$(".div1").offset().top;//获取盒子相对窗口顶侧的偏移

        //定义鼠标移动的操作
        $(document).mousemove(function(e){
            var move_x=e.clientX;//获取鼠标的偏移量
            var move_y=e.clientY;

            //移动窗口到指定的偏移量
            $(".div1").offset({left:$box_x+move_x-val_x,top:$box_y+move_y-val_y})
        });

        //绑定鼠标左键松开事件
        $(document).mouseup(function(){
            $(document).off();//关闭事件
        })
    });
</script>
</body>
</html>

诸如此比能够使div盒子跟随鼠标的运动而移动

$(window).scrollTop()           获取窗口滚动条的高度
$(window).scrollLeft()          获取窗口滚动条的宽度
$(window).scrollTop("100")      获取窗口滚动条的高度为100

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.2.1.js"></script>
</head>
<body>
<div class="box"></div>
<div id="returnTop">to top</div>
<script>
    //定义窗口的滚动条
    $(window).scroll(function(){
        console.log($(window).scrollTop());//打印滚动条的位置

        //当滚动条的位置大于200的时候
        if($(window).scrollTop()>200){
            $("#returnTop").show();//显示滚动条
        }
        else{
            $("#returnTop").hide();//隐藏滚动条
        }

        //为返回顶部按钮绑定点击事件 
        $("#returnTop").click(function(){
            $(window).scrollTop(0);//使窗口返回顶部
        })
    })
</script>
</body>
</html>

2.3 尺寸

$("p").height()                     获取p元素的高度
$("p").width()                      获取p元素的宽度

$("p:first").innerHeight()          获取p元素的第一个元素的内部区域的高度(不包括边框)
$("p:first").innerWidth()           获取p元素的第一个元素的内部区域宽度(不包括边框)

$("p:first").outerHeight()          获取p元素的第一个元素的外部区域的高度(默认包括边框)
$("p:first").outerWidth()           获取p元素的第一个元素的外部区域的宽度(默认包括边框)
$("p:first").outerHeight(true)      为true时包括边框

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../0814/jquery-3.2.1.js"></script>
    <style>
        .box{
            width:200px;
            height:100px;
            padding:50px;
            border:10px solid red;
            background-color:pink;
            margin:20px;
        }
    </style>
</head>
<body>
<div class="box">DIV</div>
<script>
    console.log($(".box").height());//获取盒子的高度
    console.log($(".box").width());//获取盒子的宽度

    console.log($(".box").innerHeight());//获取盒子的内部区域的高度(包括填充)
    console.log($(".box").innerWidth());//获取盒子的内部区域的宽度(包括填充)

    console.log($(".box").outerHeight());//获取盒子的外部区域的高度(包括边框)
    console.log($(".box").outerWidth());//获取盒子的外部区域的宽度(包括边框)

    console.log($(".box").outerHeight(true));//获取盒子的外部区域的高度(示包括边距)
    console.log($(".box").outerWidth(true));//获取盒子的外部区域的宽度(不包括边距)
</script>
</body>
</html>

体现如下:

图片 3

打字与印刷结果如下:

图片 4

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图