JavaScript与jQuery
javascript由三个部分组成:
- EMCAScript:描述了JS的语法和基本对象(JS可以看作是EMCAScript接口的一个实现类)
- BOM(浏览器对象模型):与浏览器交互的方法和对象(其中也包含DOM)
- DOM(文档对象模型):处理网页内容的方法和接口(内含大量语法)
1.DOM
DOM是文档对象模型,它指的是把文档当作一个对象来对待,这个对象主要定义了处理网页的内容和接口。
2.BOM(对浏览器提供的API的统称,)
BOM是浏览器对象模型,它指的是将浏览器当作一个对象来对待,这个对象主要定义了与浏览器进行交互的方法和接口;
提供的API都放在window全局对象中,代表当前浏览器窗口。
JavaScript需要记住的语法
第一种方式打印HelloWorld --- 将内容输出到浏览器窗口里
document . write("HelloWorld");
第二种方式打印HelloWorld --- 将Hell oWorld以警告框的形式在浏览器里输出
window. alert("HelloWorld");
如果函数或者属性是window对象的,则在调用时可以省略window,直接写函数名
第三种方式打印Helloworld --- 将HelloWorld打印输出到浏览器的控制台
console . info( "Hel1oWorld"); 相当于java里的System. out. print1n()
1)数学运算符: +-*/ 号注意:只要有可能计算出结果,js就会自动做类型切换算出结果。
2)判断相等性:==比较值是否相等var a=3;var b="3";alert (a==b) ; --> true比较值和类型是否完全相同var a=3; var b="3" alert(a===b) --> false
3) typeof 判断变量的类型5).流程控制---与java- 致.if() {}if() {}else() {}for(var i=0;i<10;i++){}while() { }do{ }while ()
5).流程控制---与java- 致.if() {}if() {}else() {}for(var i=0;i<10;i++){}while() { }do{ }while ()
定义函数 1)使用关键字function定义Js ---- function 函数名( a, b ){ ..... }有参无返function add(a,b) { return a+b; }有参有返2)隐式声明函数 --- 将函数看做是一个值 语法: var 函数名 = function(形参){ 函数体 } ; 使用: 函数名(实参); 案例: var fun1 = function(){ return “hello”; } ; 3)保存函数类型数据的变量之间可以互相赋值 var fun1 = function(){ return “hello”; } // 将fun1里保存的“函数类型值”赋值给fun2,赋值成功后,fun2里存也是“函数类型值” Var fun2 = fun1 ; //调用fun1函数,将fun1函数的返回值赋值给fun3变量,成功后fun3里存放的是String类型值 Var fun3 = fun1();
遍历对象属性 : for...in语法for( 变量 in 对象 ){ / 循环每执行一次,会提取对象的一个“属性名”赋值给变量对象[变量]}
JavaScript数组
1.特点: js里 的数组长度不固定,可以任意扩展;数据可以是任意类型。
2.创建:
var 数组名= [ 元素1, 元素2,..... ];
创建好以后可以任意扩展,添加任意元素。
3.访问:
1)一个元素(通过下标访问,从0开始)---arr1 [3]
2)遍历(与java一样,用for循环遍历)
for (var i=0;i<arr1.length;i++) { arr1[i] }
4.数组常见函数
数组对象.sort()--->对数组里的元素按照自然顺序升序排列
数组对象.push() ---> 在数组的末尾插入一个元素
数组对象. pop()
---> 删除数组末尾的最后一个元素,且数组长度减一
delete数组对象[下标] --->删除指定位置元素,且数组长度不变
JavaScript中常见的事件源
小技巧
内部元素产生的事件,会默认扩散到外部的容器中
取消事件冒泡 --- event.cancelBubble = true ;
DOM获取标签的API
DOM里面常见的属性
1)innerHTML : 为标签设置标签体里的内容
2)this :代表当前产生事件的标签对象
处理下拉列表的常见属性
1)下拉列表一般使用的是onchange事件
2)options --- 值为数组类型,表示获取下拉列表里的所有option选项
3)selectedIndex --- 值为数字类型,表示下拉列表里被选中的option的下标
4)清空下拉列表 --- select.options.length=0;
5) 向下拉列表里添加一个option选项 创建一个option对象 : var op = new Option(text,value); 添加到select里 : select.options[下标] = op;
从网页中删除标签
1)需要通过父标签对象删除子标签对象:parentTag.removeChild( 子标签对象 );
2)对表格进行js处理时,主要针对的是tbody标签,不是table.
3)标签对象的一组相关关系属性:
tag.parentNode ----> 获取当前标签的父标签对象
tag.childNodes -----> 获取当前标签对象的所有孩子节点(标签和文本)
tag.firstChild -----> 第一个孩子节点
tag.lastChild -------> 最后一个孩子
tag.nextSibling -----> 当前标签对象的同级下一个标签(“弟弟”)
tag.previousSibling ----> 当前标签对象的同级上一个标签(“哥哥”)
注意:js存在浏览器差异,google浏览器会默认将标签间的空格也算作孩子节点
4)删除的辅助功能
var ba = window.confirm(“提示文字”);
--- 方法返回boolean值,表示对话框里的选择(确认--true 取消--false)
BOM编程
代码执行顺序的优先级
我们可以把js代码放在body下面,也可以设置页面加载完毕,再执行js代码,onload
JavaScript文件引入路径
当js文件和所用网页不在同一个文件里面是,我们可以把路径设置成如下所示
../js/jquery-1.8.3.js
jQuery是一个Javascript的框架
好处:语法简单、直观,支持链式调用,屏蔽浏览器差异。
获取对象需要记住的一些语法
jQuery穿外套
$(function({
/***前端页面需执行的代码,访问action后 把数量的值拼进去**/
});jQuery获取标签对象的方法
$("#id的值"):
id选择器,根据id的值获取jQuery对象 【重点】$(".class的值"):
class选择器,根据class的值获取jQuery对象【重点】$("标签名称"):
标签选择器,根据标签名称 获取jQuery对象$("标签名1,标签名2,#id的值"):
多路选择器 【重点】$("selA selB"):
后代选择器,获取selA中所有selB(子子孙孙)的jQuery对象 【重点】$("selA > selB"):
儿子选择器,获取selA中的子对象selB(儿子对象)的jQuery对象$("selA:first"):
获取selA中的第1个jQuery对象 【重点】$("selA:eq(index)"):
获取selA中下标=指定下标为index的对象$("selA:gt(index)"):
获取selA中下标>指定下标为index的对象 【重点】$(“selA:contains(text)”):
获取selA中文本内容包含text的对象 【重点】$("selA:empty"):
获取selA中的空标签对象 【重点】$("selA:checked"):
获取selA中所有选中的单选和复选对象 【重点】$("selA:selected"):
获取selA中下拉列表中选中的项 【重点】$("selA[属性名=值]"):
获取selA中指定属性名称=指定值 的jq对象 【重点】
jQuery对象遍历
// 获取数组长度
length属性/size()方法// 根据下标(从0开始)获取到jQuery对象
jQuery对象.eq(idx)// jQuery遍历数组的方法
each()语法 :
jQuery对象.each(function(idx){this --> 当前遍历的DOM对象$(this) --> 当前遍历的jQuery对象});
jQuery操作对象的属性
jQuery对象.prop("属性名");
//获取对象的属性值jQuery对象.prop("属性名","新值");
//设置属性的值(修改/添加)jQuery对象.removeProp("属性名")
//删除属性
jQuery对象操作对象的样式
jQuery对象.css("样式属性名"); //获取对象的样式属性jQuery对象.css("样式属性名","新值"); //修改对象的样式属性//显示、隐藏jQuery对象.hide(1000); //隐藏,参数为毫秒数jQuery对象.show(1000); //显示jQuery对象.addClass("新选择器名"); //添加class属性-类选择器 dom对象.className = "";jQuery对象.removeClass("选择器名称"); //删除类选择器
操作对象的标签体内容;获取表单元素的值
操作对象的标签体内容
jQuery对象.text(); //获取对象的文本内容
jQuery对象.text("新内容"); //设置文本内容(不支持HTML标签).innerText("");
.html(); //获取对象的html标签体内容
.html("新内容"); //设置对象的标签体内容(支持HTML标签).innerHTML("");获取表单元素的值
jQuery对象.val(); //获取值
jQuery对象.val("新值"); //修改值
事件处理
// jQuery的事件处理// 语法:jQuery对象.事件名(function(){// 功能代码})// 页面加载完成后,执行JS// $(function(){直接在此处写代码可以省略每一个函数都写一个ready,意思均为页面加载完成后,执行JS});$(document).ready(function(){$("#btn1").click(function(){alert("hello....");});});// 简化形式$(function(){//功能代码});// 注意:jQuery的事件名,是在JS事件名基础上去掉on,做为方法名调用
复合单击事件// 第1次单击执行func1,第2次执行func2,第3次func3,第4次func1
toggle(func1,func2,func3); // 复合鼠标 移入/移出 事件
hover(func1,func2);//添加对象(父子间操作)父对象.append(子对象); //添加成 父对象的最后1个 儿子对象 子对象.appendTo(父对象); //向目标结尾插入匹配元素集合中的每个元素。父对象.prepend(子对象); //向匹配元素集合中的每个元素结尾插入由参数指定的内容。
区别 1.append()前面是被插入的对象,后面是要在对象内插入的元素内容。2.appendTo()前面是要插入的元素内容,而后面是被插入的对象。//插入对象(兄弟间操作)旧对象.befor(新对象); //在当前对象的前面添加旧对象.after(新对象); //在当前对象的后面添加//删除对象jquery对象.remove(); //彻底删除(连同自身标签一起删除)jquery对象.empty(); //保留自身标签,删除其所有文本和子标签//关系方法parent(); //父对象children(); //所有子对象next(); //下一个兄弟对象prev(); //前一个兄弟对象
BOM结构简介
DOM结构简介
JavaScript与jQuery相关推荐
- Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
- javascript与jQuery对照学习总结(一)(一些常规操作)
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>javascrip ...
- 解决【Bootstrap‘s JavaScript requires jQuery】的问题
解决[Bootstrap's JavaScript requires jQuery]的问题 参考文章: (1)解决[Bootstrap's JavaScript requires jQuery]的问题 ...
- 在C#后端处理一些结果然传给前端Javascript或是jQuery
在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术非常多,样例非常多.仅仅好慢慢学,慢慢实践!!如今学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQ ...
- JavaScript那些事儿(1):对比JavaScript和jQuery的Dom操作
正在着手看<javascript权威指南>,整理点儿笔记,也算是督促自己学习,每天看一点,特立此贴,希望自己能坚持下去. 对比:用javascript和jQuery分别判断某元素是否存在, ...
- JavaScript和jQuery的学习
还有12天就要回学校了,我的假期计划还能实现吗?在这12天里,需要把JavaScript和jQuery学完.我知道这两个技术对于前端网页开发非常重要.前期把HTML和CSS学完了,学的不是特别深,只是 ...
- 如何使用JavaScript或JQuery检测一个URL文件是否存在?
如何使用JavaScript或JQuery检测一个URL文件是否存在? How do I check if file exists in jQuery or JavaScript? 问题: 如何检查服 ...
- php课程---JavaScript与Jquery的区别(转)
php课程---JavaScript与Jquery的区别(转) jQuery能大大简化Javascript程序的编写,我最近花时间了解了一下jQuery,把我上手过程中的笔记和大家分享出来,希望对大家 ...
- 流程代码中js报错,在javaScript或者jQuery中字符串比较没有equals()方法
问题: 流程走不下去. 原因: 在javaScript或者jQuery中字符串比较没有equals()方法,要比较两个字符串是否相等可以直接用==或者is()进行判断. //判断是否为未签约有风险等级 ...
最新文章
- CSS在ASP.NET中使用
- 【Android Gradle 插件】ProductFlavor 配置 ( ProductFlavor#manifestPlaceholders 清单文件占位符配置 )
- 树莓派hdmi输出没声音_树莓派 4 开箱记
- 【Protocol Buffer】Protocol Buffer入门教程(四):序列化和反序列化
- Callable接口
- 命令行关闭特定服务和调整服务启动方式
- JAVA NIO 简介 (netty源码死磕1.1)
- 前端获取div里面的标签_「HTML」什么是 HTML 中的 div 标签
- php批量删除例子,php批量删除数据完整实例代码
- Asp.net MVC - 使用PRG模式(附源码)
- 视频剪切合并器如何分割音频文件
- 淘宝校招鸡蛋篮子算法题标准答案
- Linux下基于UDP协议实现的聊天室项目(附源码)
- 《数字孪生》(Yanlz+VR元宇宙+Unity+SteamVR+云技术+5G+AI+虚拟现实+数字映射+仿真+物理模型+传感器更新+运动历史+多学科+多物理量+多尺度+多概率+立钻哥哥++==)
- 普元的ajax,有人了解普元 primeton EOS 产品的么?可否评价一下?
- 苹果手机计算机隐藏照片app,App Store 上的“秘密计算器 - 隐藏私人照片和视频”...
- TP5 PHPExcel导出类
- android国家码
- 微信小程序--实现番茄钟功能
- 利用自媒体推广实用好方法!
热门文章
- 如何让微信公众号文章打开跳转第三方外部网站
- 苹果账号被禁用怎么办?
- 完全删除SQL SERVER
- 我读过的100+本经典书籍(持续更新,上次更新2013年11月15日)
- 基于C++的ATM自动取款机设计
- 一战Linux射击游戏凡尔登(Verdun),ChuChu Rocket克隆版Duck Marines等
- Ural 1268 Little Chu (原根)
- Pocket Gimbal隐私政策
- 法拉第效应维尔德常数_什么是法拉第效应?
- 10分钟教你搭建一个可公网访问的私人网盘,和付费网盘彻底say goodbye~