jQuery的初步了解。

1.js的String对象

****创建String对象    var str=“abc”；

  **方法和属性（文档）

   **方法

    （1）与html相关的方法：

 —bold（）：加粗    -fontcolor（）：设置字符串的颜色

 -fontsize（）：设置字体大小  

 -link（）：将字符串显示成超链接  *** str4.link（“hello。html”）

 -sub（） sup（）：下标和上标：

（2）与java类似的方法·：

-concat（）：连接字符串  **//concat方法

var str1="abc"; 

var  str2="dfg";

document.write(str1.concat(str2)); 

-charAt():返回指定位置的字符串

  ***var str3="stray";

    document.write(str4.indeOf("s")); //字符串不存在，返回空

—split():切分字符串，成数组

***var str5="a-b-c-d";

var  arr1=str5.split("-");

document.write("length:"+arr1.length);

 

 -replace():替换字符 ，传递俩个参数：第一个参数是原始字符，第二个是要替换的字符

 

-substr()和substring()

-document.write(str7.substr(5,5); //从第五位开始，向后截取5位字符字符

***从第几位开始截取几位

-document.write(str7.substring(3,5));  **从第几位开始，到第几位结束

2.js的Array对象

***创建数组  var arr2=new Array(3);

***concat方法：数组的连接 

  -join（）：根据指定的字符分割数组

  -push（）：向数组末尾添加元素，返回数组的长度

  -pop（）：表示删除最后面一个元素，返回删除的那个元素

  -reverse（）：颠倒数组中的元素的顺序

  

3.js里面的Date对象

****在Java里面获取当前时间

   Date date=new Date（）;

  //格式化    //toLocaleString()

***js 里面获取当前时间

  var date=new date();

  //获取当前时间

  var date=new Date();

  document.write(date);  //

  

  //转换为习惯的格式

  document.write("<hr/>);

  document.write(date.toLocaleString());

  

  //获取当前的年方法

   getFullYear():获取当前年

   ******document.write("year:"+date.getFullYear());

   

   //获取当前的月方法

   getMonth():获取当前的月

      ***var date1=date.getMonth()+1;

  document.write("month:"+date1());

  

***h获取当前星期:  getDay():星期，返回的是(0-6)

  星期一到星期六返回的是1-6

****document.write("week:"+date.getDay());

*****获取当前日：  getDate():的阿斗当前的天1-31

 ****document.write("day:"+date.getDate());

 

 **获取当前小时： getHours():分钟

  当前秒：getSeconds();秒

  获取毫秒数：getTime() 

  

 4.js的Math对象

***数学的运算 里面都是静态方法，直接使用Math.方法（）进行使用

***ceil(x):向上舍入     floor(x):  向下舍入   roud(x):  四舍五入

**rendom()：得到随机数（伪随机数）：

得到0-9的随机数：  Math.random()*10  Math.floor(Math.random(10)*10)    

5.js的全局函数

****由于不属于任何一个对象，直接写名称使用

  **eval() : 执行js代码（如果字符串是一个js代码，使用方法直接执行）

         var str="alert('123');";

   //alert(str);

eval(str);

   **encodeURI():对字符串进行编码

     %E4%B8%AD%E6%96%8745131

 

   **decodeURI()  :对字符进行解码

   

      encodeURIComponent() 和 decodeURIComponent()

  

   **isNaN() :判断当前字符串是否是数字

               --var str2 = "aaaa";

   alert(isNaN(str2));

***如果是数字，返回false;

***如果不是数字，返回true;

 

***parseInt()：类型转换

6.函数的重载

js是否存在重载：

 ***1.js里面不存在重载

   2.但是可以通过其他的方式模拟重载的效果，(通过aruguments)数组来实现！

   

 7.js的bom对象

**bom： browser object model:浏览器对象模型

 *** navigator：获取客户机的信息（浏览器的信息）

     -navigator.appName

  document.write(navigator.appName);

  

 ***screen：获取屏幕的信息

  document.write("<hr/>");

   document.write(screen.width);

   document.write("<hr/>");

   document.write(screen.height);

   

   ***location：请求url地址

   -href属性    ***获取到请求的url地址  document.write(location.href);

   **设置url地址

   

 —页面上安置一个按钮，按钮上绑定一个事件，当点击这个按钮，页面可以跳转到另外一个页面

 -location.href="hello.html";

 

 ****<input type="button" value="tiaozhuan" οnclick="href();"/>

  -鼠标点击事件，onclick-"js方法"

  

  ***history：请求的url的历史记录

  返回上一个页面：history.back();    history.go(-1);

  

  返回下一个页面：history.forward();   history.go(1);

  

 ***.window(****)

**窗口对象   **顶层对象(所用的bom对象都是在window里面操作的)

***方法  -window.alert():页面弹出一个框，显示内容  ***简写alert（）

 -confirm():确认框   -var flag=window .confirm("显示的内容");

- prompt():输入对话框 

-window.prompt("please  input:","0");

-window .promt("在显示的内容"，”输入框里面的默认值“);

-open():打开一个新的窗口

 **open("打开新窗口的地址url",“”,"窗口的特征");

-创建一个按钮，点击这个按钮，打开一个新窗口，

-window.open("d.html","","width=100 height=100");

  -close():关闭窗口（浏览器兼容性太差）

    -window.close();

-做定时器：

-setInterval("js代码",毫秒数); 1秒等于1000毫秒

-表示每3秒，执行一次alert方法

window.setInterval("alert('123');",3000);

 **setTimeout("js代码",毫秒数)

-表示在毫秒数之后执行，但只会执行一次

     

-表示在三秒之后执行js代码，只会执行一次

  var id2 = setTimeout("alert('ily ge');",3000);

  

**clearInterval(): 消除setInterval设置的定时器

  var id1= setInterval("alert('jia ge');",3000);

  clearInterval(id1);

  

**clearTimeout(): 消除setTimeout设置的定时器

  var id2 = setTimeout("alert('ily ge');",3000);

      clearTimeout(id2);

8.js的dom对象 *   

              *dom: document object model:文档对象模型

**文档

      超文本文档(超文本标记文档) html xml

  **对象：

       提供了属性和方法

**使用属性和方法操作超文本标记型文档

 

***可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

 

***想要对标记型文档进行操作，首先需要对标记型文档里面的所有内容封装对象

--需要把html里面的标签和属性，文本内容都封装成对象

 

***要想对标记型文档进行操作，解析标记型文档

***解析过程

    根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象

-document对象： 整个文档

-element对象： 标签对象

-属性对象

-文本对象

 

--Node节点对象:这个对象是这些对象的父类

***如果在对象里面找不到想要的方法，这个时候到Node对象里面去找

DHTML:是很多技术的简称

         **html:封装数据

**css：使用属性和属性值设置样式

**dom: 操作html文档

**javascript：专门指的就是js的语法语句(ECMAscript)

 

9.document对象：

         *表示整个的文档

 

**常用方法

     ****write方法:

          (1)向页面输出变量

  （2）向页面输出html代码

  

****getElementById():

           -通过id得到元素（标签）

   -//使用getElementById得到input标签

   var input1 = document.getElementById("nameid");

                     //得到input里面的value值

                       alert(input1.name); //标签对象.属性名称

                      //向input里面设置一个值value

                      input1.value="bbbbbb";

  

  ****getElementsByName():

            -通过标签的name属性值得到标签

            -返回的是一个集合(数组)

            -//使用getElementById得到input标签

              var inputs=document.getElementsByName("name"); //传递的参数是 标签里面的name的值

   alert(inputs.length);

   //遍历数组

   for(var i=0;i<inputs.length;i++){  //通过遍历数组，得到每个标签里面的具体的值

   

  var input1=inputs[i];//每次循环得到input对象，赋值到inputs里面

  alert(input1.value);//得到每个input标签里面的value值

   }

****getElementsByTagName("标签名称")

    -通过标签名称得到元素

    //getElementsByTagName

   var inputss=document.getElementsByTagName("input");//传递的参数是标签名称

      alert(inputss.length);

  //通过遍历数组，得到每个input标签

  for(var mm=0;mm<inputss.length;mm++){

    var inputr =inputss[mm];

//得到name值

alert(inputr.name);

  }

  

****注意地方

    ****只有一个标签，这个标签只能使用name获取到，这个使用getElementsByname返回的是一个数组

但现在只有一个元素，这个时候不需要

//通过name得到input标签

var inputs2 = document.getElementsByName("names")[0];

      alert(inputv.value);

     var inputss=document.getElementsByTagName("input")[0];

alert(inputss.value);

 

10.窗口的案例：

-实现过程  

1.创建一个页面

   **有两个输入项和一个按钮

 ***按钮上面有一个事件：弹出一个新的窗口 open

 2.创建一个弹出页面

 **表格  **每一行有一个按钮和编号和姓名

 按钮上有一个事件，把当前的编号和姓名，赋值到第一个页面相应的位置

  //实现s7方法

   function s7(num1,name1)

   {

   //需要把num1和name1赋值到window页面上

   //跨页面的操作  opener：得到创建这个窗口的窗口 得到window页面

   var pwin=window.opener;//得到window页面

   

  pwin.document.getElementById("numid").value=num1;

  pwin.document.getElementById("nameid").value=name1;

  window.close();

   }

   opener:属性，获取创建当前窗口的窗口！

  

 ———————————————————————————————————————————————————————————————————————————————————----------------------------------

 11.window.onlaod事件中存在事件的覆盖问题!只能存在一个事件！

    console.log(); 在jQuery中的打印出来函数！

 

 12.事件处理程序：

  事件源： js处理方式：  document.getElementById("id")

     jQuery： $("#id")

  事件：  js：  document.getElementById("id").onclick

      jQuery： $("#id").click

 区别：jQuery的事件不带 on

  

  事件处理程序：

 Js 书写方式:

 document.getElementById(“id”).onclick = function(){

  // 语句

    }

 jQuery 书写方式: 

  $(“#id”).click(function(){

// 语句

   });

  13.jquery详细介绍;

  

  jQUery的两个变量：$ 和 jQuery

  jQuery占用了我们两个变量：$ 和 jQuery

  

  14 js入口函数跟jquery入口函数的区别：

  1.js的window.onload事件是等到所有的内容，以及我们的外部图片之类的文件加载完之后

  ，才回去执行

  2.jQuery的入口函数是在htnl所有标签都加载之后，就回去执行！

  

  

  15.js创建对象：

  3种方式：1.var  obj={}；  2.var  obj1=new Object();

  3.var obj2=Object.create();

  1跟2的区别：

   推荐使用第一个方式

   第二种方式存在效率问题，因为要new对象，会涉及到原型查找的问题。

  

  

  jQuery基本选择器;

  

  CSS选择器回顾

 符号    说明       用法

 #id   Id选择器    #id{ color:red; }

 .class   类选择器    .class{ //}

 Element 标签选择器   P { //}

  *      通配符选择器  配合其他选择器来使用

  ,      并集选择器    div,p{}

  空格 后代选择器    div span{}  选择div下面所有后代的span

  >      子代选择器    div > span{}

  +     紧邻选择器    div+p          选择div紧挨着的下一个p元素

 

  jQuery基本选择器：

  基本选择器

符号      说明                               用法

$(“#demo”) 选择id为demo的第一个元素           $(“#demo”).css(“background”,”red”)

$(“.liItem”) 选择所有类名（样式名）为liItem的元素 $(“.liItem”).css(“background”,”red”);

$(“div”) 选择所有标签名字为div的元素         $(“div”).css(“background”,”red”);

$(“*”)      选择所有元素少用或配合其他选择器来使用 $(“*”).css(“background”,”red”)

$(“.liItem,div”) 选择多个指定的元素，这个地方是选择出了 .liItem元素和div元素 $(“.liItem,div”).css(“background”,”red”)

  

  

  jQuery与js的区别：

 Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。

 jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发。

 

 jQuery层级选择器：

 

  符号   说明                          用法

  空格 后代选择器选择所有的后代元素 $(“div span”). css(“background”,”red”);

  >    子代选择器选择所有的子代元素     $(“div > span”). css(“background”,”red”)

  + 紧邻选择器选择紧挨着的下一个元素    $(“div + p”). css(“background”,”red”)

  ~   兄弟选择器选择后面的所有的兄弟元素   $(“div ~ p”). css(“background”,”red”)

 

 jQuery过滤选择器：

 基本过滤选择器

   符号   说明                                             用法

 :eq(index) index是从0开始的一个数字，选择序号为index的元素。选择第一个匹配的元素。 $(“li:eq(1)”). css(“background”,”red”)

 :gt(index) Index 是从0开始的一个数字，选择序号大于index的元素 $(“li:gt(2)”). css(“background”,”red”)

 :lt(index) Index是从0开始的一个数字，选择小于index 的元素      $(“li:lt(2)”). css(“background”,”red”)

 :odd   选择所有序号为奇数行的元素 $(“li:odd”). css(“background”,”red”)

 :even   选择所有序号为偶数的元素 $(“li:even”). css(“background”,”red”)

 :first   选择匹配第一个元素 $(“li:first”). css(“background”,”red”)

  :last   选择匹配的最后一个元素 $(“li:last”). css(“background”,”red”)

  属性选择器：

 符号             说明                                  用法

$(“a[href]”)     选择所有包含href属性的元素      $(“a[href]”).css(“background”,”red”)

$(“a[href=’itcast’]”) 选择href属性值为itcast的所有a标签 $(“a[href=’itcast’]”).css(“background”,”red”)

$(“a[href!=’baidu’]”) 选择所有href属性不等baidu的所有元素，包括没有href的元素 $(“a[href!=’baidu’]”).css(“background”,”red”)

$(“a[href^=’web’]”) 选择所有以web开头的元素 $(“a[href^=’web’]”). css(“background”,”red”)

$(“a[href$=’cn’]”) 选择所有以cn结尾的元素 $(“a[href$=’cn’]”). css(“background”,”red”)

$(“a[href*=’i’]”) 选择所有包含i这个字符的元素，可以是中英文 $(“a[href*=’i’]”).css(“background”,”red”)

$(“a[href][title=’我’]”) 选择所有符合指定属性规则的元素，都符合才会被选中。 $(“a[href][title=’我’]”).css(“background”,”red”)

1.9 mouseover事件跟 mouseenter事件的区别：

 mouseover/mouseout事件，鼠标经过的时候会触发多次，每当一个子元素就会触发一次

 

 mouseenter/mouseleve事件，鼠标经过的时候只会触发一次！

 1.10DOM对象跟jQuery对象相互转换

jQuery对象转换成DOM对象:

方式一：$(“#btn”)[0]

方式二：$(“#btn”).get(0)

DOM对象转换成jQuery对象：

$(document) -> 把DOM对象转成了jQuery对象

var btn = document.getElementById(“bt n”);

btn -> $(btn);

1.11上午提到的两个面试题：

1.js对象创建的有几种方式（三种）

a)1.var obj = {};

b)2. var obj = new Object();

c)3. ECMAScript5里面提供的一个方法：Object.create(参数);