写给新手的教程（六） ----- jquery入门速成

html + css 已经限定死了网页的样式，想让页面有所交互，让页面“动”起来，就需要javascript脚本去操作HTML元素。

原生的js很多时候因为浏览器的差异不太可能用到了，更多时候大家会选择一些屏蔽浏览器差异的框架。jQuery就是其中之一。

操作过office办公软件的都体会过，想给某一段文本添加样式，修改排版，设计布局，需要先选中相对应的文本。
前端操作也一样。操作元素之前，要先选中操作的HTML元素。

0.引入jquery框架

一行代码： <script type="text/javascript" src=" jquery文件路径 "></script>

jquery的文件路径可以是公网上的cdn缓存路径，大家可以到bootstrap的cdn上去寻找最新的地址。（http://www.bootcdn.cn/jquery/）

也可以下载下来，放在本地环境。

1.选择元素

$(" 选择器 ") 即可选中页面上的DOM元素。

比如，选中一个id为test的元素 $("#test")

2.处理事件

先考虑清楚要处理的事件是什么。在我自己最开始接触这块的时候就是不知道自己要用到的事件到底是什么。

然后，一行代码

已选中jquery对象.事件函数（function(){ 处理逻辑 }）;

比如，对一个id为test的元素单击，单击之后弹出一个提示框提示“aaa”；

$("#test").click(function(){
    alert("aaaa")；
});

3.改变样式

先考虑清楚要改变的样式是什么。宽度？高度？字体？颜色？

然后，一行代码

已选中jquery对象.css（" css属性 " : " 要改变的值 "）;

比如，对一个id为test的元素单击，单击之后把这个元素宽度改为100px；

$("#test").click(function(){
$("#test").css("width","100px");
});

4.改变属性

先考虑清楚要改变的属性是什么。在我自己最开始接触这块的时候就是不知道自己要用到的事件到底是什么。

然后，一行代码

已选中jquery对象.attr（" 属性名 " : " 属性值 "）;

比如，对一个id为test的元素单击，单击之后把这个元素宽度改为100px，title属性改为“testattr”；

$("#test").click(function(){
$("#test").css("width","100px");
$("#test").attr("title","testattr");
});

jquery对象的操作可以连写,可以这样：

$("#test").click(function(){
$("#test").css("width","100px").attr("title","testattr");
});

甚至可以将jquery对象存起来。

var a = $("#test");

a.click(function(){
a.css("width","100px").attr("title","testattr");
})

5.最后，提醒一句，使用jquery的时候，要注意加载顺序的问题，也就是页面上标签的顺序。

比较下面两段的效果（div 在先和 script 在先）：

<html>
<head></head>

<div id="test" style="width:200px;height: 100px;background: #000"></div>

<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script>

    var a = $("#test");

    a.click(function(){
        a.css("width","100px").attr("title","testattr");
    })

</script>

</html>

<html>
<head></head>


<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script>

    var a = $("#test");

    a.click(function(){
        a.css("width","100px").attr("title","testattr");
    })

</script>


<div id="test" style="width:200px;height: 100px;background: #000"></div>

</html>

再比较下面这一段和第一段的效果（两个script哪一个在先）：

<html>
<head></head>
<div id="test" style="width:200px;height: 100px;background: #000"></div>
<script>

    var a = $("#test");

    a.click(function(){
        a.css("width","100px").attr("title","testattr");
    })

</script>
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
</html>

至于其他，用到的时候去这里找吧（http://www.w3school.com.cn/jquery/index.asp）

秒客网

写给新手的教程（六） ----- jquery入门速成

相关文章