jqure应用汇总

来源：互联网发布：力帆租车软件叫什么编辑：程序博客网时间：2024/06/07 02:36
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>jquery的基本应用</title>    <script src="../../js/jquery-3.1.1.min.js" ></script><!--导入jquery文件-->    <script type="text/javascript">        /* $(document).ready(function(){//文档就绪函数。         $('p').hide();//隐藏元素         });//script若是放在上面，需要加上文档就绪函数，放在下面没必要         */        //简化版的文档就绪函数        $(function(){            $('p').hide();        })    </script></head><body><p>说好的不拖堂呢</p><p>说好的不拖堂呢</p><p>说好的不拖堂呢</p></body><!--<script type="text/javascript">    $('p').hide();//隐藏元素</script>--></html><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>通过修改样式来实现鼠标移动的效果</title>    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>    <style>        img{            margin: 10px 10px;            border: 3px solid olivedrab;        }    </style></head><body><img src="../../image/new_01.jpg" alt=""/><img src="../../image/new_02.jpg" alt=""/><img src="../../image/new_03.jpg" alt=""/></body><script type="text/javascript">    //选择元素，添加事件    $('img').mouseover(function(){        //css中两个元素，一个是要修改的元素名称，第二个是元素的值。        $(this).css('border','6px solid orange');    }).mouseout(function(){        $(this).css('border',' 3px solid olivedrab');    })</script></html><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>通过修改类名实现鼠标移动的效果</title>    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>    <style>        img{            margin: 10px 10px;            border: 3px solid olivedrab;        }        .a{            border: 6px solid orange;        }    </style></head><body><img  src="../../image/new_01.jpg" alt=""/><img src="../../image/new_02.jpg" alt=""/><img  src="../../image/new_03.jpg" alt=""/></body><script type="text/javascript">    //选择元素，添加事件    $('img').mouseover(function(){        //可以直接在后面加丶，继续写。        $(this).addClass('a');//添加类。    }).mouseout(function(){        $(this).removeClass("a");//删除类。    })</script></html><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>原生dom对象和jquery对象的互相转换</title>    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script></head><body><div id="d"></div><div id="e"></div></body><script type="text/javascript">    var d=document.getElementById('d');//（js对象定义）dom对象的定义。    // d.innerText="ssssss";    //var d=$("#d");这是jquery对象。    //d.html('dasdsadasasd');这个方法中的d是（原生dom对象）js对象，要想在div中使用，需要用下一行代码    $(d).html('sddddddddd');    /*以上是原生dom对象（js对象）转换成jqurey对象之间的转换*/    var e=$("#e");    //e[0].innerText='sssssss'  jq对象转换成js对象第一种方法    e.get(0).innerText='jhdnnfjdd'//jq对象转换成js对象第二种方法</script></html><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>放弃$符号</title>    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script></head><body><div id="a"></div></body><script type="text/javascript">    jQuery.noConflict();//放弃$符号    //$("#a").html('sssssssss')    jQuery("#a").html('sssssssss');//下方在用到$符号，需要用jQuery代替。</script></html><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>html，text，val获取和设置元素中的内容</title>    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script></head><body><div id="d">    <p>sadasdsadasasd</p>    <a>qwertyytr</a>    <!--加了xmp，把标签当作普通文本进行解析-->    <xmp><p>dsafsdfsfdsdfs</p></xmp>    cnnvhgkdkmc    <input type="text" id="t" value="fjgjfvnuf"/></div></body><script type="text/javascript">    //alert($('#d').html());//获取div标签的内部元素,连带着标签一起获取。    // $("#d").html('<span>djdjd</span><h1>ddjdjdjd</h1>');修改div标签里的内容、    //html里面，如果加内容就是修改，不加就是获取。    //alert($('#d').text());//获取div标签内部的文本，不带标签。    //$('#d').text('<p>1111111</p>dkdkddndn');    //获取输入框的value值    //alert($("#t").val())    //修改value属性值    $("#t").val('12345657')</script></html><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>attr获取和修改某个元素的属性值</title>    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script></head><body><input type="text" name="123456" value=""/></body><script type="text/javascript" >    //alert($("input").attr('name'));//获取name属性值    /*$("input").attr('type','password');//修改input中的属性。     $("input").attr('name','312');//修改input中的属性。     $("input").attr('id','test');//修改input中的属性。*/    $("input").attr({'name':'321','type':'password','id':'test'});    //多个属性修改，写在一起的写法，调用attr方法，把所有要修改的属性放在{}里。    // 属性之间用逗号隔开，属性名与属性值之间用冒号隔开</script></html><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>通过jquery修改css样式</title>    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script></head><body><div>    qwert</div></body><script type="text/javascript">    //$("div").css('background','red');修改单个的div的属性    $("div").css({'background':'red','height':'200px','weight':'100px'        ,'margin':'50px','padding':'50px'});</script></html><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>添加删除类</title>    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>    <style>        div{            height: 300px;            width: 300px;            background-color: #585858;        }        .a{            background-color: #f2ad0a;        }    </style></head><body><div id="d">    sdsad</div></body><script type="text/javascript">    $("#d").mouseover(function(){        $(this).addClass('a');    }).mouseout(function(){        $(this).removeClass('a');    })</script></html><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>鼠标移动的时候，类如果有删除，没有就添加，toggleClass</title>    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>    <style>        div{            height: 300px;            width: 300px;            background-color: #585858;        }        .a{            background-color: #f2ad0a;        }    </style></head><body><div id="d">    sdsad</div></body><script type="text/javascript">    $("#d").mouseover(function(){        $(this).toggleClass('a');    }).mouseout(function(){//类如果有删除，没有就添加，toggleClass        $(this).toggleClass('a');    })</script></html><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>鼠标点击的时候，toggleClass</title>    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>    <style>        div{            height: 300px;            width: 300px;            background-color: #585858;        }        .a{            background-color: #f2ad0a;        }    </style></head><body><div id="d">    sdsad</div></body><script type="text/javascript">    /* $("#d").mousedown(function(){     $(this).toggleClass('a');     }).mouseup(function(){    鼠标点下变色，松开变回去。     $(this).toggleClass('a');     })*/    var count=1;    $("#d").click(function(){//点击一下，变一个颜色。        $(this).toggleClass('a',count%3==0);//点击数量是3的倍数变色。        //toggleClass中的count%3==0，是布尔型的变量。        count++;    })</script></html><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>jquery方法添加。删除。克隆内容</title>    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script></head><body><div></div></body><script type="text/javascript">    var table=$("<table border='2'><tr><td>123456789</td></tr></table>");//添加一个表格。    $("div").append(table);//添加表格给div，append方法是添加。    //table.remove();//删除表格。remove是移除。    table.clone().appendTo($('div'));//克隆一个表格，添加到div中。clone方法是克隆，appendto是添加到。</script></html>
阅读全文
0 0