初识JQuery

一、什么事JQuery

jQuery是一套Javascript脚本库.Javascript脚本库类似于.NET的类库, 这些类库中封装了一些工具方法或对象方法, 方便用户使用.

二、JQuery的特点

1.访问和操作DOM元素

2.控制页面样式

3.对页面事件进行处理

4.扩展新的jQuery插件

5.与Ajax技术完美结合

三、引入JQuery

<script src="js/jquery-3.5.1.js" type="text/javascript"></script>

四、JQuery的基本语法

弹出提示框：

<script>
     $(document).ready(function() {
        alert("aaa");
    });

</script>

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

	window.onload
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行
编写个数	同一页面不能同时编写多个
简化写法	无

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

五、JQuery的语法结构

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

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

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

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

六、使用JQuery操作页面元素

1.使用addClass( )方法为元素添加样式
语法：jQuery 对象.addClass([样式名]);
示例：$("#current").addClass("current");

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

css(“属性”,“属性值”) ;

css({“属性1”:“属性值1”,“属性2”:“属性值2”…}) ;

示例：

$("li").mouseover(function(){
$(this).css({"background":"red"}); 
}). mouseout(function(){
$(this).css({"background":"pink"});
})

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

$(selector).show( );//显示

$(selector).hide( );//隐藏

示例：

$(".nav-top").show( );//显示
$("p").hide( );//隐藏

DOM模型：

DOM对象和jQuery对象：

一、DOM对象：

可以直接使用JavaScript获取的节点对象

var obja=document.getElementById("title");

var objb=obja.innerHTML; 

二、JQuery对象：

使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法

$("#title").html( );

等同于

document.getElementById("title").innerHTML;