初识jQuery

jQuery简介

jQuery由美国人John Resig于2006年创建 jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装 它的设计思想是write less,do more

实现隔行变色效果，只需一句关键代码

$("tr:even").css("background-color","#e8f0f2");

jQuery的应用

jQuery Bootstrap Zepto Ext YUI

jQuery能做什么：

访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合

在页面中引入jQuery：<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

jQuery基本语法：<script>      $(document).ready(function() {         alert("我欲奔赴沙场征战jQuery，势必攻克之！");     }); </script>

$(document).ready()：$(document).ready()与window.onload类似，但也有区别

 jQuery语法结构:$(selector).action() ;

工厂函数$()：将DOM对象转化为jQuery对象

选择器 selector：获取需要操作的DOM 元素

方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

jQuery操作页面元素:

使用addClass( )方法为元素添加样式

使用css( )方法设置元素样式

使用show( )、hide( ) 方法设置元素的显示和隐藏

addClass( )方法:jQuery 对象.addClass([样式名]);

示例：$("#current").addClass("current");      

css( )方法：css("属性","属性值") ; css({"属性1":"属性值1","属性2":"属性值2"...}) ;

示例：$(this).css({"background":"#c81623"});

设置元素的显示和隐藏：语法$(selector).show( ); $(selector).hide( );

示例：$(".nav-top").show( ); $("p").hide( );

jQuery代码风格：

$”等同于“ jQuery ”：$(document).ready()=jQuery(document).ready()

                                $(function(){...})=jQuery (function(){...})      

链式操作：对一个对象进行多重操作，并将操作结果返回给该对象

示例：$("h2").css("background-color","#ccffff").next().css("display","block");

隐式迭代： $(document).ready(function() {

        $("li").css({"font-weight":"bold","color":"red"});

            });

DOM对象和jQuery对象

 DOM对象转jQuery对象：

使用$()函数进行转化：$(DOM对象)

var txtName =document.getElementById("txtName"); var $txtName =jQuery对象转DOM对象

jQuery对象转DOM对象：

jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

var $txtName =$ ("#txtName"); var txtName =$txtName[0];

通过get(index)方法得到相应的DOM对象

var $txtName =$("#txtName"); var txtName =$txtName.get(0);      

总结