JQuery之CSS,文档，事件

最新推荐文章于 2024-09-06 00:29:18 发布

Munger6

最新推荐文章于 2024-09-06 00:29:18 发布

阅读量396

点赞数

分类专栏： JAVAScript 文章标签： html jquery css 文档

本文链接：https://blog.csdn.net/Munger6/article/details/53548151

版权

JAVAScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文档

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: #007bc5;
        }
        #div2{
            width: 100px;
            height: 100px;
            background-color: #ffa24a;
        }
    </style>
</head>
<body>
    <div id="div1">
        <span>span</span>
    </div>
    <div id="div2">
    </div>
    <input type="button" value="btn1" id="btn1"/>
</body>

导入JQuery

<script src="js/jQuery-2.2.2-min.js"></script>

创建元素

var op = $("<p>this is p</p>");
var olabel = $("<label>label</label>");

增加元素

/*将op加入div里面，append,默认将内容放在最后*/
        $("#div1").append(op);
        $("#div1").append(olabel);
        
/*prepend()将元素追加到所有子元素的最前面*/
        $("#div1").prepend(op);  //找到父类元素，给父类元素增加元素op；
        
/*prependTo():将选中的元素，加入到目标位置里面 ；注意和prepend（）的顺序相反*/
        $("label").prependTo("#div2");
        
 /*在制定元素前追加某一个元素*/
        $("label").before("<b>this is b</b>");
        
 /*在制定元素后追加某一个元素*/
        $("label").after("<b>this is b2</b>");

替换元素

/*替换所有的b元素为em元素*/
        $("<em>em</em>").replaceAll("b");

删除

/*删除节点，empty():将选中的元素内容清空,
    remove():删除节点*/
        //$("#div1").empty();
        //$("div").remove("#div2");

克隆

$("#div2").clone().prependTo("body");
 <!--将div2浅克隆放在body里面--> 
 /*true：克隆当前这个元素，将事件也一起克隆，false：只克隆元素*/
 
 克隆的链式表达，实现按钮自动点击增长；
  var num = 1;
        $("#btn1").click(function(){
            ++num;
            $(this).clone(true).val("btn"+num).insertBefore($(this));
        });

CSS

HTML端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #p1{
            font-size: 20px;
        }
        #div1{
            width: 100px;
            height: 100px;
            background-color: #e2ff5f;
        }
    </style>
</head>
<body>
    <p style="color: red" id="p1">this is p</p>
    <span id="span1">span</span>
    <div id="div1"></div>
</body>

获取CSS样式

<!--传入一个参数获取类的值-->
var res = $("#p1").css("color");
var res1 = $("#p1").css("font-size");

<!--设置两个参数表示设置-->
 $("#p1").css("background-color","green");

<!--设置样式的多个类表达用JSON -->
.CSS({"color":"red","fond-size":"30px"});

获取CSS内部样式/外部样式
---必须传入想要获取样式的参数；
在JS中要获取外部的需要使用document】
JQuery处理了兼容性问题；

案例

is（：“”）判断类是否包含某个css样式；

<!--实现点击按钮后循环sel1下面的所有子类查找被选中的元素，将其拷贝给sel2成为其子类-->
    $(".btn1").click(function(){
        $("#sel1").children().each(function(){
            //is  要找非元素用：  找元素不加冒号；
            if($(this).is(":selected")){
                $("#sel2").append($(this));
            }
        })
    });

实现点击触发动态改变div的样式

<!--点击div1后，其长度和高度增长2倍-->

  $("#div1").click(function(){
            /*n:表示当前元素的下标  val表示当前元素的值 返回的xxxpx*/
            $(this).css({"width":function(n,val){
                return parseInt(val)*2;
            },"height":function(n,val){
                return parseInt(val)*2;
            }});
        });

事件

绑定事件：

<!--不需要有on-->
 $("#p1").click(function(){
    });

    $("#sel").change(function(){
    });
    
<!--通过on绑定事件-->
     $("#p2").on("click",function(){
        alert("click");
    });

绑定多个事件：以JSON的形式

$("#p3").on({"click":function(){
        console.info("click")
    },"mouseover":function(){
        console.info("over");
    }});
    <!--p3，绑定了点击和鼠标进入事件实现不通过的打印效果-->
    <!--事件的书写按照JSON的规则书写-->

hover() 绑定了鼠标进入和移除要进行两个动作

$("#p4").hover(function(){
        $(this).addClass("as");
    },function(){
        $(this).removeClass("as");
    })
进入绑定class属性“as”  移除则删除；   as样式设置了隐藏或者改变颜色，大小等设置；

其他

传统方式：在div中：   overFlower：over；	 
over:鼠标移到元素上要触发的函数	out:鼠标移出元素要触发的函数
scroll         

移除事件：off

动态效果

隐藏元素：hide(毫秒数)

<!--以快的方式隐藏div，（慢：slow，fast：快，normal：中）也可以输入毫秒数；-->
 //$("#div1").hide("fast");

show（）动态显示内容；

show(2000, function(){	})   
<!--在2秒内以改变高宽的方式显现出来，显示完后调用方法-->

以滑动的方式显示和隐藏起来

slideDown（毫秒数）以滑动方式显现：
slideUp(毫秒数)  以滑动方式隐藏；

显示的元素，就隐藏起来，隐藏的元素就显示出来；

//$("#div2").slideToggle(2000);

fadeIn()；	通过改变透明度的方式显示出来；
fadeOut()；	通过改变透明度的方式隐藏出来；
 $("#div1").fadeOut(2000);

delay()设置之后的动作延时执行；

$("#div3").fadeOut(2000).delay(1000).fadeIn(2000);

补充：
设置文本占位符： <input type"text" placeholder = "请输入手机号码"/>