3710人加入学习
(6人评价)
Web前端第三季(JavaScript)

制作完成于2018年6月14日

价格 免费

图片修改
ele.setAttribute("src","path")
ele.src="path";

超链接修改
ele.setAttribute("href","path")
ele.href="path"

复选框修改
ele.setAttribute("checked","true/false")
ele.checked=true/false

CSS样式修改
ele.style.color="red";
ele.style.fontSize="20px";

 

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>获取HTML元素</title>
</head>

<body>
    <div id="one">
        <span>DOM:文档对象模型(Document Object Model)
            简述:网页被加载的时候,浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象,来操作对应的标签的一些属性。
            总结:获取要操作的标签元素对应的对象,通过这个对象来操作这个元素。
        </span>
    </div>
    <div class="two">
        <span>DOM:文档对象模型(Document Object Model)
            简述:网页被加载的时候,浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象,来操作对应的标签的一些属性。
            总结:获取要操作的标签元素对应的对象,通过这个对象来操作这个元素。
        </span>
    </div>
    <div class="two" name="last">
        <span>DOM:文档对象模型(Document Object Model)
            简述:网页被加载的时候,浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象,来操作对应的标签的一些属性。
            总结:获取要操作的标签元素对应的对象,通过这个对象来操作这个元素。
        </span>
    </div>
    <p class="two" name="last" id="three">DOM树(图片):http://www.w3school.com.cn/js/js_htmldom.asp
        简述:网页就是有标签组成的,标签是层层包裹的(<font id="myfont" size="6">父标签和子标签</font>),最内存的标签包裹着内容。(文本或者图片)
    </p>
    <a href="#" id="mya">进入SiKi学院</a>
    <img src="img/1.png" id="myimg" />
    <input type="checkbox" id="mycheckbox" />
    <div id="mydiv">网页被加载的时候,浏览器会给网页上的每个标签创建这个标签对应的对象。</div>
</body>

</html>

<script type="text/javascript">
    // var person1; //undefined
    // var person = null;
    // person = new Object();
    // person.name = "siki";
    // person = null; //空对象,没有指向任何对象
//1,通过id
    // var div = document.getElementById("one");
    // console.log(div);

//2,通过tagname标签名,可通过对象调用
    // var div = document.getElementsByTagName("div");
    // var div = document.getElementById("one");
    // var arr1 = div.getElementsByTagName("span");
    // console.log(arr1);

//3,通过classname类名,可通过对象调用
    // var div = document.getElementById("one");
    // var arr1 = div.getElementsByClassName("two");
    // var arr1 = document.getElementsByClassName("two");
    // console.log(arr1);
//4,通过标签的name值来查找
    // var arr1 = document.getElementsByName("last");
    // console.log(arr1);

    // var p = document.getElementById("three");
    // p.innerText = "sikiedu.com";
    // p.innerHTML = "<font color='red'>siki</font>";

    // var myfont = document.getElementById("myfont");
    // myfont.setAttribute("color","green");
    // var size = myfont.getAttribute("size");
    // console.log(typeof(size));//string
    // console.log(size);//6
    // style="font-family:幼圆;"
    // myfont.setAttribute("style","font-family:幼圆;");

    var mya = document.getElementById("mya");
    var myimg = document.getElementById("myimg");
    var mycheckbox = document.getElementById("mycheckbox");

    // mya.setAttribute("href","http://www.sikiedu.com");
    mya.href="http://www.sikiedu.com";
    // myimg.setAttribute("src","img/2.jpg");
    myimg.src="img/2.jpg";
    // mycheckbox.setAttribute("checked","true");
    mycheckbox.checked = true;

    var mydiv = document.getElementById("mydiv");
    mydiv.style.fontSize = "20px";
    mydiv.style.color = "blueviolet";
</script>

 

[展开全文]
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>获取HTML元素</title>
</head>

<body>
    <div id="one">
        <span>DOM:文档对象模型(Document Object Model)
            简述:网页被加载的时候,浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象,来操作对应的标签的一些属性。
            总结:获取要操作的标签元素对应的对象,通过这个对象来操作这个元素。
        </span>
    </div>
    <div class="two">
        <span>DOM:文档对象模型(Document Object Model)
            简述:网页被加载的时候,浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象,来操作对应的标签的一些属性。
            总结:获取要操作的标签元素对应的对象,通过这个对象来操作这个元素。
        </span>
    </div>
    <div class="two" name="last">
        <span>DOM:文档对象模型(Document Object Model)
            简述:网页被加载的时候,浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象,来操作对应的标签的一些属性。
            总结:获取要操作的标签元素对应的对象,通过这个对象来操作这个元素。
        </span>
    </div>
    <p class="two" name="last" id="three">DOM树(图片):http://www.w3school.com.cn/js/js_htmldom.asp
        简述:网页就是有标签组成的,标签是层层包裹的(<font id="myfont" size="6">父标签和子标签</font>),最内存的标签包裹着内容。(文本或者图片)
    </p>
</body>

</html>

<script type="text/javascript">
    // var person1; //undefined
    // var person = null;
    // person = new Object();
    // person.name = "siki";
    // person = null; //空对象,没有指向任何对象
//1,通过id
    // var div = document.getElementById("one");
    // console.log(div);

//2,通过tagname标签名,可通过对象调用
    // var div = document.getElementsByTagName("div");
    // var div = document.getElementById("one");
    // var arr1 = div.getElementsByTagName("span");
    // console.log(arr1);

//3,通过classname类名,可通过对象调用
    // var div = document.getElementById("one");
    // var arr1 = div.getElementsByClassName("two");
    // var arr1 = document.getElementsByClassName("two");
    // console.log(arr1);
//4,通过标签的name值来查找
    // var arr1 = document.getElementsByName("last");
    // console.log(arr1);

    // var p = document.getElementById("three");
    // p.innerText = "sikiedu.com";
    // p.innerHTML = "<font color='red'>siki</font>";

    var myfont = document.getElementById("myfont");
    // myfont.setAttribute("color","green");
    // var size = myfont.getAttribute("size");
    // console.log(typeof(size));//string
    // console.log(size);//6
    // style="font-family:幼圆;"
    myfont.setAttribute("style","font-family:幼圆;");
</script>

获取内容
ele.innerHTML
ele.innerText
设置内容
ele.innerHTML = "xxx";
ele.innerText = "xxx";

获取属性的值
ele.getAttribute("name")  得到这个属性对应的值
设置属性的值
ele.setAttribute("name","value")
这里可以设置标签没有的属性,只是这个属性没有特定的作用而已。

[展开全文]

查找 HTML 元素
1、通过 id 找到 HTML 元素
document.getElementById("idname")
2、通过标签名找到 HTML 元素
document.getElementsByTagName("tagName")(全局搜索,整个网页文档)
tagObj.getElementsByTagName("tagName") 搜索tagObj的子元素(b不包括自身)
3、通过类名找到 HTML 元素
document.getElementsByClassName("className")
ele.getElementsByClassName("className")
4、通过名字查找HTML元素
document.getElementsByName("name")
这里的名字不是指标签的名字,是指的name属性的名字。
 

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>获取HTML元素</title>
</head>

<body>
    <div id="one">
        <span>DOM:文档对象模型(Document Object Model)
            简述:网页被加载的时候,浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象,来操作对应的标签的一些属性。
            总结:获取要操作的标签元素对应的对象,通过这个对象来操作这个元素。
        </span>
    </div>
    <div class="two">
        <span>DOM:文档对象模型(Document Object Model)
            简述:网页被加载的时候,浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象,来操作对应的标签的一些属性。
            总结:获取要操作的标签元素对应的对象,通过这个对象来操作这个元素。
        </span>
    </div>
    <div class="two" name="last">
        <span>DOM:文档对象模型(Document Object Model)
            简述:网页被加载的时候,浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象,来操作对应的标签的一些属性。
            总结:获取要操作的标签元素对应的对象,通过这个对象来操作这个元素。
        </span>
    </div>
    <p class="two" name="last">DOM树(图片):http://www.w3school.com.cn/js/js_htmldom.asp
        简述:网页就是有标签组成的,标签是层层包裹的(<font>父标签和子标签</font>),最内存的标签包裹着内容。(文本或者图片)
    </p>
</body>

</html>

<script type="text/javascript">
    // var person1; //undefined
    // var person = null;
    // person = new Object();
    // person.name = "siki";
    // person = null; //空对象,没有指向任何对象
//1,通过id
    // var div = document.getElementById("one");
    // console.log(div);

//2,通过tagname标签名,可通过对象调用
    // var div = document.getElementsByTagName("div");
    // var div = document.getElementById("one");
    // var arr1 = div.getElementsByTagName("span");
    // console.log(arr1);

//3,通过classname类名,可通过对象调用
    var div = document.getElementById("one");
    var arr1 = div.getElementsByClassName("two");
    // var arr1 = document.getElementsByClassName("two");
    // console.log(arr1);
//4,通过标签的name值来查找
    // var arr1 = document.getElementsByName("last");
    // console.log(arr1);
</script>

 

[展开全文]

查找 HTML 元素
1、通过 id 找到 HTML 元素
document.getElementById("idname")

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>获取HTML元素</title>
</head>

<body>
    <div id="one">
        <span>DOM:文档对象模型(Document Object Model)
            简述:网页被加载的时候,浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象,来操作对应的标签的一些属性。
            总结:获取要操作的标签元素对应的对象,通过这个对象来操作这个元素。
        </span>
    </div>
    <div>
        <span>DOM:文档对象模型(Document Object Model)
            简述:网页被加载的时候,浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象,来操作对应的标签的一些属性。
            总结:获取要操作的标签元素对应的对象,通过这个对象来操作这个元素。
        </span>
    </div>
    <div>
        <span>DOM:文档对象模型(Document Object Model)
            简述:网页被加载的时候,浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象,来操作对应的标签的一些属性。
            总结:获取要操作的标签元素对应的对象,通过这个对象来操作这个元素。
        </span>
    </div>
    <p>DOM树(图片):http://www.w3school.com.cn/js/js_htmldom.asp
        简述:网页就是有标签组成的,标签是层层包裹的(<font>父标签和子标签</font>),最内存的标签包裹着内容。(文本或者图片)
    </p>
</body>

</html>

<script type="text/javascript">
    // var person1; //undefined
    // var person = null;
    // person = new Object();
    // person.name = "siki";
    // person = null; //空对象,没有指向任何对象
    var div = document.getElementById("one");
    console.log(div);
</script>

 

[展开全文]

DOM树(图片):http://www.w3school.com.cn/js/js_htmldom.asp
简述:网页就是有标签组成的,标签是层层包裹的(父标签和子标签),最内存的标签包裹着内容。(文本或者图片)

DOM:文档对象模型(Document Object Model)
简述:网页被加载的时候,浏览器会给网页上的每个标签创建这个标签对应的对象。我们可以获取这个对象,来操作对应的标签的一些属性。
总结:获取要操作的标签元素对应的对象,通过这个对象来操作这个元素。

第一步:获取要操作的标签元素对应的对象(怎么获取)
第二部:通过这个对象来操作这个元素(怎么操作)
设置内容,设置属性,设置CSS样式

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>注册功能(表单校验)</title>

    <script type="text/javascript">
        function check() {
            //alert("check");
            var username = document.getElementById("username");
            var usernameMsg = document.getElementById("usernameMsg");
            var emailMsg = document.getElementById("emailMsg");
            var passwordMsg = document.getElementById("passwordMsg");

            // console.log(username);
            // console.log(username.value);
            var isPass = true;

            var length = username.value.length;
            if (length < 3 || length > 6) {
                // alert("用户名长度必须是3-6位");
                usernameMsg.innerText="用户名长度必须是3-6位";
                isPass = false;
            }else{
                usernameMsg.innerText="";
            }

            //正则表达式在线测试 https://c.runoob.com/front-end/854
            var email = document.getElementById("email").value;
            var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if (p.test(email) == false) {
                // alert("邮箱格式不正确!");
                emailMsg.innerText = "邮箱格式不正确!";
                isPass = false;
            }else{
                emailMsg.innerText = "";
            }

            var password = document.getElementById("password").value;
            var rePassword = document.getElementById("rePassword").value;
            if (password.length < 6 || password.length > 10) {
                // alert("密码必须在6-10位之间");
                passwordMsg.innerText = "密码必须在6-10位之间";
                isPass = false;
            } else {
                passwordMsg.innerText = "";
                if (password != rePassword) {
                    // alert("两次输入密码不一致");
                    passwordMsg.innerText = "两次输入密码不一致";
                    isPass = false;
                }else{
                    passwordMsg.innerText = "";
                }
            }

            // if (isPass == false) {
            //     return false;
            // } else {
            //     return true;
            // }
            return isPass;
        }
        // onblur失去焦点的时候调用
        function checkUsername(username){
            // var username = document.getElementById("username");
            var usernameMsg = document.getElementById("usernameMsg");
            
            var length = username.value.length;
            if (length < 3 || length > 6) {
                usernameMsg.innerText="用户名长度必须是3-6位";
            }else{
                usernameMsg.innerText="";
            }
        }
        function checkEmail(email){
            // var email = document.getElementById("email").value;
            var emailMsg = document.getElementById("emailMsg");
            var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if (p.test(email.value) == false) {
                emailMsg.innerText = "邮箱格式不正确!";
            }else{
                emailMsg.innerText = "";
            }
        }
        function checkPassword(){
            var passwordMsg = document.getElementById("passwordMsg");
            // var password = document.getElementById("password").value;
            var password = document.getElementById("password");
            var rePassword = document.getElementById("rePassword").value;
            if (password.value.length < 6 || password.value.length > 10) {
                passwordMsg.innerText = "密码必须在6-10位之间";
            } else {
                passwordMsg.innerText = "";
                if (password.value != rePassword) {
                    passwordMsg.innerText = "两次输入密码不一致";
                }else{
                    passwordMsg.innerText = "";
                }
            }
        }
    </script>
</head>

<body>
    <form action="register.jsp" onsubmit="return check()">
        <table border="1" width="500px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right">用户名:</td>
                <td align="left"><input type="text" id="username" onblur="checkUsername(this)" /><font color="red" id="usernameMsg"></font></td>
            </tr>
            <tr>
                <td align="right">邮箱:</td>
                <td><input type="text" id="email" onblur="checkEmail(this)" /><font color="red" id="emailMsg"></font></td>
            </tr>
            <tr>
                <td align="right">密码:</td>
                <td><input type="password" id="password" onblur="checkPassword()" /><font color="red" id="passwordMsg"></font></td>
            </tr>
            <tr>
                <td align="right">重复密码:</td>
                <td><input type="password" id="rePassword" onblur="checkPassword()" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册" /></td>
            </tr>
        </table>
    </form>
</body>

</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>注册功能(表单校验)</title>

    <script type="text/javascript">
        function check() {
            //alert("check");
            var username = document.getElementById("username");
            var usernameMsg = document.getElementById("usernameMsg");
            var emailMsg = document.getElementById("emailMsg");
            var passwordMsg = document.getElementById("passwordMsg");

            // console.log(username);
            // console.log(username.value);
            var isPass = true;

            var length = username.value.length;
            if (length < 3 || length > 6) {
                // alert("用户名长度必须是3-6位");
                usernameMsg.innerText="用户名长度必须是3-6位";
                isPass = false;
            }else{
                usernameMsg.innerText="";
            }

            //正则表达式在线测试 https://c.runoob.com/front-end/854
            var email = document.getElementById("email").value;
            var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if (p.test(email) == false) {
                // alert("邮箱格式不正确!");
                emailMsg.innerText = "邮箱格式不正确!";
                isPass = false;
            }else{
                emailMsg.innerText = "";
            }

            var password = document.getElementById("password").value;
            var rePassword = document.getElementById("rePassword").value;
            if (password.length < 6 || password.length > 10) {
                // alert("密码必须在6-10位之间");
                passwordMsg.innerText = "密码必须在6-10位之间";
                isPass = false;
            } else {
                passwordMsg.innerText = "";
                if (password != rePassword) {
                    // alert("两次输入密码不一致");
                    passwordMsg.innerText = "两次输入密码不一致";
                    isPass = false;
                }else{
                    passwordMsg.innerText = "";
                }
            }

            // if (isPass == false) {
            //     return false;
            // } else {
            //     return true;
            // }
            return isPass;
        }
    </script>
</head>

<body>
    <form action="register.jsp" onsubmit="return check()">
        <table border="1" width="500px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right">用户名:</td>
                <td align="left"><input type="text" id="username" /><font color="red" id="usernameMsg"></font></td>
            </tr>
            <tr>
                <td align="right">邮箱:</td>
                <td><input type="text" id="email" /><font color="red" id="emailMsg"></font></td>
            </tr>
            <tr>
                <td align="right">密码:</td>
                <td><input type="password" id="password" /><font color="red" id="passwordMsg"></font></td>
            </tr>
            <tr>
                <td align="right">重复密码:</td>
                <td><input type="password" id="rePassword" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册" /></td>
            </tr>
        </table>
    </form>
</body>

</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>注册功能(表单校验)</title>

    <script type="text/javascript">
        function check() {
            //alert("check");
            var username = document.getElementById("username");

            // console.log(username);
            // console.log(username.value);
            var isPass = true;

            var length = username.value.length;
            if (length < 3 || length > 6) {
                alert("用户名长度必须是3-6位");
                isPass = false;
            }

            //正则表达式在线测试 https://c.runoob.com/front-end/854
            var email = document.getElementById("email").value;
            var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if (p.test(email) == false) {
                alert("邮箱格式不正确!");
                isPass = false;
            }

            var password = document.getElementById("password").value;
            var rePassword = document.getElementById("rePassword").value;
            if (password.length < 6 || password.length > 10) {
                alert("密码必须在6-10位之间");
                isPass = false;
            } else {
                if (password != rePassword) {
                    alert("两次输入密码不一致");
                    isPass = false;
                }
            }

            // if (isPass == false) {
            //     return false;
            // } else {
            //     return true;
            // }
            return isPass;
        }
    </script>
</head>

<body>
    <form action="register.jsp" onsubmit="return check()">
        <table border="1" width="500px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right">用户名:</td>
                <td align="left"><input type="text" id="username" /></td>
            </tr>
            <tr>
                <td align="right">邮箱:</td>
                <td><input type="text" id="email" /></td>
            </tr>
            <tr>
                <td align="right">密码:</td>
                <td><input type="password" id="password" /></td>
            </tr>
            <tr>
                <td align="right">重复密码:</td>
                <td><input type="password" id="rePassword" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册" /></td>
            </tr>
        </table>
    </form>
</body>

</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>注册功能(表单校验)</title>
    <script type="text/javascript">
        function check(){
            // alert("check");
            var username = document.getElementById("username");
            
            // console.log(username);
            // console.log(username.value);
            var length = username.value.length;
            if(length<3 || length>6){
                alert("用户名长度必须是3-6位");
            }
            //正则表达式在线测试 https://c.runoob.com/front-end/854
            var email = document.getElementById("email").value;
            var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if(p.test(email) == false){
                alert("邮箱格式不正确!");
            }
            return false;
        }
    </script>
</head>
<body>
    <form action="register.jsp" onsubmit="return check()">
        <table border="1" width="500px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right">用户名:</td><td align="left"><input type="text" id="username" /></td>
            </tr>
            <tr>
                <td align="right">邮箱:</td><td><input type="text" id="email"/></td>
            </tr>
            <tr>
                <td align="right">密码:</td><td><input type="password" /></td>
            </tr>
            <tr>
                <td align="right">重复密码:</td><td><input type="password" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"/></td>
            </tr>
        </table>
    </form>
</body>
</html>

校验要求
用户名长度必须位于3到6位之间
密码必须是6到10为之间
密码和重复密码必须一样
邮箱格式 xxx@xxx    第二部分是域名结尾.com .org .cn .net等

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>注册功能(表单校验)</title>
    <script type="text/javascript">
        function check(){
            alert("check");
            var username = document.getElementById("username");
            console.log(username);
            console.log(username.value);
            return false;
        }
    </script>
</head>
<body>
    <form action="register.jsp" onsubmit="return check()">
        <table border="1" width="500px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right">用户名:</td><td align="left"><input type="text" id="username" /></td>
            </tr>
            <tr>
                <td align="right">邮箱:</td><td><input type="text" /></td>
            </tr>
            <tr>
                <td align="right">密码:</td><td><input type="password" /></td>
            </tr>
            <tr>
                <td align="right">重复密码:</td><td><input type="password" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"/></td>
            </tr>
        </table>
    </form>
</body>
</html>

1,怎么通过id获得某个元素
document.getElementById("idname")
2,怎么获得输入框输入的内容
ele.value
3,怎么修改元素的内容
ele.innerHTML
4,两种给出用户提示的方式
alert方式
网页上显示
5,校验的时机
onsubmit
onchange
onfocus onblur

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>注册功能(表单校验)</title>
    <script type="text/javascript">

    </script>
</head>
<body>
    <form>
        <table border="1" width="500px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right">用户名:</td><td align="left"><input type="text" /></td>
            </tr>
            <tr>
                <td align="right">邮箱:</td><td><input type="text" /></td>
            </tr>
            <tr>
                <td align="right">密码:</td><td><input type="password" /></td>
            </tr>
            <tr>
                <td align="right">重复密码:</td><td><input type="password" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"/></td>
            </tr>
        </table>
    </form>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>js对象</title>
    <script type="text/javascript">
        //key value 键值对
        // user1 = {
        //     name: "siki",
        //     age: 80,
        //     sex: "男"
        // };

        // var user1 = new Object();
        // user1.name="sikiedu";
        // user1.age=20;
        // user1.sex="男";
        // console.log(user1.name);//sikiedu
        // console.log(user1.age);//80
        // console.log(user1.sex);//男

        // user1.name = "小明";
        // console.log(user1.name);//小明

        user1 = {
            name:"siki",
            age:80,
            sex:"男"
        };
        user2 = {
            name:"蓝猫",
            age:10,
            sex:"女"
        };

        function user(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
            // this.show = show;
            // function show(){
            //     console.log(this.name+":"+this.age+":"+this.sex);
            // }
            this.show = function(){
                console.log(this.name+":"+this.age+":"+this.sex);
            }
            this.setAge = function(age){
                this.age=age;
            }
        }
        user3 = new user("小红",20,"女");
        user4 = new user("李白",40,"男");
        // user4.setName = function(name){
        //     this.name = name;
        // }
        // console.log(user3.name);//小红
        // console.log(user3.age);//20
        // console.log(user3.sex);//女
        // user3.show();//小红:20:女
        // user4.setAge(18);
        // user4.setName("小乔");
        // user4.show();

        // console.log(user3.name);//小红
        // console.log(user3["name"]);//小红

        // for in 循环
        for(key in user3){
            console.log(key + ":" + user3[key]);
        }
    </script>
</head>
<body>

</body>
</html>

JavaScript对象
1、什么是JavaScript对象
什么是键值对?key value一对、
2、创建JavaScript对象
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
3、创建构造方法
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
4、添加普通方法(方法一)
person.changeLastname=function (name){
this.lastname=name;
}
5、添加普通方法(方法二)
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
6、访问对象的属性
objectName.propertyName
7、访问对象的方法
objectName.methodName()

for in循环遍历对象
var student={
name:"siki",
age:12,
sex:"男"
}
for(key in student){
    console.log(student[key]);
}

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>js对象</title>
    <script type="text/javascript">
        //key value 键值对
        // user1 = {
        //     name: "siki",
        //     age: 80,
        //     sex: "男"
        // };

        // var user1 = new Object();
        // user1.name="sikiedu";
        // user1.age=20;
        // user1.sex="男";
        // console.log(user1.name);//sikiedu
        // console.log(user1.age);//80
        // console.log(user1.sex);//男

        // user1.name = "小明";
        // console.log(user1.name);//小明

        user1 = {
            name:"siki",
            age:80,
            sex:"男"
        };
        user2 = {
            name:"蓝猫",
            age:10,
            sex:"女"
        };

        function user(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        user3 = new user("小红",20,"女");
        user4 = new user("李白",40,"男");
        console.log(user3.name);//小红
        console.log(user3.age);//20
        console.log(user3.sex);//女
    </script>
</head>
<body>

</body>
</html>

3、创建构造方法
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>js对象</title>
    <script type="text/javascript">
        //key value 键值对
        // user1 = {
        //     name: "siki",
        //     age: 80,
        //     sex: "男"
        // };
        var user1 = new Object();
        user1.name="sikiedu";
        user1.age=20;
        user1.sex="男";
        console.log(user1.name);//sikiedu
        console.log(user1.age);//80
        console.log(user1.sex);//男

        user1.name = "小明";
        console.log(user1.name);//小明
    </script>
</head>
<body>

</body>
</html>

JavaScript对象
1、什么是JavaScript对象
什么是键值对?key value一对、
2、创建JavaScript对象
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>正则表达式2</title>
    <script type="text/javascript">
        // var p1 = /^a/; //匹配以a开头
        // console.log(p1.test("a"));//true
        // console.log(p1.test("abc"));//true
        // console.log(p1.test("bc"));//false
        // console.log(p1.test("bac"));//false

        // var p2 = /a$/; //匹配以a结尾
        // console.log(p2.test("abca"));//true

        // var p2 = /^a$/; //匹配以a开头,以a结尾
        // console.log(p2.test("ab"));//false
        // console.log(p2.test("b"));//false
        // console.log(p2.test("aaa"));//false
        // console.log(p2.test("a"));//true
        //javascript 正则表达式

        // var p4 = /[1234]/;
        // console.log(p4.test("11"));//true
        // console.log(p4.test("115"));//true
        // console.log(p4.test("1"));//true
        // console.log(p4.test("2"));//true
        // console.log(p4.test("3"));//true
        // console.log(p4.test("4"));//true
        // console.log(p4.test("5"));//false

        // var p4 = /^[1234]$/;
        // console.log(p4.test("11"));//false // /^[1234]$/ 是一位数字
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//true
        // console.log(p4.test("2"));//true
        // console.log(p4.test("3"));//true
        // console.log(p4.test("4"));//true
        // console.log(p4.test("5"));//false

        // var p4 = /^[1234][1234]$/; // 两位数字
        // console.log(p4.test("11"));//true
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//false
        // console.log(p4.test("2"));//false
        // console.log(p4.test("3"));//false
        // console.log(p4.test("4"));//false
        // console.log(p4.test("5"));//false

        // var p4 = /^[1-4]$/; //[1234] = [1-4]
        // console.log(p4.test("11"));//false
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//true
        // console.log(p4.test("2"));//true
        // console.log(p4.test("3"));//true
        // console.log(p4.test("4"));//true
        // console.log(p4.test("5"));//false

        // var p4 = /[abc]/;
        // console.log(p4.test("11"));//false
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//false
        // console.log(p4.test("2"));//false
        // console.log(p4.test("3"));//false
        // console.log(p4.test("4"));//false
        // console.log(p4.test("5"));//false

        // var p4 = /[abc]/;
        // var p4 = /[a-z]/;
        // console.log(p4.test("a"));//true
        // console.log(p4.test("b"));//true
        // console.log(p4.test("1"));//false
        // console.log(p4.test("2"));//false
        // console.log(p4.test("3"));//false
        // console.log(p4.test("4"));//false
        // console.log(p4.test("5"));//false

        // var p5 = /\d/;//[0-9] // \d 代表数字
        // console.log(p5.test("1"));//true
        // console.log(p5.test("3"));//true
        // console.log(p5.test("0"));//true
        // console.log(p5.test("a"));//false

        //正整数
        // 1-9 0-9
        // var p6 =/^[1-9]\d*$/;
        // console.log(p6.test("0")); //false
        // console.log(p6.test("5")); //true
        // console.log(p6.test("21")); //true
        // console.log(p6.test("430")); //true
        // console.log(p6.test("-430")); //false

        // var p7 =/a*/;
        // console.log(p7.test("a"));//true
        // console.log(p7.test("0"));//true
        // console.log(p7.test("aa"));//true
        // console.log(p7.test("aaa"));//true
        // console.log(p7.test("b"));//true

        // var p7 =/^a*/;
        // console.log(p7.test("a"));//true
        // console.log(p7.test("0"));//true
        // console.log(p7.test("aa"));//true
        // console.log(p7.test("aaa"));//true
        // console.log(p7.test("b"));//true

        // * + 都是量词
        // var p7 =/^a+/;
        // console.log(p7.test("a"));//true
        // console.log(p7.test("0"));//false
        // console.log(p7.test("aa"));//true
        // console.log(p7.test("aaa"));//true
        // console.log(p7.test("b"));//false

        // var p8 = /^[1-9][0-9]+$/;
        // console.log(p8.test("10"));//true
        // console.log(p8.test("804632564"));//true
        // console.log(p8.test("0"));//false
        // console.log(p8.test("089"));//false
        // console.log(p8.test("100"));//true

        //xxx@xx.com  xx.org  xx.net
        var p9 = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
        console.log(p9.test("xxx@qq.com"));//true
        console.log(p9.test("xxx@qq.net"));//true
        console.log(p9.test("xxx@qq.cn"));//true
        console.log(p9.test("@qq.cn"));//false
        console.log(p9.test("123@baidu.com"));//true
        console.log(p9.test("123@baidu.xcvxcvds"));//true
        console.log(p9.test("&123@baidu.xcvxcvds"));//false
    </script>
</head>
<body>
    
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>正则表达式2</title>
    <script type="text/javascript">
        // var p1 = /^a/; //匹配以a开头
        // console.log(p1.test("a"));//true
        // console.log(p1.test("abc"));//true
        // console.log(p1.test("bc"));//false
        // console.log(p1.test("bac"));//false

        // var p2 = /a$/; //匹配以a结尾
        // console.log(p2.test("abca"));//true

        // var p2 = /^a$/; //匹配以a开头,以a结尾
        // console.log(p2.test("ab"));//false
        // console.log(p2.test("b"));//false
        // console.log(p2.test("aaa"));//false
        // console.log(p2.test("a"));//true
        //javascript 正则表达式

        // var p4 = /[1234]/;
        // console.log(p4.test("11"));//true
        // console.log(p4.test("115"));//true
        // console.log(p4.test("1"));//true
        // console.log(p4.test("2"));//true
        // console.log(p4.test("3"));//true
        // console.log(p4.test("4"));//true
        // console.log(p4.test("5"));//false

        // var p4 = /^[1234]$/;
        // console.log(p4.test("11"));//false // /^[1234]$/ 是一位数字
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//true
        // console.log(p4.test("2"));//true
        // console.log(p4.test("3"));//true
        // console.log(p4.test("4"));//true
        // console.log(p4.test("5"));//false

        // var p4 = /^[1234][1234]$/; // 两位数字
        // console.log(p4.test("11"));//true
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//false
        // console.log(p4.test("2"));//false
        // console.log(p4.test("3"));//false
        // console.log(p4.test("4"));//false
        // console.log(p4.test("5"));//false

        // var p4 = /^[1-4]$/; //[1234] = [1-4]
        // console.log(p4.test("11"));//false
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//true
        // console.log(p4.test("2"));//true
        // console.log(p4.test("3"));//true
        // console.log(p4.test("4"));//true
        // console.log(p4.test("5"));//false

        // var p4 = /[abc]/;
        // console.log(p4.test("11"));//false
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//false
        // console.log(p4.test("2"));//false
        // console.log(p4.test("3"));//false
        // console.log(p4.test("4"));//false
        // console.log(p4.test("5"));//false

        // var p4 = /[abc]/;
        // var p4 = /[a-z]/;
        // console.log(p4.test("a"));//true
        // console.log(p4.test("b"));//true
        // console.log(p4.test("1"));//false
        // console.log(p4.test("2"));//false
        // console.log(p4.test("3"));//false
        // console.log(p4.test("4"));//false
        // console.log(p4.test("5"));//false

        // var p5 = /\d/;//[0-9] // \d 代表数字
        // console.log(p5.test("1"));//true
        // console.log(p5.test("3"));//true
        // console.log(p5.test("0"));//true
        // console.log(p5.test("a"));//false

        //正整数
        // 1-9 0-9
        // var p6 =/^[1-9]\d*$/;
        // console.log(p6.test("0")); //false
        // console.log(p6.test("5")); //true
        // console.log(p6.test("21")); //true
        // console.log(p6.test("430")); //true
        // console.log(p6.test("-430")); //false

        // var p7 =/a*/;
        // console.log(p7.test("a"));//true
        // console.log(p7.test("0"));//true
        // console.log(p7.test("aa"));//true
        // console.log(p7.test("aaa"));//true
        // console.log(p7.test("b"));//true

        // var p7 =/^a*/;
        // console.log(p7.test("a"));//true
        // console.log(p7.test("0"));//true
        // console.log(p7.test("aa"));//true
        // console.log(p7.test("aaa"));//true
        // console.log(p7.test("b"));//true

        // * + 都是量词
        var p7 =/^a+/;
        console.log(p7.test("a"));//true
        console.log(p7.test("0"));//false
        console.log(p7.test("aa"));//true
        console.log(p7.test("aaa"));//true
        console.log(p7.test("b"));//false

    </script>
</head>
<body>
    
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>正则表达式2</title>
    <script type="text/javascript">
        // var p1 = /^a/; //匹配以a开头
        // console.log(p1.test("a"));//true
        // console.log(p1.test("abc"));//true
        // console.log(p1.test("bc"));//false
        // console.log(p1.test("bac"));//false

        // var p2 = /a$/; //匹配以a结尾
        // console.log(p2.test("abca"));//true

        var p2 = /^a$/; //匹配以a开头,以a结尾
        console.log(p2.test("ab"));//false
        console.log(p2.test("b"));//false
        console.log(p2.test("aaa"));//false
        console.log(p2.test("a"));//true
        //javascript 正则表达式
    </script>
</head>
<body>
    
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script type="text/javascript">
        // var p1 = /xxxx/;
        //规则1  全部是字母的字符串    abc ab12 ab_ 123_ 43ew2 sdferjl
        //规则2  全部是数字的字符串    213 sdfk1 23434c adf_ 234
        //规则3  以数字开头,长度为4的字符串 123_
        //规则4  第一个字母是a,第二个字母是b,没有其他字符串 ab

        //搜索 替换 判断
        // /正则表达式主体/修饰符
        // i忽略大小写 g全局匹配 m //i不区分大小写 //g全局匹配
        var p1 = /ab/ig; //ab Ab aB AB
        var str = "hello Abworld sikiedu.com ab";
        // var index = str.search(p1);
        // console.log(index); //6

        // var index = str.search("Ab");
        // console.log(index); //6

        // var index = str.search("ab");//indexOf()
        // console.log(index);//26

        // var str2 = str.replace("Ab","----");
        // console.log(str2); //hello ----world sikiedu.com ab

        var str2 = str.replace(p1,"----");//p1=/ab/ig
        console.log(str2); //hello ----world sikiedu.com ----
    </script>
</head>
<body>
    
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script type="text/javascript">
        var p1 = /xxxx/;
        //规则1  全部是字母的字符串    abc ab12 ab_ 123_ 43ew2 sdferjl
        //规则2  全部是数字的字符串    213 sdfk1 23434c adf_ 234
        //规则3  以数字开头,长度为4的字符串 123_
        //规则4  第一个字母是a,第二个字母是b,没有其他字符串 ab

    </script>
</head>
<body>
    
</body>
</html>

正则表达式
    正则表达式描述了一个字符串的书写规则
        正则表达式是一个字符串,这个字符串按照正则表达式的语法来进行书写
        全部是字母的字符串
        全部是数字的字符串
        以数字开头,长度为4的字符串
        第一字母是a第二个字母是b,没有其他字符的字符串

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>字符串string</title>
    <script type="text/javascript">
        // var str = "heLLO world";//子串
        // str = str + "234234123";//heLLO world234234123
        //1,取得长度
        // console.log(str.length);
        // //2,利用索引访问单个字符
        // console.log(str[0]);
        // console.log(str[1]);
        // console.log(str[2]);
        // //str[5] = '-'; //可以获取对应的字符,但是不能修改。
        // console.log(str);
        // // 0 1 2 3 4 5 ... str.length-1
        // for(var i = 0;i<str.length;i++){
        //     console.log(str[i]);
        // }

        // var str2 = str.toUpperCase();
        // console.log(str);
        // console.log(str2);

        // var str3 = str.toLowerCase();
        // console.log(str3);

        // var index = str.indexOf("",4);//如果子串存在,返回子串首字母索引;如果子串不存在,返回-1;如果子串为空,返回0
        // console.log(index);

        // var str2 = str + "sikiedu.com";
        // console.log(str2);

        // var str3 = str.concat("sikiedu.com","!");
        // console.log(str3);

        // var str = "heLLO world";
        // var str2 = str.slice(2,5);
        // var str3 = str.slice(2);
        // var str4 = str.slice(5,3);
        // var str5 = str.slice(2,40);
        // var str6 = str.slice(-4,-2);
        // console.log(str2);//LLO
        // console.log(str3);//LLO world
        // console.log(str4);//""
        // console.log(str5);//LLO world
        // console.log(str6);//or

        // var str = "heLLO world";
        // var str2 = str.subsring(2,5);
        // var str3 = str.subsring(2);
        // var str4 = str.substring(5,2);//LLO
        // var str5 = str.subsring(-4,-2);//str.subsring(0,0); //""
        // console.log(str2);
        // console.log(str3);
        // console.log(str4);
        // console.log(str5);

        // var str = "heLLO world";
        // var str2 = str.substr(2,3);//LLO
        // var str3 = str.substr(2);//LLO world
        // console.log(str2);
        // console.log(str3);

        // var str = "heLLO,world,javascript,js";
        // var arr1 = str.split(","); //['heLLO', 'world', 'javascript', 'js']
        // console.log(arr1);

        // var str = "heLLO,world,javascript,js";
        // var arr1 = str.split(",",3); //['heLLO', 'world', 'javascript']
        // console.log(arr1);

        var username = "  siki edu ";
        var newStr = username.trim();
        console.log(username);
        console.log(newStr);
    </script>
</head>
<body>
    
</body>
</html>

str.subsring()

str.substr()

str.split()

str.trim()

[展开全文]

授课教师

SiKi学院老师

课程特色

下载资料(1)
视频(60)