整理js和jquery相关用法（待续）

js:

注意：

1、js 代码是从上往下执行的，所以一般写在＜head>标签里面，最早执行（比onload还要早），

body里面的就比较晚执行了

2、

导入外部的js文件：

<script  src=" "  type="text/javascript">

</script>

3、事件

<a href="javascript:alert( ' hello' )"> click</a>

javascript 相当于一个协议http，ftp等 只有在href中，是个特例

4、

js变量

1）js中既可以使用双引号声明字符串，也可以使用单引号声明字符串，主要是为了方便和html集成，避免转义符的麻烦

2）js 中有null ，undefined 两种，null －－变量的值为空，undefined则表示变量还没有指向任何对象

3）

  变量可以指向任意的类型。var i = 10, i = "abc"

  js也可以不用var声明变量，直接用，这样使用是全局变量,但是最好还是加上

5、js调试

internet选项－－>高级选项卡

去掉‘禁用脚本调试’前的勾选

以调试的方式运行网页

6、js初始化

var x;

       //未被初始化

if(x == null){ }

if(typeOf(x) == "undefined" ){ }

if(!x){ }  

if(x){ } //变量被初始化了或者变量不为空或者变量不为零。推荐使用这种方法

7、声明匿名函数：

var f1=   function(i1 , i2)  //把函数交给委托f1,注意不要委托变量，也可以直接使用匿名函数

{ return i1+i2;};

 

alert(f1(1,2));

// alert( function(i1,i2) {return i1+i2;} (10,10) );

直接声明一个匿名函数，立即使用, 避免命名冲突的问题。。。。

8、数组

var arr = new Array();

arr[0] = "aa";

arr[1] = "ab";

arr[2] = "ac";

for(var i=0; i<arr.length; i++)

{

    alert( arr[i] );

}

9、取到数组的最大值

function getMax( arr ){

    

           var max = arr[0];

           for(var i=0; i< arr.length; i++)

            {

               if(arr[i]> max)

               {

                  max = arr[i];

                }

           }

         return max;

}

//调用

var arr1 = new Array();

arr1[0] = 20;

arr[1] = 10;

arr[2] = 3;

alert(  getMax(arr1)  );

9、

join 将数组的每个元素都用分隔符串起来

function myjoin(arr, splitStr){

      if (arr. length <0 ){

             return;

       }

      var s = arr[0];

      for(var i=1;i<arr.length; i++)

     { 

           s = s+ splitStr + arr[i];

     }

     return s ;

}

10、array的字典用法

var dict = new Array();

dict[" 人"] ＝ "ren";

dict[" 口"] ＝ "kou";

dict[" 手"] ＝ "shou";

alert(dict("口"))；

遍历array

for(var k in dict)

{

     alert(k)//遍历出来的值是key值

}

／＊数组用法是dictionary的一个特例，打印出来的是key值＊／

11、array的简化声明

var arr = [3.5,56,665];

字典风格的简化创建方法：

var arr = {"tom": 30 , "jim": 20};

12. jQuery

$(" div").draggable(); ／／让所有的div可以拖动

让div动态的隐藏

$("div").click = $(function(){

      $(this).hidden("slow");//让div 慢慢的消失

})

13、

ready 函数

$(document).ready(function(){})

$(document) --将dom 对象转换为jquery对象

再调用ready 函数／／注册事件函数，它和unload类似，但是unload只能注册一次，而ready可以多次注册

14、 jQuery提供的内置对象： 

1）$.map(array, fn)对数组array中每个元素调用fn函数逐个进行处理返回，最后得到一个新的数组

ex：

var arr = [3,5,9];

var arr2 = $.map(arr,function(item){ return item *2 });

**** $.map()不能处理dictionary风格的数组

2）$.each(array, fn)对数组array的每个元素调用fn函数进行处理，没有返回值

该函数可以用于处理dictionary风格的数组

var dict = {"tom":20, "jim":74, "jerry":4};

$.each(dict, function(key , value){

       alert(key +"的年龄是："＋value );

})

//another  method

$.each(dict, function(item){

       alert(item );//key值

})

//third

$.each(dict, function(){   --当没有参数的时候，返回的是当前的值

       alert(this );//value值  此法同样可以用于处理dictionary风格的数组

})

总结：

           普通数据推荐用无参，用dict风格的就用key 、 value 带参数的

15、

jquery对象，dom对象

dom对象要想通过jquery进行操作，先要转换为jquery对象

$('#div1').html()  等价于  document.getElementById("div1").innerHTML;

$('#div1').html(" <a href = 'http://www.baidu.com></a>'")    //有参数是赋值，无参数是取值

注意：

数组是js语言本身的东西，不是jquery所共享的，所以不需要转换为jquery对象

jquery 修改样式

$("#div").css("background","red");

取样式：

$("#div").css("background");

$("#txt1").val(new Date())//赋值

$("#txt1").val()//取值

$("#div1").text();

16、隐式迭代

$("bt1").click(function(){  });

$("btn2").mouseover(function(){})

17、

节点遍历：1)next 2) nextAll

next（） 用于获取节点之后的（紧挨着的）第一个同辈元素（同级的下一次元素）

nextAll() -- 显示所有节点的值

nextAll(" div ")--过滤掉p，只显示div节点的元素的text文本值

$.each($(this).nextAll("div"), function(){  $(this).css("background", "red")  })

//遍历每个元素div设置背景为红色

siblings 用于获取所有的同辈元素

$(". menuitem").siblings("li")

18、链式编程

$("div").click(

function(){

    $(this).css("background","red").siblings("div").css("background","white");

}

19、jquery9 基本过滤选择器

1、:first 选取第一个元素 $("div: first") 选取第一个div

2、:last 选取最后一个元素 $("div: last") 选取最后一个div

3、:not(选择器)选取不满足“选择器”条件的元素

      $( " input: not(.myClass)")  选取样式名不是myClass的<input>

4、:even、:odd,选取索引是奇数，偶数的元素：$("input:even")选取的索引事奇数的<input>

5、:eq(索引序号), :gt、：lt选取索引等于、大于、小于索引序号的元素

$("input:lt(1)")选取索引小于1的<input>

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

 正文前三行数据（table从第二行开始才是正文）

$("#table1 tr: gt(0):lt(3)").css()----注意：lt(3)是从gt(0)出的新序列中的序号，不要写成lt（4）

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

6、$(":header")选取h1…..h6元素

7、$("div:animated")选取正在执行动画的div元素

8、相对选择器

$(function(){

      $("#div").click(function(){

            $("ul",$(this)).css("background","red");

//第二个参数传递一个query对象，则相对于这个对象为基准进行相对的选择。。。。

     })

})