4）jQuery的基础部分和js的部分

1：js：

包含三部分：

ESMAScript：基础语法

Array（）

索引 、length、push（）、pop（）

DOM：

获取DOM的三种方式：

（1）Id

（2）Class

（3）标签获取 TayName

BOM：

入口函数：

等待这文档，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box"></div>
<script>
    window.onload=function () {
        alert(2)
    }
//    有覆盖现象
        window.onload=function () {
        alert(3)  
    }
</script>

</body>
</html>

这里的var可以变量提升：

Var =i;

I = 0; \可以写成var i = 0；

<script>
    window.onload=function () {
        alert(2)
    }
var oBoxs = document.getElementsByClassName('box');
    console.log(oBoxs);

for (var i = 0;i < oBoxs.length; i++){
        oBoxs[i].onclick = function () {
            console.log(i);
            console.log(this);
            console.log(this.innerText);
        }
    }
</script>

总结：

Var 声明的变量   存在变量提升

Let声明的变量    是块级作用域

Const 声明的是常量  一旦声明变量 不可改变

DOM的创建和添加：

DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM可以做什么

找对象（元素节点）

设置元素的属性值

设置元素的样式

动态创建和删除元素

事件的触发响应：事件源、事件、事件的驱动程序

操作元素节点，必须首先找到该节点。有三种方式可以获取DOM节点：

var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s

var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

 

 

创建节点

格式如下：

新的标签(元素节点) = document.createElement("标签名");

比如，如果我们想创建一个li标签，或者是创建一个不存在的adbc标签，可以这样做：

<script type="text/javascript">

var a1 = document.createElement("li");   //创建一个li标签

var a2 = document.createElement("adbc");   //创建一个不存在的标签

console.log(a1);

console.log(a2);

console.log(typeof a1);

console.log(typeof a2);</script>

插入节点

插入节点有两种方式，它们的含义是不同的。

方式1：

父节点.appendChild(新的子节点);

解释：父节点的最后插入一个新的子节点。

方式2：

父节点.insertBefore(新的子节点,作为参考的子节点);

解释：

· 在参考节点前插入一个新的节点。

· 如果参考节点为null，那么他将在父节点最后插入一个子节点。

删除节点

格式如下：

父节点.removeChild(子节点);

解释：用父节点删除子节点。必须要指定是删除哪个子节点。

如果我想删除自己这个节点，可以这么做：

node1.parentNode.removeChild(node1);

复制节点（克隆节点）

格式如下：

要复制的节点.cloneNode();       //括号里不带参数和带参数false，效果是一样的。

要复制的节点.cloneNode(true);

括号里带不带参数，效果是不同的。解释如下：

不带参数/带参数false：只复制节点本身，不复制子节点。

带参数true：既复制节点本身，也复制其所有的子节点。

设置节点的属性

我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。

我们就统一拿下面这个标签来举例：

<img src="images/1.jpg" title="美女图片" alt="地铁一瞥" id="a1">

下面分别介绍。

1、获取节点的属性值

方式1：

元素节点.属性;

元素节点[属性];

举例：（获取节点的属性值）

<body><img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">

<script type="text/javascript">

var myNode = document.getElementsByTagName("img")[0];

console.log(myNode.src);

console.log(myNode.className);    //注意，是className，不是class    console.log(myNode.title);

console.log("------------");

console.log(myNode["src"]);

console.log(myNode["className"]); //注意，是className，不是class    console.log(myNode["title"]);</script></body>

方式2：（推荐）

素节点.getAttribute("属性名称");

例子：

console.log(myNode.getAttribute("src"));

console.log(myNode.getAttribute("class"));   //注意是class，不是className

console.log(myNode.getAttribute("title"));

删除节点的属性

格式：

元素节点.removeAttribute(属性名);

举例：（删除节点的属性）

myNode.removeAttribute("class");

myNode.removeAttribute("id");

举例：

留言板：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>留言板</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .close{
                display: inline-block;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                cursor: pointer;
                background-color: rgba(0,0,0,.1);
                margin-left: 20px;
            }
        </style>
    </head>
    <body>
        <h1>简易留言板</h1>
        <div id="box">
            <!--<ul>

</ul>-->

</div>
        <textarea id="msg"></textarea>
        <input type="button" id="btn" value="留言"/>
        <button onclick="sum()">统计</button>
    </body>
    <script type="text/javascript">

// 0 将ul标签添加到div#box标签中
        var oUl = document.createElement('ul');
        var oBox = document.getElementById('box');
        oBox.appendChild(oUl);

var oBtn = document.getElementById('btn');
        var oMsg = document.getElementById('msg')
        // 控制留言的总数量
        var count = 0;
        oBtn.onclick = function(){

// 点击留言按钮事件操作
            // 1.创建li标签
            var oLi = document.createElement('li');
            //2.设置内容
            oLi.innerHTML = oMsg.value + "<span>X</span>"

// 3.如果想在插入的第一个li获取的前面继续添加li标签
            //3.1获取li标签
            var olis = document.getElementsByTagName('li');
             //3.2 如果是第一次添加的li标签，则直接添加到ul的后面
            if(olis.length == 0){
                oUl.appendChild(oLi);
                count++;

}else{
                // 3.3 如果不是第一次添加的li标签，则插入到第一个li标签的前面
                oUl.insertBefore(oLi,olis[0]);
                count++;
            }
            // 4.添加完成之后 清空textarea的值
            oMsg.value = '';

// 5.点击X的时候删除当前的一条数据
            //5.1先获取所有的X
            var oSpans = document.getElementsByTagName('span');

// 5.2for循环 对所有的X添加点击事件
            for(var i = 0; i< oSpans.length; i++){
                oSpans[i].onclick  = function(){
                    // 5.3 移除当前的li标签
                    oUl.removeChild(this.parentNode)
                    count--;
                }
            }

}

function sum(){
            alert('一共发布了'+count+'条留言');

}
    </script>
</html>

结果：

使用js模拟选择器中的hover

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        button {
            margin: 10px;
            width: 100px;
            height: 40px;
            cursor: pointer;
        }
        .current {
            background-color: red;
        }
    </style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
    //需求：鼠标放到哪个button上，改button变成×××背景（添加类）

var btnArr = document.getElementsByTagName("button");
    //绑定事件
    for(var i=0;i<btnArr.length;i++){   //要为每一个按钮绑定事件，所以用到了for循环
        btnArr[i].onmouseover = function () {
            //【重要】排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
            //排他思想和for循环连用
            for(var j=0;j<btnArr.length;j++){
                btnArr[j].className = "";
            }
            this.className = "current";  //【重要】核心代码
        }
    }

//鼠标离开current时，还原背景色
    for(var i=0;i<btnArr.length;i++){   //要为每一个按钮绑定事件，所以用到了for循环
        btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原
            this.className = "";
        }
    }

</script>

</body>

</html>

结果：

创建对象的几种常用方式

1.使用Object或对象字面量创建对象

2.工厂模式创建对象

3.构造函数模式创建对象

4.原型模式创建对象

使用Object或对象字面量创建对象

JS中最基本创建对象的方式：

var student = new Object();

student.name = "easy";

student.age = "20";

当我们要创建同类的student1，student2，…，studentn时，我们不得不将以上的代码重复n次....

var sutdent1 = {

name : "easy1",

age : 20

};

var sutdent2 = {

name : "easy2",

age : 20

};

...

var sutdentn = {

name : "easyn",

age : 20

};

<script>
    var person ={
        name: '张三',
        age : 18,
        fav:function () {
            alert(this.name)
        }
    };
    console.log(person.fav())
</script>

使用构造函数的方式创建对象：

工厂模式创建对象

JS中没有类的概念，那么我们不妨就使用一种函数将以上对象创建过程封装起来以便于重复调用，同时可以给出特定接口来初始化对象

function createStudent(name, age) {

var obj = new Object();

obj.name = name;

obj.age = age;

return obj;

}

var student1 = createStudent("easy1", 20);

var student2 = createStudent("easy2", 20);

...

var studentn = createStudent("easyn", 20);

同时又定义了”生产”水果对象的createFruit()函数：

function createFruit(name, color) {

var obj = new Object();

obj.name = name;

obj.color = color;

return obj;

}

var v1 = createStudent("easy1", 20);

var v2 = createFruit("apple", "green");

<script>
function Student(name,age) {
    this.name = name;
    this.age = age;
    this.alertName = function () {
        alert(this.name)
    }
}
function Fruit(name,color) {
    this.name = name;
    this.color = color;
    this.alertName = function () {
        alert(this.name)
    }
}
所有的类都集成object
var s = new Student('张三',17)
var f = new Fruit('哈哈','green')
console.log(s instanceof Student)
console.log(f instanceof Fruit)
</script>

Python和js的对比：

Es6中的函数可以写成箭头函数

举例对比：

在js中prototype原型，是每个对象的父类

原型的模式创建对象

原型链甚至原型继承，是整个JS中最难的一部分也是最不好理解的一部分，在这里由于我们课程定位的原因，如果对js有兴趣的同学，可以去查阅一下相关JS原型的一些知识点。更加有助于你以后前端JS的面试。

function Student() {

this.name = 'easy';

this.age = 20;

}

Student.prototype.alertName = function(){

alert(this.name);

};

var stu1 = new Student();var stu2 = new Student();

stu1.alertName();  //easy

stu2.alertName();  //easy

alert(stu1.alertName == stu2.alertName);  //true 二者共享同一函数

Es6中的文件引入：

Import  aaa   from  xxx

前端三大工具：

Grunt

Glup

Webpack

作用：

文件压缩、打包

定时器：

在js中的定时器分两种：1、setTimeout() 2、setInterval()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id = box style="width: 100px;height: 100px;background-color: red;">

</div>
<script>
    var a = 0;
    var oDiv = document.getElementById('box')
    setInterval(function () {
        a++;
        oDiv.style.marginLeft = a+'px'
        console.log(a)
    },10)
</script>
</body>
</html>

优化后的；有定时器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id = box style="width: 100px;height: 100px;background-color: red;">
</div>
<button id = 'btn'>停止</button>
<script>
var a =0;
function $(id) {
    return document.getElementById(id);
}
var oDiv = document.getElementById('box');
var oBtn = document.getElementById('btn');
var c = setInterval(function () {
    a +=3;
    $('box').style.marginLeft = a+'px';
    console.log(a);
},50)
    $('btn').onclick = function () {
        clearInterval(c)
    }
</script>
</body>
</html>

数据异步机制：

不等待功能

setTimeout(function () {
    alert(2);
    console.log(2222);
},2000)
console.log(1111);

定时器：

<body>
<script>
    setTimeout(function () {
        window.open('http://www.baidu.com');
    },2000);
</script>
</body>

<script>
    setTimeout(function () {
        window.open('http://www.baidu.com','_self');
    },2000);
</script>
</body>

自动刷新：

全局刷新：可以测试使用

<script>
    console.log(1111)
    setTimeout(function () {
        window.location.reload();
    },2000);
</script>

局部刷新：

必须使用ajax技术

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.onload = function (argument) {
    console.log(1111)
    setTimeout(function () {
        console.log(window.navigator)
    },2000);
    }

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

jQuery安装使用：

安装jQuery：

使用jquery

1）先引入jquery

2）入口函数 function（）{}

3）Js对象和jquery对象的转换   js => jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--先引入包-->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>

<script>
    console.log($)
//    文档加载完成之后
    $(document).ready(function () {
        alert(2)
    });
    $(document).ready(function () {
        alert(23)
    });
</script>
</body>
</html>

不会出现js的覆盖现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
.box{
    width: 100px;
    height: 100px;
    background-color: red;
}
    </style>
</head>
<body>
<div class="box"></div>
<!--先引入包-->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>

<script>
$(function () {
    $('.box').click(function () {
        $('.box').css('backgroundColor','yellow')
    })
})
</script>
</body>
</html>

点击一下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
.box{
    width: 100px;
    height: 100px;
    background-color: red;
}
    </style>
</head>
<body>
<div class="box"></div>
<!--先引入包-->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>

<script>
$(function () {
    $('.box').click(function () {
//        $('.box').css('backgroundColor','yellow')
        $('.box').css({
            'background-color':'green',
            'width':'300px'
        })
    })
})
</script>
</body>
</html>

Jquery 选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
    <ul class="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
    </ul>
        <ul class="list2">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
    </ul>
</div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>

<script>
    $(function () {
        console.log($('.box').find('ul.list2,ul.list'));
    })
</script>
</body>
</html>

效果：

$(function () {
    console.log($('.box').children('ul.list2,ul.list'));
})

Find是获取的子孙后代   、  children获取的是亲儿子

Jquery动画效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            display: none;
            width: 100px;
            height: 100px;
            background-color:red;
        }
    </style>
</head>
<body>
<button id="btn">显示</button>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(function () {
        $('#btn').click(function(event) {
            $('.box').show();
        })
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            display: none;
            width: 100px;
            height: 100px;
            background-color:red;
        }
    </style>
</head>
<body>
<button id="btn">显示</button>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(function () {
        var isShow = true;
        $('#btn').click(function(event) {
            if (isShow){
                $('.box').show();
                isShow = false
                $(this).text('隐藏');
            }else {
                $('.box').hide();
                isShow = true;
                $(this).text('显示');
            }
        })
    })
</script>
</body>
</html>

可以加上时间：

<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(function () {
        var isShow = true;
        $('#btn').click(function(event) {
            if (isShow){
                $('.box').show(3000);
                isShow = false
                $(this).text('隐藏');
            }else {
                $('.box').hide(3000);
                isShow = true;
                $(this).text('显示');
            }
        })
    })
</script>

防止出现延迟现象，都是快速的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            display: none;
            width: 100px;
            height: 100px;
            background-color:red;
        }
    </style>
</head>
<body>
<button id="btn">显示</button>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(function () {
        var isShow = true;
        $('#btn').click(function(event) {
            $('.box').stop().toggle('slow');
        })
    })
</script>
</body>
</html>

卷帘门效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            display: none;
            width: 100px;
            height: 100px;
            background-color:red;
        }
    </style>
</head>
<body>
<button id="btn">显示</button>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(function () {
        var isShow = true;
        $('#btn').click(function(event) {
            $('.box').slideUp(300,function () {
                
            })
            $('.box').slideDown(300,function () {

})
        })
    })
</script>
</body>
</html>

淡入淡出：效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            display: none;
            width: 100px;
            height: 100px;
            background-color:red;
        }
    </style>
</head>
<body>
<button id="btn">显示</button>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(function () {
        var isShow = true;
        $('#btn').click(function(event) {
            $('.box').fadeToggle(1000,function () {
                
            })
        })
    })
</script>
</body>
</html>

自定义动画：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

ul {
            list-style: none;
        }

.wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-color: pink;
        }

.wrap li {
            background-color: green;
        }

.wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

.wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

.wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="01/node_modules/jquery/dist/jquery.min.js"></script>
    <script>
        //入口函数
        $(document).ready(function () {
            //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
            var jqli = $(".wrap>ul>li");

//绑定事件
            jqli.mouseenter(function () {
                $(this).children("ul").stop().slideDown(1000);
            });

//绑定事件(移开隐藏)
            jqli.mouseleave(function () {
                $(this).children("ul").stop().slideUp(1000);
            });
        });
    </script>

</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
                <li><a href="javascript:void(0);">二级菜单4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">二级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
                <li><a href="javascript:void(0);">二级菜单4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">三级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">三级菜单2</a></li>
                <li><a href="javascript:void(0);">三级菜单3</a></li>
                <li><a href="javascript:void(0);">三级菜单4</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="01/node_modules/jquery/dist/jquery.min.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
                var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
                var json2 = {
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                };

//自定义动画
                $("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("动画执行完毕！");
                    });
                });

})
        })
    </script>
</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>

Jquery 的属性操作：

attr()

设置属性值或者 返回被选元素的属性值

attr（）属性的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <script src="01/node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div class="wrap" id="'box" title="123">

</div>
<script>
    $(document).ready(function () {
       console.log( $('.wrap').attr('id'));
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
        }
        .wrap{
            background-color: red;
        }
        .wrap2{
            background-color: yellow;
        }
    </style>
 <script src="01/node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div class="wrap" id="'box" title="123">

</div>
<script>
    $(document).ready(function () {
       console.log( $('.wrap').attr('id'));
       console.log( $('.wrap').attr('class'));
       $('.wrap').attr('class','wrap2')
    });
</script>
</body>
</html>

直接将红色的盒子给覆盖了颜色成×××：

removeAttr()

移除属性

//删除单个属性

$('#box').removeAttr('name');

$('#box').removeAttr('class');

//删除多个属性

$('#box').removeAttr('name class');

什么时候使用attr()，什么时候使用prop()？

1.是有true,false两个属性使用prop();

2.其他则使用attr();

addClass（添加多个类名）

为每个匹配的元素添加指定的类名。

$('div').addClass("box");//追加一个类名到原有的类名

还可以为匹配的元素添加多个类名

$('div').addClass("box box2");//追加多个类名

removeClass

从所有匹配的元素中删除全部或者指定的类。

移除指定的类（一个或多个）

$('div').removeClass('box')；

移除全部的类

$('div').removeClass();

可以通过添加删除类名，来实现元素的显示隐藏

代码如下：

var tag  = false;

$('span').click(function(){

if(tag){

$('span').removeClass('active')

tag=false;

}else{

$('span').addClass('active')

tag=true;

}

})

val

获取值：

val()用于表单控件中获取值，比如input textarea select等等

设置值：

$('input').val('设置了表单控件中的值')；

原文地址：http://blog.51cto.com/xiaorenwutest/2147534

时间： 2024-10-04 09:38:55

4）jQuery的基础部分和js的部分的相关文章

jQuery与JS的区别，以及jQuery的基础语法

*在使用jQuery时,要在页面最上端加上 <script src="../jquery-1.11.2.min.js"></script> 看一下js与jQuery的区别: JS是这样使用的: <script type="text/javascript"> 根据ID取元素,取到的是具体的元素 var a = document.getElementById("p1"); 根据CLASS取 var a = docu

面向Web Cloud的HTML5 App开发实战：Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js（2天）

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

jquery学习基础

这篇博客将会给大家带来jquery中的一些基础操作. 使用click绑定事件 使用click为div绑定点击事件 <div> testclick </div> $(function($) { $("div").click( function() { alert("hello world"); } ); }); 点击增加样式 点击div时候,改变其字体颜色和背景色 <div> click to change the backgrou

jQuery Mobile基础

1.安装 在<head></head>标签里边写入以下内容 jQuery Mobile CDN: 1 <head> 2 <meta charset="utf-8"> 3 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> 4 <script sr

jQuery之基础核心（demo)

jQuery之基础核心 作者的热门手记 jQuery之基础核心(demo) 本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javascript基础,又刚刚接触jQuery的初学者.(如有错误,请指正)咱们从基础语法说起,基础语法是:$(selector).action() 美元符号$定义jQuery 选择符(selector)"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操

jquery过滤特殊字符及js字符串转为数字

//替换特殊字符 $(this).val($(this).val().replace(/[~'!<>@#$%^&*()-+_=:]/g, "")); 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型返回的都是NaN(Not a Number). 一些示

合并_00基础班js(9days)作业

作业说明:以下作业大致标明了所需要运用的知识点,其中灰色文字部分表示有难度的扩展提高题,为选做题. (基础)写出js语言的基本特点 (基础)写出js语法的基本要点(语句行,大小写,注释,运行环境与方式等) (基础,输出)网页一打开,要求依次弹出数字1-6,并且每弹出一次,页面就显示出对应的一个标题行(即从h1-h6).注意,页面中不应该出现h1-h6的标签,而应该是由js写出来的. (数据类型)定义若干个js变量,需表现出js中的各种数据类型,并在页面中输出每个变量的值和其对应类型.--使用"t

放弃jQuery，使用原生js吧！

转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样很好用.下面介绍几个原生替换jq的方法. 获取元素 JQuery $('.xxx'); //class获取 $('#xxx'); //id获取 $('.xxx.ccc'); //同时包含xxx和ccc $('.xxx,.zzz'); //多选 $('.xxx div'); //子类 $('.xxx

jquery.validate 基础

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script ty