01-10jQuery框架

  • jQuery框架

jQuery框架

概念:jQuery是继prototype之后一个优秀的开源的JavaScript代码库(或JavaScript框架),它封装JavaScript常用的功能代码。

特点:

(1) 具有独特的链式语法,可以把多个操作写在一行代码里,更加简洁
(2) 拥有大量的选择器,不仅有高效灵活的css选择器【id,类,元素】,并且可对CSS选择器进行扩展
(3) 拥有便捷的插件扩展机制和丰富的插件(树形菜单、日期控件、图片切换插件、弹出窗口等)
(4) jQuery兼容各种主流浏览器,兼容性更强
(5) 很多API都方法化了

jQuery的核心思想:(write less,do more)写得更少,做得更多

基础语法:$(selector).action()

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

  • 美元符号定义 jQuery
  • 选择符(selector)“查询"和"查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

一、与JS比较

    <script>
        //js中的页面加载事件:当整个页面加载完成(节点,样式,图片等)之后才会执行里面的代码
        window.onload = function(){
            alert(111);
        }
        window.onload = function(){
            alert(222);
        }
        //jQuery页面加载事件:加载时机是节点加载完成就执行了
        $().ready(function(){
            alert(333);
        })
        jQuery(function(){
            alert(444);
        });
        //执行顺序 333 - 444 - 222
        /*
            1.jQuery页面加载事件一定都会执行,而js中的页面加载事件只会执行最后一个 
            2.jQuery页面加载事件优先执行 (这个需要看版本)
        */

        /*
            以后页面中会引入多个前端框架:如果有2个前端框架都定义了$。
            你再页面中用$符号是哪一个框架的
        */
    </script>

二、jQuery版本介绍

jQuery是一个js框架,代码本质上就是js代码,使用时需要引入jQuery.js 注意需要先导包 !!!

// 引人jQuery:使用script标签
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>

三、 jQuery编程步骤

  1. 引入jQuery
// 引人jQuery:使用script标签
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
  1. 编写jQuery入口函数即页面加载事件
$(function(){})       // 多个$(function(){})中的代码都会执行,多个window.onload只会执行最后一个
  1. 使用选择器定位到需要操作的节点
var $obj = $("body"); // 一般情况下为了避免dom对象与jquery对象混淆,可以将jquery对象的变量名用加上$前缀  即$obj 
注:$()即$函数,body:选择器(元素选择器)
  1. 调用jQuery的API进行后续操作

四、DOM对象与jQuery对象转换

  • DOM对象

getElementById()
getElementsByName()
getElementsByTagName()
window对象,document对象
parentNode获取的对象
即我们用传统的方法(javascript)获得的节点对象

  • jQeury对象

通过选择器和$函数获取的节点对象。实质就是通过jQuery包装DOM对象后产生的对象

  • 将Dom对象转换成jquery对象
$(dom对象)
例如:var $obj = $(obj);

//------------------------------------------------------------
<div id="d1">易烊千玺</div>
var div1 = document.getElementById("d1");    //jQuery对象相当于对dom对象的封装,可以看成将dom对象的数组
//dom对象 转换成 jQuery对象 
var $div2 = $(div1);   // $(dom对象)
$div2.css("color","red"); // 调用jQuery方法设置样式
  • 将jQuery对象转换成dom对象:
var obj = $obj.get(0); 
var obj = $obj[0,1,2...];

//------------------------------------------------------------
var $div = $("div"); // 获取jQuery对象
//jQuery对象 转换成 dom对象
var div1 = $div[0]     // 或者使用  $div.get(0)来获取对象 
div1.style.backgroundColor = "pink"; // 此时div1是通过下标获取到的,jQuery对象将dom对象放进了一个数组里面

注:dom对象与jQuery对象的方法和属性不能混淆,jQuery对象不能调用dom对象的属性和方法

五、jQuery选择器

  1. 基本选择器

Id选择器: id=“d1” 调用方法 #d1
类/class选择器: class=“c1” 调用方法.c1
元素选择器: p 调用方法 p

  1. 基本过滤选择器

:first - 第一个
:last - 最后一个
:eq(index) - 指定索引的

$("li:first").css("color","red"); // 第一个li
$("li:last").css("color","lime");
$("li:eq(1)").css("color","gray"); // 索引为1的li
  1. 属性选择器

[属性名] - 有指定属性的
[属性名=“属性值”] - 有指定属性和属性值的

 $("li[id]").css("color","yellow"); // 设置li标签下属性名为id的对象
 $("li[id='d2']").css("color","blue"); // 设置li标签下属性名为id=d2的对象
  1. 层次选择器
  • ul li 选择
      里面的所有
    • 元素;
    • div > p 选择所有直接子元素是

      元素;

    • h1 + p 选择紧跟在

      元素后紧挨着的

      元素; 就是跟h1同级的第一个标签

六、jQuery事件绑定/注册

  1. Js事件绑定/注册
  • 直接绑定到元素中
<a href="javascript:void(0);" onclick="functionName();"/> // 点击后执行functionName()
  • dom对象.事件
document.getElementById("id").onclick=function(){  //点击后执行function中的方法
    //逻辑代码
}
  1. jQuery事件绑定/注册
  • 绑定事件
$obj.事件名称(function(){  //obj就是可能是任意对象  一般都是通过选择器来找到需要绑定事件的元素
	//逻辑代码
});
$obj.on("事件名称", function(){
	//逻辑代码
});
$obj.bind("事件名称", function(){
	//逻辑代码
});
  • 取消事件
$obj.off("事件名称");    // 通常用于移除通过 on() 方法添加的事件处理程序。
$obj.unbind("事件名称");   // 移除被选元素的事件处理程序  当事件发生时终止指定函数的运行。
注意:如果取消事件时不写时间名称,表示取消所有事件

七、jQuery的DOM操作

  1. 文本操作

1.1 API

html(): 设置或者获取双标签中的的html文本
text():设置或者获取双标签中的纯文本
val():设置和获取有value属性的标签的value属性值
有value属性值的元素【大多数单标签都有】:input【按钮,文本框等】、select中option等
没有value属性值的元素【大多数双标签没有】:div、hn、span、a、p等

// 需求:当鼠标进入div显示红色的"有敌军潜入",鼠标移开div还原

<div style="height: 150px;width: 150px;background-color: green" id="d1"></div>
<script type="text/javascript" src="/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#d1").mouseover(function(){
			$(this).html("有敌军潜入");
		});
			
		$("#d1").mouseout(function(){
			$(this).text("");
		});
	});
</script>
  1. 属性和样式操作

2.1 API

操作样式:css(),addClass(),removeClass()

.css() // 直接设置样式 
.css("width",200).css("height",300)

.addClass() // 向第一个 

元素添加一个类名 这样就方便在head里面设置样式,然后通过类名设置样式,这样可以解决.多个css,防止记不住属性名 $("button").click(function(){ $("p:first").addClass("intro"); }); .removeClass() // 从所有的

元素移除 "intro" 类: $("button").click(function(){ $("p").removeClass("intro"); });

操作属性:
attr():操作【设置或获取】非boolean属性值的属性
prop():操作【设置或获取】boolean属性值的属性(checked单选框复选框,selected下拉框)
data():h5出的API,可以自定义属性data-属性名=“属性值”,然后用data(“属性名”)获取可以自动转换。一般用于传递数据
注意:要自动转换的话属性值必须是标准格式就是双引号,不能使用单引号
removeAttr():移除指定属性值

// 需求:鼠标移动到元素上改变背景颜色,点击改变属性和样式

<a href="javascript:;">File</a>
<a href="javascript:;">Edit</a> 
<script type="text/javascript" src="/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		var $as = $("a");//jQuery对象
		for(var i = 0 ; i < $as.length ; i++){
			var a = $as[i];//dom对象
			//$(a)  将dom对象转换成jQuery对象,才能使用方法
			$(a).mouseover(function(){
				$(this).css('backgroundColor','skyblue');
			});
			$(a).mouseout(function(){
				$(this).css('backgroundColor','white');
			});
			$(a).click(function(){
				alert("当前元素的跳转地址为:" + $(this).attr('href'));
				$(this).addClass('c1');
			});
		}
	});
</script>

2.2 data()与其他API区别

概念:自定义数据属性,也就是data-自定义属性。

注意事项:

(1) 使用data获取属性值有个前提,属性名必须是data-xxx。使用data()获取属性的语法格式:jQuery对象.data(“xxx”)
(2) 使用attr()获取属性的语法格式:jquery对象.attr(“属性名”)

<input type="text" id="d1" 

		data-person='{"id":1,"name":"tom","address":"四川成都"}'  // 自动将json格式的字符串转换成json对象
		data-name="赵子龙" 
		data-age="22" 
		data-sex="true" />
            
<script type="text/javascript">
    $(function(){
        console.log($('#d1').attr('data-person'));//获取出来都是字符串
        console.log($('#d1').attr('data-name'));//获取出来都是字符串
        console.log($('#d1').attr('data-age'));//获取出来都是字符串
        console.log($('#d1').attr('data-sex'));//获取出来都是字符串
        console.log("====================================");
        //获取出来出来的值,会自动转换成相应的类型。能转就转,不能转就以字符串的形式存在
        console.log($('#d1').data('person'));
        console.log($('#d1').data('name'));
        console.log($('#d1').data('age'));
        console.log($('#d1').data('sex'));
    });
</script>
  1. 元素操作

3.3 API

追加:append()
删除:remove(),删除会将当前元素和里面的所有内容删除掉
清空:empty(),清空会保留当前元素

JSON

概念:JSON 是用于存储和传输数据的格式。 通常用于服务端向网页传递数据 。

  • JSON 是一种轻量级的数据交换格式。
  • JSON是独立的语言。
  • JSON 易于理解。
// json对象
           var obj1 = {"id":1,"name":"jack","age":20}
           //alert(obj1.name);
           var obj2 = {"id":1,"name":"jack","address":{"street":"陕西街","no":"125号"}}
          // alert(obj2.address.street);
           var obj3 = [{"id":1,"name":"jack","age":20},{"id":2,"name":"tom","age":30}]
           //alert(obj3[1].name);

           //json格式的字符串
           var str = ' {"id":1,"name":"jack","age":20}';
           //转json对象:要求必须是标准格式 -   也就是外面是单引号,里面属性是双引号,数字不用
           alert(JSON.parse(str).name);

           //data-*是html5出来的属性,为了传递数据 - 自动将json格式的字符串转成json对象
           //1.申明的时候必须用data-*  2.获取的时候:data(*)
           console.log($("div").data("obj"));

八、 jQuery遍历

场景:例如有多个input按钮,获取每个按钮的value值

第一种:传统的遍历方式

var $obj = $("input:button");
for(var i = 0 ; i < $obj.length ; i++){
    alert($($obj[i]).val());//注意$obj[i]是一个dom对象
}

第二种:jQuery提供的each函数

//$obj:jquery集合对象,index遍历元素的下标(从0开始),obj表示每一个节点
$obj.each(function(this){  // this表示每个对象
	alert($(this).val());
});

九、 jQuery发异步请求

方法1:

<input type="button" value="添加数据"/>
$(function(){
     $("input").click(function(){
	 $.get("url",data,callback,type);
	 $.get(
     "https://www.fastmock.site/mock/d2846dc5a7b17c3f5711971f6ccd25ce/jquery/user/add",
     {"name":'tom'},
     function(data){
         console.log(data);
     },
     "json"
 )

方法2:

$(function(){
    $("input").click(function(){
		$.ajax({
           url: "https://www.fastmock.site/mock/d2846dc5a7b17c3f5711971f6ccd25ce/jquery/user/add",                  //请求地址
           type: "GET",                       //请求方式
           data: "eid=1&ename=tom",         //请求参数:格式1:key=value  格式2:json格式
           success: function (result) {    //请求成功后的回调函数,result是服务器返回的数据  
           console.log(result);
           },
           dataType: "json"                 //如果是json,服务器返回值就是json对象,直接使用
           //如果不指定dataType,就是普通文本
          });
      })
});

你可能感兴趣的:(jquery)