JQuery入门

最新推荐文章于 2024-07-04 10:38:01 发布

黄盖苦肉六张闪

最新推荐文章于 2024-07-04 10:38:01 发布

阅读量247

点赞数

分类专栏：前端相关

本文链接：https://blog.youkuaiyun.com/qq_36311372/article/details/79090311

版权

前端相关专栏收录该内容

4 篇文章

订阅专栏

要使用JQuery需要引入JQuery的包：

< script type = "text/javascript" src = "../js/jquery-3.1.0.js" ></ script >

JQuery的入口是一个 $ ，美刀符号，下面是引入了JQuery后用alert输出美元符号的结果：

可以看出美元符号实际上是个function，是个JQuery的构造器，如果用了JQuery，就不要定义$ 命名的方法了，会覆盖JQuery的。$ 什么东西都能够接收，接收的东西不一样，体现的功能也不一样。比如函数、字符串等等

1. function

把一个方法扔进去，就相当于让JQuery帮你调用这个方法一样：

    <!DOCTYPE html>

    <html>

            <head>

                    <meta charset="UTF-8">

                    <title>你好, JQuery</title>

            </head>

            <script type="text/javascript" src="../js/jquery-3.1.0.js" ></script>

            <script type="text/javascript">

                    var fun = function(){

                            var t = document.getElementById("myText");

                            alert(t.value);

                    }

                    $(fun);

            </script>

            <body>

                    <input type="text" id="myText" value="你好" />

            </body>

    </html>

注意：$ 是在HTML页面加载完成之后才开始运行的，相当于 window.onload ，所以能够

取到这个文本框的值。

二。JQuery选择器

JQuery和CSS选择器的语法是一模一样的，这个JQuery选择器是用来找到满足选择器条件的DOM元素相关的JQuery对象。用JQuery选择器选中的DOM对象，就变成了JQuery对象。

具体可以参考w3c，或者JQuery的API： http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

三。JQuery对象

1.概念

先回顾一下DOM对象的概念，比如Button、Anchor(a标签)等等是标签对象，window、document这些就是JS的内置对象，参考： http://www.w3school.com.cn/js/js_obj_htmldom.asp

这些对象统称为DOM对象，但是这些DOM对象在不同的浏览器之间会有各种各样的兼容性问题

，为了解决兼容性问题，JQuery对象就出现了

jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。

jQuery 对象是 jQuery 独有的，如果一个对象是 jQuery 对
象, 那么它就可以使用 jQuery 里的方法: $(" #tab ").html();

jQuery 对象无法使用 DOM 对象的任何方法，同样 DOM 对象也不能使用 jQuery 里的任何方法。建议约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $。比如：

var $variable = jQuery 对象

var variable = DOM 对象

现在用ID选择器选中一个元素，然后到控制台看一下：

    <!DOCTYPE html><html><head>

            <meta charset="UTF-8">

            <title>JQObject</title>

            <script type="text/javascript" src="../js/jquery-3.1.0.js"  charset="utf-8"></script>

            <script type="text/javascript">

                    $(function(){

                            var $myDiv = $("#myDiv");

                            debugger

                    })

            </script>

    </head>

    <body>

            <div id="myDiv">

                    我的div

            </div>

    </body>

    </html>

输出：

看到有 [ ] ，很像是个数组，然后用下标[0]的方式访问一下：

输出结果是true，果然是个数组，原来这个JQuery对象相当于是个包含了DOM元素的数组。但是这个JQuery对象不仅仅是个DOM元素的数组了，JQuery的函数它都能够调用，相对的DOM元素的函数它就用不了，示例：

获取一个文本框的值：

    // DOM的访问方式
    alert(document.getElementById("myText").value);

    // JQuery的访问方式
    alert($("#myText").val());

2. JQuery和DOM对象的转换

前面有说过JQuery对象就是个包含了DOM元素的数组，那么用下标的方式就能够获取里

边的DOM对象：

var jqObj = $("#myText");
var domObj = jqObj[0];

DOM转换成JQuery：
虽然JQuery对象是个包含了DOM的数组，但不代表声明个数组就是JQuery对象哈...
DOM转JQuery要用JQuery的方式，用 $() 把 DOM 对象包装起来：

    var domObj = document.getElementById("myText");
    var $jqObj = $(domObj);
    alert($jqObj.val());

几个小范例：

$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用jQuery的方法

eq的用法：

    $(function(){
            var $inputs = $("input");
            
            //eq是获取选择器选中的多个JQuery对象中索引指定的那个
            alert($inputs.eq(0).val());
            

            // 转换成DOM的访问方式

            alert($inputs[1].value);

    })

四。常用方法
JQuery方法特点：一般带一个参数的表示获取该属性的值，两个参数则表示为该属性赋值

设置属性：

比如将一个文本输入框改成密码框：

    $(function(){
            alert($("input").attr("type" , "password"));
    })

attr函数只传一个值，返回值就是该input的type类型，如果要把这个属性去掉，不需要用removeAtr方法，把第二个参数改成 "" 或者undifine就OK了。

addClass：顾名思义，用于添加样式表。添加行内样式则是用下面这种：

用法跟设置属性一样的，去实践吧少年。

HTML( )函数：

效果和innerHTML一样的，用于获取或者覆盖DOM元素中的内容，比如：

    <!DOCTYPE html>

     <html>

        <head>

            <meta charset="UTF-8">

            <title>css</title>

            <script type="text/javascript" src="../js/jquery-3.1.0.js" ></script>

            <script type="text/javascript">

                    $(function(){

                            alert($("input").attr("type" , "password"));

                            

                            // 获取DOM元素的内容

                            alert($("#myDiv").html());

                    })

            </script>

            </head>

            <body>

            <input type="text" id="" value="" />

            <div id="myDiv">

                    <p style="color: red;">CSS测试方法</p>

            </div>

            </body>

    </html>

输出结果：

更改：

 $("#myDiv").html("<h1 style='color: red;'> Fuck It </h1>")

append( )：相当于appendChild()，向元素内部添加DOM元素，用法：

    <!DOCTYPE html>

    <html>

    <head>

            <meta charset="UTF-8">

            <title>追加dom元素</title>

            <script type="text/javascript" src="../js/jquery-3.1.0.js"></script>

            <script type="text/javascript">

                    $(function(){

                            $("table").css({"text-align":"center",width:500})

                            $("table").append("<tr><td>1</td><td>张三</td><td>1607</td></tr>")

                    })

            </script>

    </head>

    <body>

            <table border="1">

                    <tr>

                            <th>编号</th>

                            <th>姓名</th>

                            <th>班级</th>

                    </tr>

            </table>

    </body>

    </html>

效果：