程序员

jQuery 第一节课

2019-03-11  本文已影响5人  Vic_123

<!DOCTYPE html>

<html lang="en">

    <meta charset="UTF-8">

    <title>第一节课

    <script src="../jquery-1.12.4.js">

        window.onload =function () {

alert("first hello");

        }

window.onload =function () {

alert("second hello");

        }

window.onload =function () {

alert("trind hello");

        }

$(function () {

//编写jQuery相关代码

            alert("hello xyw");

            $("#login").click(function () {

var $name=$("#name").val();

                var $pwd=$("#pwd").val();

                if($name.length<1&&$pwd.length<1){

alert("不能为空");

                }

console.log($name);

                console.log($pwd);

                alert($name);

                alert($pwd);

            })

// //课堂笔记

// jQuery与js区别:jQuery是js的一个拓展,封装,让js更好用

//

// write less,do more

//

// 执行顺序:jq>js

//

// jq  1.6版本是其功能改变跨度的区分点

//

// 文字与图片会耗流量;

//

// js中的加载函数只用一个,否则后面的会覆盖前面的

// jq与其相反

// jQuery的优势:(12点)

// 开源    轻量级    强大的选择器    DOM操作  链式操作(即简单代码可以一行连写)

// 浏览器兼容完好  完善的Ajax  丰富的插件  完善的文档

//行为层与结构层分离

//不污染顶级变量  可靠的事件处理机制

        });

        function getValues() {

//jQuery写法

            var $name=$("#name").val();

            var $pwd=$("#pwd").val();

            if($name.length<1&&$pwd<1){

alert("不能为空");

            }

console.log($name);

            console.log($pwd);

            alert($name);

            alert($pwd);

            //原生js(即DOM对象)

            var name=document.getElementById("name").value();

            alert(name);

            //jQuery转换为DOM对象

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

            var name=$name[0];

            alert(name.val());

            // 第二种:.get[]

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

            var name=$name.get[0];

            alert(name.val());

            //DOM对象转换为jQuery

            var name=document.getElementById("name");

            var $name=$(name);

            alert($name);

        }

姓名:

<input type="text" id="name">

密码:

<input type="text" id="pwd">

<input type="button" id="login" value="登录" >//onclick="getValues()"

</html>

上一篇下一篇

猜你喜欢

热点阅读