JavaScript与JQuery框架基础入门教程

一，JS对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试 js的创建对象</title>
        <script>
            //2. 创建对象方式2：
                var p2 = {
                    //绑定了属性
                    name:"张三",
                    age:19,
                    //绑定了函数
                    eat:function(a){
                        console.log(a);
                    }
                }
                console.log(p2);
                p2.eat(10);//调用函数
            //1. 创建对象方式1：
                //声明对象
                function Person(){}
                //创建对象
                var p = new Person();
                //动态绑定属性
                p.name="张三" ;
                p.age=18 ;
                //动态绑定函数
                p.eat=function(){
                    console.log("吃猪肉");
                }
                //查看
                console.log(p);
                //调用函数
                p.eat();
        </script>
    </head>
    <body>
    </body>
</html>

二，DOM

?1，作用

使用document对象的各种方法属性。解析网页里的各种元素。

按照id获取元素-----getElementById(“id属性的值”)

按照name获取元素-----getElementsByName(“name属性的值”)

按照class获取元素-----getElementsByClassName(“class属性的值”)

按照标签名获取元素-----getElementsByTagName(“标签名”)

在浏览器输出-----write(“要展示的内容”)

innerHtml

innerText

style

?2，测试

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试 DOM解析网页元素</title>
        <script>
            function method(){
                // 4. 获取标签名是p的
                var d = document.getElementsByTagName("p");
                d[0].innerHTML="hi...";
                console.log(d[0].innerHTML);
                // 3. 获取 class="f"
                var c = document.getElementsByClassName("f");
                c[0].innerHTML="hi...";
                console.log(c[0].innerHTML);
                // 2. 获取name="d"
                var b = document.getElementsByName("d");//得到多个元素
                // b[0].innerHTML="test...";  //修改第一个元素的内容
                b[0].style.color="blue";  //修改第一个元素的字的颜色
                console.log(b[0].innerHTML);//获取第一个元素的内容
                // 1. 获取id="a1"
                var a = window.document.getElementById("a1");//得到一个元素
                // a.innerText = "<h1>hello</h1>" ; //修改内容
                // document.write( a.innerText ); //直接向网页写出数据
                // //innerText和innerHtml的区别？innerHtml能解析HTML标签
                // a.innerHtml = "<h1>hello</h1>" ; //修改内容
                // document.write( a.innerHtml ); //直接向网页写出数据
            }
        </script>
    </head>
    <body>
        <div name="d" onclick="method();">我是div1</div>
        <div name="d">我是div2</div>
        <div class="f">我是div3</div>
        <a href="#" id="a1">我是a1</a>
        <a href="#" class="f">我是a2</a>
        <p class="f">我是p1</p>
        <p>我是p2</p>
    </body>
</html>

三，Jquery

?1，概述

用来简化JS的写法，综合使用了HTML css js。

语法： $(选择器).事件

?2，使用步骤

先引入jQuery的文件：在HTML里使用script标签引入

使用jQuery的语法修饰网页的元素

?3，入门案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试 jq语法</title>
        <!-- 1. 引入jQuery文件 -->
        <script src="jquery-1.8.3.min.js"></script>
        <!-- 2. 在网页中嵌入JS代码 -->
        <script>
            // 点击p标签，修改文字
                function fun(){
                    //dom获取元素
                    var a = document.getElementsByTagName("p");//按照标签名获取元素
                    a[0].innerHTML="我变了。。。";//修改文字
                    //jq获取元素 -- jq语法：  $(选择器).事件
                    $("p").hide();//隐藏元素
                    $("p").text("我变了33333。。。");//修改文字
                }
        </script>
    </head>
    <body>
        <p onclick="fun();">你是p2</p>
    </body>
</html>

?4，jQuery的文档就绪

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试 jq的文档就绪</title>
        <!-- 1. 导入jq文件 -->
        <script src="jquery-1.8.3.min.js"></script>
        <script>
            //写法1的问题：想用的h1还没被加载，用时会报错
                    // 解决方案：写在h1加载之后 + 使用文档就绪函数(先导入jq)
            // document.getElementsByTagName("h1")[0].innerHTML="我变了。。";
            //写法2的：使用文档就绪函数(先导入jq)--是指文档都就绪了再用元素
            $(document).ready(function(){
                //document.getElementsByTagName("h1")[0].innerHTML="我变了。。";//js的dom写法
                $("h1").text("我变了。。");//jq的写法
            });
        </script>
    </head>
    <body>
        <h1>我是h1</h1>
    </body>
</html>

四，JQuery的语法

?1，选择器

标签名选择器： $(“div”) ? 选中div

id选择器： $("#d1") ? 选中id=d1的元素

class选择器： $(".cls") ? 选中class=cls的元素

属性选择器： $("[href]") ? 选中有href属性的元素

高级选择器： $(“div.d3”) ? 选中class=d3的div

?2,常用函数

text() html() val() — 获取或者设置值

hide() ? 隐藏

$(“p”).css(“background-color”,“yellow”); --设置样式

show()—显示

fadeIn() — 淡入

fadeOut() — 淡出

?3,常用事件

单击事件?click !!!

双击事件?dblclick

鼠标移入事件?mouseenter

鼠标移出事件?mousleave

鼠标悬停事件?hover

键盘事件?keydown keyup keypress

?4,练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试 jq的练习</title>
        <!-- 1. 引入jq -->
        <script src="jquery-1.8.3.min.js"></script>
        <!-- 2. 使用jq语法做练习 语法：$(选择器).事件 -->
        <script>
            // jq文档就绪函数：：保证元素都被加载过了，就可以放心使用了，不然会报错
            $(function(){
                // 练习1：单击id=d1的元素，隐藏id=p1的
                $("#d1").click(function(){
                    $("#p1").hide();
                })
            });
            $(function(){
                // 练习2：双击class="dd"的元素，给div加背景色
                $(".dd").dblclick(function(){
                    $("div").css("background-color","green");
                })
                // 练习3：鼠标进入 id="d1"的div，隐藏有href属性的元素
                $("#d1").mouseenter(function(){
                    $("[href]").hide();
                })
            });
        </script>
    </head>
    <body>
        <div id="d1">我是div1</div>
        <div class="dd">我是div2</div>
        <div>我是div3</div>
        <div class="dd">我是div4</div>
        <p id="p1">我是p1</p>
        <p>我是p2</p>
        <a class="dd">我是a1</a>
        <a href="#">我是a2</a>
        <a href="#">我是a3</a>
    </body>
</html>

总结

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注自学编程网的更多内容！

编程技巧

目录