jquery知识点总结

//jquery

1、Jquery------à$()    核心函数----进行Dom对象与Jquery之间的转换

2、选择器：基本选择器： 标签   ID    class

   如果页面有<input   type=”text”   id=”mytext”   class=”myclass”/> 

   标签 ：$(“input”)     ------------$(document.getElementsByTagName())

ID：   $(“#mytext”)   ----------  document.getElementById();

Class:   $(“.myclass”)    

//表格的各行变色 

<style>

 .class1{

       Background-color:red

}

.class2{

       Background-color:blue

}

</style>

<script>//$(function(){})

$(docuement).ready(function(){

   

$(“tr:even”).addClass(“class1”);

$(“tr:odd”).addClass(“class2”);

})

</script>

<table>

    <tr>

      <td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>   

</tr>

<tr>

      <td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>   

</tr>

<tr>

      <td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>   

</tr>

<tr>

      <td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>   

</tr>

</table>

//若页面含有<input   type=”text”   id=”mytext”   class=”myclass”/>

<input   type=”button”   id=”mybutton”   class=”myclass”/>

获取文本框对象：$(“input[type=’text’]”)或是   $(“:text”)

//表单验证过程   只能使用jquery方法获取元素

3、属性    <input   id=”myid”  name=”myname”  type=”text”  class=”mycl”  readyonly=true  />

   1）标签的属性值 :attr(属性名称)     $(“input”).attr(“name”)-------获取到对象的某个属性的值

                  attr(属性名称，值)-------获取到对象，给某个指定的属性赋值

   2）对象的包含的html信息：  html()----获取到对象的所有子元素对象

                              Html(值)----将对象原有的子元素内容用值替换

   3）class属性 ：添加class值   ：addClass(“class的名称”)   /removeClass（class的名称）

               

       4）文本：text()/text(值)

         <select ></select >

      

$(“select”).text(“<option>ssss</option>”)----错误示例

//向以下对象中添加相应的值与显示文本

        <select >

            <option ></option>

</select >

$(“option”).attr(“value”,1).text(“显示”);

5)值：  val()/val(值)

<input   id=”myid”  name=”myname”  type=”text”  class=”mycl”  readyonly=true  />

//给文本框对象赋值

   $(“#myid”).val(“文本框”)

//获取文本框对象的值

   $(“#myid”).val();

4、文本处理

     1）内部插入 append()/appendTo()

$(“<div>”).css({backGroundColor:’green’,width:’100px’}).appendTo(“body”);

   

  2)外部插入：before()/after()

   5、关于元素的Css样式的操作：css()

//给body添加背景

   $(“body”).css(“background-color”,”red”);

    或

   $(“body”).css({backGroundColor:”red”})

//<img   src=”1.jpg”    width=200px/>

     $(“img”).width()----该函数是针对于Css样式的函数

//<img   src=”1.jpg”    style=”width:200px;height:200px”/>

    $(“img”).width();

6、事件

   1) 页面载入  ready()---------$(document).ready(function(){    })//$(function(){    })

   2)事件处理：bind（）---绑定事件 ----多次执行    one()----只执行一次

        <input  type=”button” />

         //绑定单击事件  click

      $(“input”).bind(“事件名”,function(){     //事件触发时的处理函数  })

或是

$(“input”).Click(fuinction(){

})   

 3）事件切换：悬停事件切换hover(悬停时触发的执行函数,移出是触发的函数)

<img   src=”1.jpg”/>//鼠标移入移出改变图片

   $(“img”).hover(function(){

        $(this).attr(“src”,’2.jpg’);

},function(){

      $(this).attr(“src”,’1.jpg’);

})

4）事件

<input  type=”button”  id=”mybutton” />

     Document.getElementById(“mybutton”).onclick=function(){}

  //jquery

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

    

})

7、工具类

    each:对象与数组遍历

Var   arr=new Array(“1”,”2”,”3”,”4”,”5”,”6”)

//for遍历

//jquery

$.each(arr,function(i,n){

Alert(i+”   ”+n);

})

//或是

$(arr).each(function(I,n)){

   Alert(i,n);

}