JQuery

来源：互联网发布：exo同款内裤淘宝编辑：程序博客网时间：2024/04/28 20:20

JQuery:

JQuery语法格式：

JQuery文档就绪函数：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <!--导入JQuery文件-->    <script src="../../text/JQuery/jquery-3.1.1.min.js">        //内部不允许有其他东西    </script>    <script>        //文档就绪函数              //第一种：复杂版        $(document).ready(function(){         //隐藏元素         $('p').hide();         })                //第二种：简化版        $(function(){            //隐藏元素            $('p').hide();        })    </script></head><body><p>重力小丑</p></body><!--两个script必须分开写，如果连着写就要加入文档就绪函数--></html>

DOM操作：操作css,操作元素属性，设置元素及内容

操作css:

通过JQuery修改css样式：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>通过JQery修改css样式</title>    <script src="../JQuery/jquery-3.1.1.min.js"></script>    <script>        $(function(){

            //修改单个css样式
            $('div').css('background-color','red');

           效果如图;
           //修改多个css样式
            $('div').css({'background-color':'red','font-size':'large'});

           效果如图:

        })    </script></head><body><div>    123456</div></body></html>

<!DOCTYPE html><html>   <head>      <meta charset="UTF-8">      <title></title>      <!--引入jquery-->      <style type="text/css">         div{            height: 300px;            width: 300px;            background-color: orange;         }         .a{            background-color: blue;         }      </style> <script src="../JQuery/jquery-3.1.1.min.js"></script>
      <script type="text/javascript">         $(function(){            $("#d").mouseover(function(){               $(this).addClass('a');            }).mouseout(function(){               $(this).removeClass('a');            });         })      </script>   </head>   <body>      <div id="d">         sdkfjs      </div>   </body></html>
效果如下：当鼠标悬浮在内容区域时为style中a的样式，即背景颜色为蓝色；
        当鼠标离开内容区域时去除a的样式，即背景颜色变为橘黄色。
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        div{            height: 300px;            width: 300px;            background-color: red;        }        .a{            background-color: blue;        }    </style>    <script src="../JQuery/jquery-3.1.1.min.js"></script>    <script>        $(function(){            var count=1;            $("div").click(function(){                                //类切换，不会写删除，添加类，                //在删除添加类操作不停切换时，推荐使用toggleClass                /*toggleClass(类，频率)*/                $(this).toggleClass('a');            })        })    </script></head><body><div id="d">    动态</div></body></html>
效果如下：每点击一次就会转换一次效果，a样式由无到有，由有到无
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="../JQuery/jquery-3.1.1.min.js"></script>
    <script>        $(function(){            var table=$("<table border='1px solid red'><tr><td>哈哈</td></tr></table>");            $("div").append(table);//table添加           /* table.remove();//table删除*/            table.clone().appendTo($("div"))//克隆，即多加了一个div标签        })    </script></head><body><div></div></body></html>
操作元素属性：
<!DOCTYPE html><html>   <head>      <meta charset="UTF-8">      <title></title>      <script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>      <script type="text/javascript">         $(function(){            //获取name属性值                    alert($("input").attr('name'))
            //单个修改属性值            $("input").attr('name','321');            $("input").attr('type','password');            $("input").attr('id','test');                       //多个属性值一起修改；调用attr方法，把所有要修改的属性放在{}里；
              属性之间用逗号分割；属性名与属性值之间用冒号隔开            $("input").attr({'name':'321','type':'password','id':'test'})         })      </script>   </head>   <body>      <input type="text" name="123" value="" />   </body></html>

设置元素及内容：
<!DOCTYPE html><html>   <head>      <meta charset="UTF-8">      <title></title>      <!--引入js-->      <script src="../JQuery/jquery-3.1.1.min.js"></script>      <script type="text/javascript">         $(function(){            //获取div标签内部的元素//          alert($("#d").html())
            //修改div标签里的内容//          $("#d").html('<span>skfksd</span><h1>sfdfgsdds</h1>gfddd');
             效果如图：
            //获取div标签内部的文本//          alert($("#d").text())
            效果如图：
            //修改div标签里的文本//          $("#d").text('<p>dfsdfsd</p>123434343')            效果如图：
            //获取输入框的value值            alert($("#t").val())
             效果如图：
            //修改value属性值            $("#t").val('12345657')
             效果如图:
         })      </script>   </head>   <body>      <div id="d">         <p>12323423423</p>         <a>!@^%@&@&@</a>         <!--把标签当作普通文本进行解析-->         <xmp><p>dsafsdfsfdsdfs</p></xmp>         fsdfdsfsdfsfsd         <input type="text" id="t" value="fsfsdfsdfsdfsddf" />      </div>   </body></html>

JQuery转换对象：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>

      //导入JQuery对象
    <script src="../JQuery/jquery-3.1.1.min.js">        //内部不允许有其他东西    </script>    <script>        $(function(){            var d=document.getElementById('d');            //方法一：将原生DOM对象（js对象）转换成JQuery对象              $(d).html('1564562');//P标签内的111111变为1564562

            //方法二：jquery对象转原生对象,下标只能为0
            var e=$('#e');            e[0].innerText='222222';//效果为：div标签内的内容为222222

            e.get(0).innerText='33333'//效果为：div标签内的内容为33333        })    </script></head><body><p id="d">111111</p>

<div id="e"></div>
</body></html>

解决多库冲突：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="../JQuery/jquery-3.1.1.min.js"></script>    <script>        $(function(){            //放弃$符号            jQuery.noConflict();            //此时没有效果            $(d).html('fsdfsdfsdsd');            //放弃$后的写法            jQuery('#a').html('23333')        })    </script></head><body><div id="a"></div></body></html>
选择器：

http://jquery.cuishifeng.cn/

阅读全文

0 0