[学习笔记] 动态网页开发基础之初识jQuery

# 学习 # · 2020-08-12

一、jQuery简介

1、jQuery是JavsScript的程序库之一,相当于JavaScript技术的一个子集。

2、jQuery由美国人John Resig于2006年创建的开源项目。

3、jQuery的主旨:write less、do more,以更少的代码实现更多的功能。

4、jQuery的用途:①访问和操作DOM元素;②控制页面样式;③对页面事件的处理;④方便地使用jQuery插件;⑤与ajax技术的完美结合。

5、jQuery的优势:①轻量级;②强大的选择器;③出色的DOM封装;④可靠的事件处理机制;⑤出色的浏览器兼容性;⑥隐式迭代;⑦丰富的插件支持。

6、配置jQuery环境:

(1)获取jQuery的最新版本:下载地址http://jQuery.com/

(2)jQuery环境配置:下载jquery.js放到网站上的一个公共位置。

(3)在页面中引入jQuery。

(4)使用CDN内容分发的方式引用jQuery(二选一):

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>

二、jQuery语法

1、语法结构:

$(selector).action();

//美元符号定义 jQuery。
//选择符(selector)"查询"和"查找" HTML 元素。
//jQuery 的 action() 执行对元素的操作。

2、jQuery的元素选择器:

$("p")        //在页面中选取所有 <p> 元素
$("#test")    //通过 id 选取元素语法如下
$(".test")    //可以通过指定的 class 查找元素

3、文档就绪事件:页面加载完成时执行事件。

$(document).ready(function(){
    //jQuery代码
});

//简洁写法
$(function(){
    //jQuery 代码
});

jQuery入口函数与JavaScript入口函数的区别:

(1)JS的入口函数只能出现一次, 出现多次会存在后者将前者事件覆盖的问题。JQuery的入口函数, 可以出现任意多次, 并不存在事件覆盖问题。

(2)S的入口函数是在所有的文件资源加载完成后, 才执行。JQuery的入口函数, 是在文档加载完成后就执行。

4、jQuery常见事件:

//鼠标事件
click()        //鼠标点击事件
dbclick()    //鼠标双击事件
mouseenter()    //鼠标移动悬浮事件
mouseleave()    //鼠标移动离开事件

//键盘事件
keypress()    //在键盘上按下一个按键,并产生一个字符时发生
keyup()        //用户松开某一个按键时触发

5、jQuery显示和隐藏:

//语法
$(selector).hide(speed,callback);    //隐藏
$(selector).show(speed,callback);    //显示
$(selector).toggle(speed,callback);    //显示被隐藏的元素,并隐藏已显示的元素
//可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
//可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

6、jQuery操作CSS:

(1)addClass():向不同的元素添加class属性。

//语法
$(selector).addClass(classname);
//classname:规定一个或多个要添加的类名称。

//实例
$("button").click(function(){
    $("body div:first").addClass("important blue");
});

(2)removeClass():在不同的元素中删除指定的class属性。

//语法
$(selector).removeClass(classname);
//classname:规定一个或多个要添加的类名称。

//实例
$("button").click(function(){
    $("h1,h2,p").removeClass("blue");
});

(3)css()方法:

//语法
css("propertyname");    //返回CSS属性值
css("propertyname","value");    //设置CSS属性值
css({"propertyname":"value","propertyname":"value",...});    //设置多个CSS属性值

//实例
$("p").css("background-color");
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});

7、jQuery的代码风格:

(1)$符号的使用:是jQuery程序的标志,即$等同于jQuery。

(2)链式操作:对一个对象进行多重操作,并将操作结果返回给该对象。

    $("h2").css("background-color","#ccffff").next().css("display","block");

(3)隐式迭代:

    $(document).ready(function() {
        $("li").css({"font-weight":"bold","color":"red"});
    });

DOM对象和jQuery对象

1、DOM对象:直接使用JavaScript获取的节点对象。

var objDOM=document.getElementById("title");
var objHTML=objDOM.innerHTML;

2、jQuery对象:使用jQuery包装DOM对象后产生的对象,它能够使用jQuery中的方法。

$("#title").html( );
//等同于
document.getElementById("title").innerHTML;

3、相互转化:

//DOM对象转jQuery对象:使用$()
var $jQuery对象 = $(DOM对象);
var txtName = document.getElementById("txtName");
var $txtName = $(txtName);

//jQuery对象转DOM对象:使用[index]和get(index)
var $txtName = $("#txtName");    //jQuery对象
var txtName = $txtName[0];    //DOM对象

var $txtName = $("#txtName");
var txtName = $txtName.get(0);

4、jQuery对象命名一般约定以$开头。在事件中经常使用$(this),this是触发该事件的对象。

如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/69/

评论