欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JQuery入门

程序员文章站 2024-03-05 14:34:37
...
    要使用JQuery需要引入JQuery的包：
    <script type="text/javascript" src="../js/jquery-3.1.0.js" ></script>
    
    JQuery的入口是一个 $ ，美刀符号，下面是引入了JQuery后用alert输出美元符号的结果：

JQuery入门

可以看出美元符号实际上是个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>
输出：

JQuery入门

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

JQuery入门

输出结果是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方法特点：一般带一个参数的表示获取该属性的值，两个参数则表示为该属性赋值 

设置属性：

JQuery入门

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

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


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

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

 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>
    输出结果：
JQuery入门

   更改：

 $("#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>

 效果：

JQuery入门
  啊其他方法还有好多，有空写一遍完整点的收录吧，就到这。





上一篇： jQuery sudoSlider插件

下一篇： JAVA练习题函数调用

推荐阅读