JavaScript 基础与 JQuery 库

最新推荐文章于 2024-08-27 01:45:00 发布

Roobert_Chao

最新推荐文章于 2024-08-27 01:45:00 发布

阅读量197

点赞数

分类专栏： javaScript 文章标签： JavaScript Console JQery

本文链接：https://blog.csdn.net/Roobert_Chao/article/details/88723913

版权

javaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

基础一、JavaScript 语法

JavaScript 是一门弱脚本语言，也是 Web 开发重要的语言之一。

变量。（在交互式运行环境下 REPL 和 Chrome 控制台，可以直接运行）

关键字 var
JavaScript 区分大小写，不区分单双引号。变量必须以字母、下划线、美元符三者之一开头。
变量提升机制：1、2、3.
1、使用未声明的变量时会出现 is not defined 错误。
2、使用已经声明，却未赋值的变量，会出现 undefined。
3、后来定义赋值的代码，会出现 defined。
4、变量提升机制，主要指的是 undefined 变量提升。

注释。

// 单行注释
/* 这是
 * 多行
 * 注释
 * /

数据类型。

利用 typeof 区分数据类型。
利用 Boolean() 转化数据类型。

空字符串、0、null、undefined、NaN 都是 fasle ，其余都是 true 。

函数

声明函数只需要使用 function 关键字。
函数作为一个值传递给一个变量。
多参数无用。

闭包

JavaScript 中的变量可以分为全局变量和局部变量。

函数可以读取到全局变量，函数外部不能够读取到函数内部定义的变量。
建议所有变量都使用 var 关键字进行定义，以避免不必要的错误的出现。

基础二、JavaScript 命名规范

1、所有变量使用 var 定义，没有 var 定义的变量为全局变量。
2、使用驼峰命名法定义变量。
3、常量命名要全部大写。
4、内部变量命名以 "_"开头。
5、见名知意。

基础三、JavaScript 编程规范

1、所有语句都应该以分号结尾。；
2、大括号的运用，即使只有一行，也应该有大括号。
3、=== 运作相等的判断；== 先进行类型的转换，其中 null == undefined 返回 true。
4、空格的添加。

基础四、JavaScript 内置函数

1、**length，**内置 length 的返回结果是字符或者数组的长度。
2、**arguments，**类数组特性。记录了传递给函数的参数信息。

基础五、Console 重新认识。

在这里插入图片描述

可以通过 console 对象的各种方法向控制台进行标准输出。

console.log();方法用于标准输出流的输出，也就是在控制台显示一行的输出。参数不限制，输出时将以空格分隔这些参数。

console.log(“node.js”,“is”,“powerful”); 如果需要对后面的多个参数都定义格式，就要逐个设置，并且输出时将不会在以空格分隔开。如果没有预定义格式，就将正常输出。也可以利用占位符来定义输出的格式，%d 表示数字，%s表示字符串。
console.info()\console.warn()\console.error() 同样适用。

console.dir() 方法用于将一个对象的信息输出到控制台。

在这里插入图片描述

console.time() 和 console.timeEnd() 方法，主要用于统计一段代码运行时间。
1、console.time() 置于代码起始处。 console.timeEnd() 置于代码结尾处。
2、只需要向这两个方法传递同一个参数，就可以看到在控制台中输入了以毫秒计的代码运行时间。

在这里插入图片描述

console.trace() 用于输出当前位置的栈信息，可以向 console.trace() 方法传递任意字符作为标志。

在这里插入图片描述

基础六、JQuery 的元素选择器。

有关 JQuery 的内容 http://www.w3school.com.cn/jquery/index.asp

JQuery 元素选择器。针对标签，可以增加属性。
JQuery 属性选择器。属性使用中括号增加。
JQuery CSS选择器。通过标签的css样式。$(“p”).css(“background-color”,“red”);
jQuery 选择器参考手册。

基础七、JQuery 的 noConflict() 方法。

在这里插入图片描述

基础八、JQuery 的常用方法。

find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
:eq() 选择器选取带有指定 index 值的元素（下标值）。
is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数，第一函数用于鼠标悬停，第二个函数用于鼠标离开。

## 两个函数
$( selector ).hover( handlerIn, handlerOut )
等同以下方式：
$( selector ).mouseover( handlerIn ).mouseout( handlerOut );
## 一个函数
$(selector).hover(handlerInOut)
等同于：
$( selector ).on( "mouseover mouseout", handlerInOut );

toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

### 背景颜色按照顺序 绿色-->红色-->黄色 按次序循环执行。
$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

focus() 获得焦点的内容。
blur() 失去焦点的内容。
change() 当元素的值发生改变时。
bind() 向被选元素添加的一个或多个事件处理程序，以及当事件发生时运行的函数。

 $(selector).bind(event,data,function)
event 事件 由空格分隔多个事件。
data 数据 传递到函数的额外数据。
function 功能，展现的函数。

经验总结：

单选框.input 的 radio 。根据值确定那个被选中。

## 循环判断值相等来操作选中。
$(" input[type=radio][name='agreeable']").each(function(){
	if($(this).val() == 0){
		$(this).prop( "checked", true );
	}
});
### 最简单的一种方式。（建议建议）
$("input[type=radio]").attr("checked",'2');  //   设置value=2的项目为当前选中项 。 

## 根据值所在的单选框是否选中来判断。
$('input[name="radio"]').change(function(){
    if ($('input[name="radio"][value="1"]').prop("checked")) {
        console.log("true");			// 这里通过 value=1 验证了值。
   } else {
        console.log("false");
   }
});

多选框.select 中的选中值。根据结果设置下拉框的内容值。

$("#daily").val(值);

attr() 与 prop()的区别。
attr 是JQuery 1.0 中便有的内容 attribute；prop 是JQuery 1.6 中增加的内容 property。
attribute 表示checked、selected、disabled 属性初始状态的值，返回值为String类型，否则(即元素节点没有该属性)返回undefined。property 的checked、selected、disabled才表示该属性实时状态的值(值为true或false)，属性值可以为包括数组和对象在内的任意类型。

$('input[name="radio"]').change(function(){
    if ($('input[name="radio"][value="1"]').prop("checked")) {
        console.log("true");			// 这里通过 value=1 验证了值。
   } else {
        console.log("false");
   }
});