初识jQuery

jQuery简介:

1.jQuery由美国人John Resig于2006年创建

2.jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装

3.它的设计思想是write less,do more

jQurey的作用:

1.选择元素：jQuery 提供强大的选择器，允许你使用类似 CSS 选择器的语法来选取HTML元素。这使得查找和操作DOM元素变得简单。

2.操作DOM：jQuery 允许你轻松地添加、删除、修改DOM元素，以及改变元素的样式和属性。它提供了丰富的DOM操作方法。

3.事件处理：jQuery 简化了事件处理，允许你附加事件处理程序，如点击、鼠标移动等，以便于创建交互性的网页。

4.动画效果：jQuery 提供了丰富的动画效果和过渡方法，使元素可以平滑地进行动画变化，例如淡入淡出、滑动等。

5.AJAX：jQuery 提供了简单的方法来执行AJAX请求，使得与服务器进行数据交换变得容易。它支持异步加载数据，以避免阻塞页面。

6.插件系统：jQuery 生态系统包括大量的插件，可以扩展其功能，从图形库到表单验证等。

7.跨浏览器兼容性：jQuery致力于处理浏览器之间的兼容性问题，确保你的代码在不同浏览器上都能正常工作。

8.轻量级：尽管功能强大，jQuery非常轻巧，提供了一种高效的方式来处理前端任务。

jQuery的基本语法及其结构:

下面是一个jQuery案例:

<script>    

 $(document).ready(function() {  

      alert("我欲奔赴沙场征战jQuery，势必攻克之！");    

});

</script>

1.在jQuery中，美元符号 $ 是一个特殊的函数。它是 jQuery 函数的别名，用于选择和操作HTML元素，以及执行各种DOM操作。$() 函数接受选择器字符串作为参数，然后返回与选择器匹配的元素的 jQuery 对象。

2.ready() 是 jQuery 中用于绑定页面加载事件的方法，它确保你的代码在文档完全加载和解析后执行。这个方法通常用于执行初始化代码、DOM操作以及事件绑定，以确保这些操作不会在文档尚未准备好时执行，从而避免潜在的问题。

3.function():它包含了在文档准备好后执行的代码

$(document).ready()和window.onload的区别

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){   //执行代码 }) ;

jQuery操作页面元素

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

       语法：jQuery 对象.addClass([样式名]);

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

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

        语法：

        设置一个css属性： css("属性","属性值") ;

        设置多个css属性：css({"属性1":"属性值1","属性2":"属性值2"...}) ;

        示例：

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

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

        语法：$(selector).show( );

                   $(selector).hide( );

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

                   $("p").hide( );

链式操作

jQuery 中的链式操作是一种非常强大且常见的技术，它允许你在同一行代码中对多个 jQuery 对象执行多个方法。这通过将多个 jQuery 方法链接在一起，以在一个连续的链中操作相同的元素集合。这种方法使代码更加简洁和可读。

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

DOM对象转jQuery对象

示例：

var txtName =document.getElementById("txtName");    //txtName为dom对象

var $txtName =$(txtName);     //通过$()方法也就是jQuery()方法把dom对象转换为jQuery对象

注：jQuery对象命名一般约定以$开头 在事件中经常使用$(this)，this是触发该事件的对象

jQuery对象转DOM对象

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

示例：

var $txtName =$ ("#txtName");    //jQuery对象

var txtName =$txtName[0]    //dom对象

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

示例：

var $txtName =$("#txtName");        //jQuery对象

var txtName =$txtName.get(0);      //dom对象