JQuery

一、引言

1.JQuery是一个基于javascript语言的框架 --- 是对js代码的合理封装

2.js缺点，jquery优点

​1）js代码比较复杂 var tag = document.getElementById("idvalue")；

​jquery代码简单 var tag = $("#idvalue")；

2）js存在着浏览器差异，jquery可以屏蔽浏览器差异

​3）提供了强大的界面支持

二、第一个Jquery程序

1.搭建环境 -- 引入相关资源文件 （以.js文件形式存在）

<scripttype="test/javascript"src="js资源文件路径"></script>

2.知识点

​1）$("#id") --- 根据标签的id属性值获取标签对应的jquery对象

​2）html() --- 获取标签体里的内容

​3）css("css属性"，"css属性值") --- 设置标签的css样式

三、Jquery对象与DOM对象

区别：

​1.通过document.getElementById(..)获取的dom对象，不能使用jquery定义的函数

​2.通过jquery方式获取的对象为jquery对象 $("#id")，可以调用jquery定义的函数

四、Jquery对象选择器

1.通过jquery选择器获取jquery对象 [ 重点 ]

​1）基本选择器

​$("#id") --- id选择器，根据标签的id属性值，得到标签所有对应的jquery对象 [ 重点 ]

​$(".class") --- 类选择器，根据标签的class属性值获得相应的jquery对象

​$("标签名") --- 标签选择器，根据标签名获取jquery对象 [ 重点 ]

​$("div,span") --- 多路标签选择器

​$("*") --- 全选择器

​注意：$ 就是 jQuery 这几个字母

2）层次选择器

​$("选择符1 选择符2") -- 后代选择器，获取所有出现在选择器1里的选择符2（包括孩子和孙子......）

​$("选择符1>选择符2") -- 孩子选择器，获取选择符1里面的选择符2标签（只包括孩子）

​$("选择符1~选择符2") -- 后续所有的兄弟选择器

​$("选择符1+选择符2") -- 后续第一个兄弟选择器

3）过滤选择器

​概念：从一组jquery对象中，筛选出有用的jquery对象

​基本过滤选择器

​:first ---- 获取一组jquery对象中的第一个jquery对象，例：$("div:first") [ 重点 ]

​:last ---- 获取一组jquery对象中的第一个jquery对象，例：$("div:last")

​:not（"选择器"） ---- 排除指定的选择器对象，例：$("div:not('#dd')")

​:even ---- 获取一组jquery对象中下标为偶数的jquery对象，下标从0开始，例：$("div:even")

​:odd ---- 获取一组jquery对象中小标为奇数的jquery对象，例：$("div:odd")

​:eq(index) ---- 获取下标为index的jquery对象，例：$("div:eq(0)")

​:gt(index) ---- 大于给定下标的jquery对象，例：$("div:gt(1)") [ 重点 ]

​:lt(index) ---- 小于给定下标的jquery对象，例：$("div:lt(1)")

内容过滤选择器

​:contains(文本内容) ---- 获取包含指定内容的jquery对象，例：$(".aa:contains('xiaohei')")

​:empty ---- 获取没有内容的jquery对象，例：$("div:empty")

​:has(选择器) ---- 选择包含特定元素的jquery对象，例：$("div:has('div')")

​:parent ---- 获取为父元素的jquery对象，例：$("div:parent")

可见性过滤选择器

​:hidden ---- 获取一组jquery对象中被隐藏的标签，例：$("div:hidden")

​:visible ---- 获取可见的jquery对象，例：$("div:visible")

​属性过滤选择器

​[attribute] ---- 获取一组jquery对象中含有指定属性的标签，例：$("select option(value)")

​[attribute=value] ----获取一组jquery对象中的属性为value的标签对象 [ 重点 ]

​例：$("input[type=checkbox]")

​注意：给标签设置属性 attr() prop()

​在设置属性值时如果attr()不行就用prop()

表单属性过滤选择器

​:checked ---- 获取一组jquery对象中的被选中的标签对象 checked=true的[ 重点 ]

​例：$("input[type='checkbox']:checked").attr()

​:selected ---- 获取一组option标签对象中的被选中的option [ 重点 ]

​js ---> var tag = document.getElementById("pro");

​var value = tg.options[tag.selectedIndex].value;

​jquery ---> var value = $("#pro option:selected").val();

五、通过DOM对象获取jquery对象

Dom 与 Jquery
	Dom对象
		通过原始js代码获取的对象一定是dom对象
			document.get....
			document.create.....
		
	Jquery对象
		1.通过jquery方式获取对象jquery对象
		2.将dom对象转为jquery对象
			$(dom)  --->  jquery对象   例：var divDom = document.getElementById("dd");
										  $(divDom).css();
	注意：只有jquery对象才能调用jquery相关方法
		普通标签：text()	html()
		设置样式：css("","")  css({key:value,...})
		获取value属性：val()
		设置标签属性：attr()  prop("","")|prop({})

1.通过dom对象获取jquery对象

​ var jqueryObject = $(dom对象)

​ 2.通过html标签获取jquery对象

​	var div = $("

chenyu
");
​	var input = $("
");

​	var span = $("chenyu");

六、Jquery对象的常用功能

注意：jquery对象支持链式调用，可以将所有功能通过.的方式全部缀在对象之后 obj.xx().xx()...

1.length()或者size() --- 获取一组jquery对象的个数

2.遍历一组jquery对象 --- each()

	语法：$("li").each(function(idx)){
​	this	---	代表当前正在被遍历的对象，是一个dom对象
​	使用时，$(this).css().attr()....
​	}）；
​	全局遍历$.each(#("div").function(idx,dd){
​	#(dd).css().attr()
​	});
​	此处idx表示正在被遍历的对象的下标

3.获取或者设置jquery对象的属性 --- prop() attr()

​ 获取属性 --- jquery对象.prop(属性名)

​ 设置属性 --- jquery对象.prop(属性名，属性值)

​ 如果属性不存在，函数会自动为对象添加属性

​ 删除属性 --- jquery对象.removeAttr(属性名)

如果需要设置多个属性	$("#input").prop("type","text").prop("name","btn");

​	$("#input").prop((type:"text",name:"btn"));

4.获取和设置dom样式

​ 1）获取或者设置css样式

​ css() --- 单个设置css样式

​ 获取 --- jquery对象.css("css属性名")；

​ 设置or修改 --- jquery对象.css("属性名"，"属性值");

​ 2）关于隐藏和显示标签

​ hide(time) --- 在time毫秒内隐藏jquery对象看（有动画效果）

​ show(time) --- 以动画效果，在time毫秒内显示一个jquery对象

​ 3）关于添加一类css样式

​ jquery对象.addClass('css里的一类样式的class名') --- 等价于jquery对象.prop("class","value");

​ jquery对象.removeClass()

4）三个关于内容处理

​ html() --- 设置或者获取标签体里的内容（包括子标签和文本内容），等价于js里的innerHTML

​ 获取 --- jquery对象.html()；

​ 设置 --- jquery对象.html(内容);

​ text() --- 设置或者获取标签体里的文本内容

​ val() --- 设置或者获取标签体里的value属性值

​ 获取 --- jquery对象.val()；

​ 设置 --- jquery对象.val(值)；

​ 5）向指定标签中存取数据 data

​ 只有一个参数 代表在当前标签对象上获取这个参数对应的值

​ 设置：$("#dd").data("name","张三")；

​ $("#dd").data("age","23");

​ 获取：$("#dd").data("name");

​ 移除：$("#dd").removeDate("name");

​ 注意：保证键名不一致，保存的数据不显示，可以在之后调用

​ 6）测试滑动效果 slideDown slideUp 元素需要隐藏（display:none）

​	例：$("#dd").slideDown(200, function(){

​	});

​ 7）动画效果

例：$("#ddd").animate({

​	"marginLeft":"200px",

​	"backgroundColor":"blue",//不可直接使用

​	});

​ 注意：如果要实现颜色动画效果，要添加jquery.color.js或者添加jquery-ui.js（ps：后者涵盖较多）

//实例：用data、事件等功能实现div颜色鼠标移入改变，移出恢复
$("div").mouseover(function(){
   	//保存原来样式
    $(this).data("aa",$(this).prop("backgroundColor"));
    //修改新的样式
    $(this).css("background", "blue");
}).mouseout(function(){
   $(this).css("background", $(this).data("aa")); 
});

七、Jquery对象添加事件

事件三要素：

1.事件源		通常指html中标签
2.事件		 发生动作  单击  双击...
3.事件处理程序  通常函数完成功能 

1.js里的事件处理

标签式事件处理	
<a href="" onclick="fun()"></a>
编程式事件处理
<script type="text/javascript">
	window.onload = function(){
        var tag = document.getElementById("btn");
        tag.onclick = function(){};
    }
</script>

2.jquery里的编程式事件处理

第一种：
<script type="text/javascript">
		$(document).ready(function(){     ===>	window.onload=function{}
            jquery代码
        });
</script>
第二种：
<script type="text/javascript">
	$(function(){
        $("#btn").click(function(){});
    });
</script>

八、复合事件

$(function(){
   //1.9之后废弃，但是通过各种方法可以加入
   $("div").toggle(functionn(){
      console.log("===1===");             
   },function(){
   	  console.log("===2==="); 
   },function(){
   	  console.log("===3==="); 
   });
});

九、图片建议放大

$(function(){
    //鼠标移入
    $("#img").mouseover(function(e){
        //0.获取鼠标的位置
        var x = e.pageX+20;//e.clientX;
        var y = e.pageY+20;//e.clientY;
        //1.创建一个div对象,并使用绝对路径，浮动显示
        var div = $("<div id="showImg"/>").css({
            						"position":"absolute",
            						"top":y,"left":x,
            						"display":"none"
        						});
        //2.创建一个img标签
        var img = $("<img>").attr({//设置属性
            					 "src":$(this).attr("src")
                                  }).css({//设置样式
            					 	"width":$(this).css("width")*2,
                				 	"height":$(this).css("height")*2
        							});
        
        //3.将图片放入div中
        div.append(img);
        
        //4.将div放入页面中
        $("body").append(div);
        //5.显示出来
        div.show(2000);
    }).mousemove(function(e){//绑定鼠标移动事件
        
        //0.获取当前鼠标的位置
        var x = e.pageX;//e.clientX;
        var y = e.pageY;//e.clientY;
        //1.获取页面中的div浮层
        $("#showImg").hide().css({
            "top":y+20,
            "left":x+20,
        });
    }).mouseout(function(){
            $("#showImg").remove();
    });
});

注：使用过程中还应注意对jquery其他插件的使用

作者：Cszdyz2020
链接：前端技术--JQuery - Cszdyz2020 - 博客园
来源:博客园