JavaScript和jQuery笔记

最新推荐文章于 2022-01-06 20:06:24 发布

璀璨的星河

最新推荐文章于 2022-01-06 20:06:24 发布

阅读量254

点赞数

本文链接：https://blog.csdn.net/qq_38983002/article/details/107439792

版权

第一章 JavaScript基础
预习问题
1.请说出网页引用javaScript的三种方式
在head使用script标签
引入外部js文件
在html标签中直接<div οnclick="javascript('ok');"></div>

2JavaScript常用的数据类型有哪些？
String number undefined null Object boolean

3.如何使用javaScript接收用户输入的信息？
prompt( );

4.如何定义一个函数？
function hello(){

}

js就是javaScript，js是解释执行的，不需要编译。
javaScript是一种描述性语言，也是一种基于对象（object）和事件驱动的，并具有安全性
的脚本语言。

javaScript语言的特点;
javaScript主要来向html页面添加交互行为。
javaScript是一种接本语言，语法和java相似
javaScript一般用来编写客户端脚本
JavaScript是一种解释性语言，边执行边解释

ECMAScript是一个描述，规定了脚本语言的所有属性，方法和对象的标准，因此在使用web
web客户端脚本语言编码时一定要遵循ECMAScript标准。

浏览器对象模型
浏览器对象模型（Browser Object Model，BOM），提供了独立于内容与浏览器窗口进行交互的对象
使用浏览器对象模型可以实现html的交互

文档对象模型（DOM）
文档对象模型（Document Object Model，DOM），是html文档对象模型（HTML DOM）
定义事物一套标准方法，用来访问编译操纵HTML文档

注释;
javaScript注释：/*
*/

html注释：

js变量
数据类型变量名=变量值
在js中，任何变量类型都写成var

如何查看一个变量的真实数据类型？
var num= 10;
alert(typeof(num))

数组遍历：
<script type="text/javascript">
var arr=["陈晨","张亮亮","张三"]
//for循环遍历
for(var i=0;i<arr.length;i++){
alert(arr[i]);

}

//for增强遍历
for(var item in arr){
alert(arr[item])

}
</script>

逻辑控制语句
js6种情况为假：undefined null 0 false "" NaN

函数
常用系统函数:
parseInt()函数可解析一个字符串，并返回一个整数
parse()函数可解析一个字符串，并返回一个浮点数
isNaN()函数用于检查其参数是否是非数字
自定义函数
定义函数语法：
function 函数名（参数1，参数2，......）{
   //javascript语句
   [return返回值]
}

function是定义函数的关键字，必须有。
参数1，参数2等是函数的参数，因为javascript本身是弱类型，所以它的参数也
没有类型检查和类型限定，函数中的参数是可选的，根据函数是否带参数，可分为无参函数和有参函数
无参函数语法：
function 函数名(){
    //javascript语句
}
return语句用来规定函数返回的值

匿名函数
所谓匿名函数，就是没有名字。
匿名函数的语法;
var 变量名 function (count){ //无函数名

}

第二章 javascript对象
使用window对象可以实现弹出窗口，关闭当前窗口，弹出页面消息框等效果
window事件
onload：页面上所有的标签，css，js，image，加载完毕后执行
onmouseover：鼠标悬停到一个标签
onclick：鼠标点击事件
onkeydown：当用户敲打键盘的时候触发的事件

prompt()方法和alert()方法的用法与confirm()方法相比较，虽然都是在页面上弹出对话框，但作用却不相同
alert()只有一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
prompt()有两个参数，是输入对话框，用来提示用户输入一些信息，单击取消按钮则返回null，单击确定按钮返回
用户输入的值，常用于收集用户特定问题而反馈的信息

使用history和location对象的相关属性和方法可以轻松地实现浏览器中前进后退和刷新按钮的功能
document对象的getElementByld()方法用于访问唯一的元素
document对象的getElementByName()方法用于访问相同name属性的一组元素
document对象的getElementByTagName()方法用于访问相同标签的一组元素

javascript内置对象
Array用于在单独的变量名中储存一系列值
String用于支持对字符串的处理
Math:使我们有能力执行常用的数学人任务，它包含了若干个数字常量和函数
Date：用于操作日期和时间

定时函数
常用的定时函数
setTimeout()用于在指定的毫秒后调用函数或计算表达式
语法格式：
setTimeout("调用的函数名称"，等待的毫秒数)

setInterval()可按照指定的周期（按毫秒算）来调用函数或计算表达式
语法格式：
setInterval("调用的函数名称"，周期性调用函数之间间隔的毫秒数)
总结：
setTimeout()只执行一次函数，如果要多次调用函数，则需要使用setInterval()或者让
被调用的函数再次调用setTimeout()

clerTimeout()函数用来清除由setTimeout()函数设置的timeout
语法格式：
clerTimeout(setTimeout()返回的id值)

clearInterval()函数用来清除由setInterval()函数设置的timeout
语法格式：
clearInterval(setInterval()返回的id值)

第三章初识jQuery
jQuery简介
jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more 少写，多做

jQuery是javaScript的程序库之一，它是javaScript对象和实用函数的封装
注意一点的是jQuery只是javaScript的程序库，相当于javaScript技术的一个子集，
它并不能完全取代javaScript

jQuery的用途：（1）访问和操作DOM元素（2）控制页面样式（3）对页面事件的处理
                 （4）方便的使用jQuery插件（5）与Ajax技术的完美结合

    AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用
的网页开发技术。

jQuery的语法结构：
语法：
   $(selector).action();
1.工厂函数$()
"$"美元符号等价于jQuery。$()的作用是将DOM对象转化为jQuery对象，只有将DOM对象转化为
jQuery后，才能使用jQuery的方法。
    2.选择器selector：获取需要操作的DOM元素
3.action()方法：jQuery中还提供了一系列方法。在这些方法中，一类重要的方法就是事件处理方法，主要用来
绑定DOM元素的事件和事件处理方法。

addClass()方法;
addClass()方法是jQuery中用于进行css操作的方法之一，它的作用是向被选元素添加一个或多个类样式
语法：
jQuery对象.addClass([样式名]) 其中样式名可以是多个，多个样式名需用空格隔开

css()方法：
css()方法也是jQuery中进行css操作的方法之一它的作用是为匹配的元素添加css样式
语法
css("属性","属性值");

css()与addclass()方法的区别：
(1)css()方法所匹配的元素设置给定的css样式
(2)addClass()方法向所匹配的元素添加一个或多个类，该方法不会移除已经存在的类，仅在原有基础上追加新的类样式
(3)基于结构与样式分离的原则，通常在实际应用中，为某元素添加样式使用addClass()方法比css()方法的频率高很多。
建议使用addClass()方法为元素添加样式
   DOM模型：
   每一个（x）html页面，都具有一个DOM 每一个DOM都可以表示成一棵树。这是理解DOM的关键
   在DOM里存在许多不同类型的节点，有些DOM节点还包含其他类型的节点。DOM里的节点通常分为3种类型，即元素节点，文本节点
   和属性节点。

   元素节点：文档中的所有元素
   <h2>...</h2>
   文本节点：元素节点内的文本内容
   <p>可口可乐</p>
   属性节点：元素节点的子节点
   <p title="提示"></p>

   DOM对象：
   直接使用JavaScript获取的节点对象
    var objDOM=document.getElementById("title");
    var objHTML=objDOM.innerHTML;
   jQuery对象：
   使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法
   $("#title").html( );
   等同于
   document.getElementById("title").innerHTML;

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

   jQuery对象与DOM对象的相互转换


   第四章 jQuery选择器
选择器是jQuery的根基，在jQuery中，对事件的处理，遍历DOM和Ajax操作都依赖于选择器

基本选择器:标签选择器
语法：element   返回值：元素集合

ID选择器：
语法：.class   返回值：元素集合

并集选择器：
语法：#id       返回值：单个元素

交集选择器:
语法:selector1, selector2...selectorN    返回值：元素集合

    全局选择器:
语法:*     返回值：集合元素

层次选择器：后代选择器：
语法：ancestor descendant   返回值：元素集合

子选择器：
语法：parent>child    返回值：元素集合

相邻元素选择器：
语法：prev+next        返回值：元素集合

同辈元素选择器：
语法：prev~sibings     返回值：元素集合

属性选择器;
什么事属性选择器？顾名思义，属性选择器就是通过元素的属性选择元素的选择器

通过条件过滤选取元素

基本过滤器：jQuery的基本过滤器是通过元素所处的位置来获取元素的

可见性过滤选择器；

第五章 jquery中的事件与动画
鼠标事件：
click(): 单击鼠标时
mouseover(): 鼠标指针移过时
mouseout(): 鼠标指针移出时

键盘事件：
keydown(): 按下按键时
keyup(): 释放按键时
keypress(): 产生可打印的字符时

表单事件:
focus(): 获得焦点
blur: 失去焦点

绑定事件和移除事件：
bind()：绑定事件
unbind(): 移除事件

复合事件：
hover(): 模拟鼠标指针悬停事件
toggle(): 模拟鼠标连续click事件还可切换元素的可见状态

控制元素显示与隐藏:
show():控制元素显示
hide():控制元素隐藏

改变元素透明度：
fadeln():控制元素淡入
fadeOut():控制元素淡出

改变元素高度;
slideUp():从下往上缩短直至隐藏
slideDown():从上往下延伸显示

鼠标事件：mouseover   mouseout js部分示例：
<script type="text/javascript">
   $(document).ready(function(){
    $("#nav li").mouseover(function(){    //当鼠标指针移过#nav li 元素时
     $(this).addClass("heightlight"); //当鼠标指针所在li元素添加样式
    });
    $("#nav li").mouseout(function(){     //当鼠标指针移出#nav li 元素时
     $(this).removeClass();       //移除鼠标指针所在li元素的全部样式
    });
   });

  </script>
键盘事件：keydown keyup keypress js部分示例：
<script type="text/javascript">
   $(document).ready(function(){
    $("[type=password]").keyup(function(){
     $("#events").append("keyup");

    }).keydown(function(){
     $("#events").append("keydown");
    }).keypress(function(){
     $("#events").append("keypress");
    })
    $(document).keydown(function (event){
     if(event.keyCode=="13"){   //按Enter键
      alert("确认要提交吗")
     }
    });
   });

  </script>
表单事件：focus(): 获得焦点 blur(): 失去焦点 js部分示例：
<script type="text/javascript">
   $(document).ready(function(){
    $("[name=member]").focus(function(){ //当name属性值为member的元素获得焦点时
     $(this).addClass("input_focus"); //为该元素添加类样式.input_focus
    });
    $("[name=member]").blur(function(){ //当name属性值为member的元素失去焦点时
     $(this).removeClass("input_focus"); //为该元素移除类样式.input_focus
    });
   });
  </script>

控制元素显示与隐藏：show() hide() js部分示例：
<script type="text/javascript">
   $(document).ready(function() {
    $("#hide").click(function() {
     $("p").hide();
    });
    $("#show").click(function() {
     $("p").show("slow");
    });
   });

  </script>
拓展内容：
  animate()：用于创建自定义动画的函数
  这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示
  一个可以变化的样式属性（如“height”、“top”或“opacity”）。

  js部分示例：
  <script type="text/javascript">
   $(document).ready(function() {
    $("button").click(function() {
     $("div").animate({
      left : '250px'
     });
    });
   });

  </script>

slideToggle():通过高度变化来切换所有匹配元素的可见性，如果被选元素是可见的，则隐藏这些元素，
如果被选元素是隐藏的，则显示这些元素。
js部分示例：
<script type="text/javascript">
   $(document).ready(function() {
    $(".flip").click(function() {
     $(".panel").slideToggle("slow");
    });
   });

  </script>


第六章使用jquery操作DOM
样式操作:
对css()方法设置多个属性的: $(this).css({"border":"5px solid red","opacity":"0.5"})   //opacity 半透明显示

追加样式和移除样式:
addClass()增加多个类样式： $(this).addClass("style2 style3"); //多个样式之间用空格分开
removeClass()增加多个类样式 : $(this).removeClass("style1 style2")

切换样式：toggle()方法、

内容操作：
1.html代码操作：html()方法
2.标签内容操作：text()方法

3.属性值操作：在jquery中，除了可以使用html()和text()获取与设置元素内容外，还提供了获取元素value属性值的方法val(),
该方法非常常用，多用于操作表单的<input>元素，如使用淘宝网的搜索功能，当文本框获得焦点时，初始的value属性值为空，
失去焦点时，value属性值又恢复为初始状态

val方法js部分示例：
<script type="text/javascript">
   $(document).ready(function(){
    $("#searchtxt").focus(function(){    //搜索框获得鼠标焦点
     var txt_value=$(this).val();   //得到当前文本框的值
     if(txt_value=="请输入您要搜索的关键字"){
      $(this).val("");          //如果符合条件,则清空文本框的内容
     }
    });
    $("#searchtxt").blur(function(){   //搜索框失去鼠标焦点
     var txt_value=$(this).val();   //得到当前文本框的值
     if(txt_value==""){
      $(this).val("请输入您要搜索的关键字")         //如果符合条件,则设置内容
     }
    });
   });


  </script>

节点操作
在jquery中节点操作主要分为查找，创建，插入，删除，替换和复制6中操作方式，其中查找，创建，插入，删除和替换节点是日常
开发中使用最多的，也是最重要的。

第七章表单效验
表单验证的内容：
检查表单元素是否为空
验证是否为数字
检验用户输入的邮件地址是否有效
检查用户输入的数据是否在某个范围之内
验证用户输入的信息长度是否足够

文本框内容的验证:

密码框不能为空,并且密码包含的字符不能少于6个

两次输入的密码必须一致

姓名不能为空,并且姓名中不能有数字

表单验证常用的事件:

onblur 失去焦点,当光标离开某个文本框的时候触发

onfocus 获的焦点,当光标进入某个文本框时触发

正则表达式:

什么是正则表达式:

正则表达式是一个描述字符模式的对象,它是由一些特殊的符号组成的,这些符号在sqlserver中学过的通配符一样,其组成的字符模式用来匹配各种表达式

定义正则表达式: 1.普通方式 2.构造函数

表达式的模式: 1.简单模式 2.符合模式

RegExp对象是Regular Expression(正则表达式)的缩写,它是对字符串执行模式匹配的强大工具,简单的模式可以是一个单独的字符串,

复杂模式包括了更多字符串,如验证电子邮件地址,身份证号等字符串

RegExp对象:

exec()检索字符串是正则表达式的匹配,返回找到的zhi

test()检索字符串中指定的值,返回true或false

璀璨的星河

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript和jQuery笔记

第一章 JavaScript基础预习问题1.请说出网页引用javaScript的三种方式在head使用script标签引入外部js文件在html标签中直接<div onclick="javascript('ok');"></div>2JavaScript常用的数据类型有哪些？String number undefined null Objec...
复制链接

扫一扫