JavaScript与jQuery

javascript主要涉及三个部分:

  • EMCAScript:描述了JS的语法和基本对象(JS可以看作是EMCAScript接口的一个实现类)
  • BOM(浏览器对象模型):与浏览器交互的方法和对象(其中也包含DOM)
  • DOM(文档对象模型):处理网页内容的方法和接口(内含大量语法) 

1.DOM
        DOM是文档对象模型,它指的是把文档当作一个对象来对待,这个对象主要定义了"处理网页的内容和接口的方法"。
2.BOM(对浏览器提供的API的统称,)
        BOM是浏览器对象模型,它指的是将浏览器当作一个对象来对待,这个对象主要定义了"与浏览器进行交互的方法和接口";
        提供的API都放在window全局对象中,代表当前浏览器窗口。

JS常用的打印语句

第一种方式打印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 判断变量的类型

4).流程控制---与java- 致.
    if() {}
    if() {}else() {}
    for(var i=0;i<10;i++){}
    while() { }
    do{ }while ()
定义函数      

1)使用关键字function定义

    有参无返
    function  函数名( a, b ){ ..... }

    有参有返
    function add(a,b) { return a+b; }

2)隐式声明函数 --- 将函数看做是一个值 
             
    语法:  var  函数名 =  function(形参){  函数体 } ;              
    使用:  函数名(实参);              
    案例: var fun1 = function(){ return “hello”; } ;      

3)保存函数类型数据的变量之间可以互相赋值

    // 将fun1里保存的“函数类型值”赋值给fun2,赋值成功后,fun2里存也是“函数类型值” 
    var  fun1 = function(){   return “hello”;  }              
    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中常见的事件源

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结构简介

  • 28
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值