jQuery理解与运用

1. 什么是jQuery

   它是一个轻量级的javascript类库，别人写好的一个类。

2. jQuery优点

  2.1 总是面向集合
  2.2 多行操作集于一行 

 

  注1：就一个类“jQuery”，简写“$”

3、导入js库

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>

4、三种程序入口的运用以及区别

/* $(fn)做为程序入口
   
   $(fn)、$(document).ready(fn)与window.onload的区别？   
   */ 
  
   window.onload =function(){
       alert("hello jQuery3");
   }
   
  $(document).ready(function(){
      alert("hello jQuery2");
  })
  
    $(function(){
    alert("hello jQuery1");
    
  })

 弹出顺序为：jQuery2--jQuery1--jQuery3

区别：

   jQuery1和jQuery2谁在前面谁就先运行，jsp的dom树结构加载完毕即刻调用方法
   jQuery3最后运行， jsp的dom树加载完、css、js等静态资源加载完毕再执行window.onload

5、jQuery的几种简单选择器

<script type="text/javascript">

   $(function(){
       //利用a标签获取jquery实例
      /*  $("a").click(function(){
           alert("123");
       }); */
       //利用id等于a3获取jQuery实例
       /* $("#a3").click(function(){
           alert("123");
       }); */
       //利用class值等于c1来获取jquery实例
       /* $(".c1").click(function(){
           alert("123");
       }); */
       //利用包含的形式来获取jquery实例
      /*  $("p a").click(function(){
           alert("123");
       });
       */       
       //组合选择器
       /* $("a,span").click(function(){
           alert("123");
       }); */
       //第二个参数的作用（在div标签内部寻找a标签，然后给找到的标签添加事件）
       //如果第二个参数不填，那么默认是document
       $("a","div").click(function(){
           alert("123");
       });
       
   })


</script>

5.1 通过点击事件给jQuery的实例追加jsp代码

$(function(){
      $(":input[name='name1']").click(function(){
          //在id=selId1的select的jquery实例上追加"<option value='1'>湖南省</option>"的html jquery实例
         $("#selId1").append("<option value='1'>湖南省</option>");
      });
      $(":input[name='name2']").click(function(){
          //将"<option value='1'>长沙</option>"的html jquery实例追加到id=selId2的select标签jquery实例中
          $("<option value='1'>长沙</option>").appendTo("#selId2");
    
      })

页面显示：

扫描二维码关注公众号，回复： 6651383 查看本文章

6、jQuery跟js的互转

 //jquery对象转js对象
          var h1Node = $h1.get(0);
          var h1Node = $h1[0];
          alert(h1Node.value); */
          
          var h2Node = document.getElementById("h2");
             alert(h2Node.value);
             //js对象转jquery对象
            var $h2Node = $(h2Node);
             alert(h2Node.val());

   jQuery是一个类；

   js的结构是一个元素（element）

7、this指针的作用

$(function(){
        $(":input").click(function(){
            //指的是事件源
            alert(this.value);
            $("a").each(function(index,item){
                //指的是当前元素
                alert(index+","+$(this).html()+","+$(item).html());
            });
            
        });
    })

8、$.extend和$.fn.extend

$.extend是用来扩充jquery类属性或者方法

     var jsonObj2 = {};
     //用后面的对象扩充第一个对象
     //$.extend(jsonObj2,jsonObj1);
     //扩充值覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，如果后面的对象有新的属性，会继续扩充
     $.extend(jsonObj2,jsonObj1,jsonObj3);
     console.log(jsonObj2);
     
     $.extend({
      hello:function(){
       alert("hello");
      }
     });
     $.hello();

$.fn.extend是用来扩充jquery实例的属性或者方法所用

$.fn.extend({
            sayHello:function(){
                alert("nihao");
            }
        });
        
        $("#yellow").sayHello();
        alert("yellow");

用鼠标事件实现自动更换class样式

<style type="text/css">
.fen{
   background:#ff66ff;
}
.yello{
   background:#ffff66;
}
.red{
   background:#ff3333;
}
</style>

<script type="text/javascript">

 $(function(){
     $("table tr:eq(0)").addClass("yello");
     $("table tr:gt(0)").addClass("red");
     
     $("table tr:gt(0)").hover(function(){
      $(this).removeClass().addClass("fen");
     },
     function(){
       $(this).removeClass().addClass("red");
     });
     
    })

</script>

jsp页面显示

请忽略显示的数据的问题，咱只看效果

9、ajax的简单使用

1.1 什么是Jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象和xml文档，同样也可以将json、xml转换成Java对象。

1.2 核心代码
//JSON操作的核心，Jackson的所有JSON操作都是在ObjectMapper中实现

ajax转换

Map<String,String> stu = new hashMap<>();
    stu.add("男1","豆豆");
    stu.add("男2","豆");
    ObjectMapper mapper = new ObjectMapper();//转为json的形式
   System.out.print( mapper.writeValueAsString(obj););