jQery基础学习的笔记

时间  2019-12-04
标签 jqery 基础 学习 笔记 繁體版
原文   原文链接

jQery基础学习的笔记

多库共存问题

释放$的做用

var my=.noConflict(); 此时的只是一个变量 my此时表明 $ 拥有控制权javascript

注意：在JQuery中 jQuery与$ 效果同样css

jQuery中的==$.fn==

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每个有效。html

注意：经常使用与jQuery组件的开发java

$.fn.method()=function(){}的调用把方法扩展到了对象的prototype上，因此实例化一个jQuery对象的时候，它就具备了这些方法。能够直接的去调用jquery

jQuery选择器及应用

jQuery获取元素的方式

  1. 根据id获取
    • id选择器
    • ==用法：==$("#id的值");
    • 获取的元素的个数：一个
" class="hljs 
  
  
  
  

 
">$("#div")
复制代码

  1. 根据标签的名字获取编程

    • 标签选择器
    • ==用法：==$("标签名字");
    • 获取的元素的个数：多个
// <div id="btn" class="dv"></div>
$(".di")
复制代码
  1. 根据类样式的名字获取
    • 类选择器
    • ==用法：==$(".类样式的名字");
    • 获取的元素的个数：多个
// <div id="btn" class="dv"></div>
$("div")
复制代码
  1. 标签加类选择器
//<li class="dv">nihao </div>
        $("li.dv")
复制代码
  1. 层次选择器
<ul id="uu">
	<li></li>
	<li></li>
	<li></li>
</ul>
复制代码
//获取全部的li标签
$(function () {
     $("#uu>li")
})

复制代码

6.过滤选择器浏览器

  • even 偶数 选择器
  • odd 奇数 选择器
$(".wrap li:odd").css("background","red");   //设置li奇数行的样式
$(".wrap li:even").css("background","blue");//设置li偶数行的样式
复制代码

7.索引选择器bash

  • ==lt(index)==：设置索引小于index的全部的标签元素
  • ==eq(index)==：设置索引为index的标签元素
  • ==gt(index)==：设置索引大于index的全部的标签元素
//设置ul中的索引为4的li的标签元素
$(".wrap li:eq(4)").css("background","red");
//设置ul中的索引大于4的全部li的标签元素
$(".wrap li:gt(4)").css("background","blue");
//设置ul中的索引小于4的全部li的标签元素
$(".wrap li:lt(4)").css("background","green");
复制代码

jQuery中常见的几个方法

注意：如下几个方法，括号里面什么都不写表示获取，写内容表示设置markdown

  • ==.html()== 方法：
    • 设置标签中间显示其余标签及内容，相似于==innerHTML==
  • ==.text()== 方法：
    • 设置标签中间显示的文本内容，类型于==innerText==
  • ==.val()== 方法：
    • 设置input标签中value值，相似于==value==
  • ==.css()== 方法：
    • 设置元素的样式，相似于==style==
  • ==.attr()== 方法：
    • 获取属性值

jQuery 样式操做

设置样式

  • .css() 为标签添加样式
    • .css( "属性" , "属性值" )
    • .css( "属性" , "属性值").css( "属性" , "属性值" )
    • .css( {"属性" : "属性值" } )

("#dv").css("background","red");("#dv").css("background","red").css("background","red"); $("#dv").css( { "background" : "red" , "width" : "20px"} );app

//获取宽和高的属性值---->数字类型 var width=("#dv").width()*2; var height=("#dv").height()*2; //设置元素的宽和高--->参数能够是数字也能够是字符串 ("#dv").width(width);("#dv").height(height);

添加样式

  • .addClass() 为元素添加类样式
    • addClass(" 类样式名字 ")； 添加一个类样式
    • addClass(" 类样式名字1 类样式名字2 ")； 添加多个类样式
    • 注意：添加多个样式的时候 中间以空格隔开

("#dv").addClass("cls"); 一个样式("#dv").addClass("cls_1 cls_2"); 多个样式

移除样式

  • removeClass() 移除样式
    • removeClass( " 类样式名字 " )； 移除类样式
    • removeClass( ) 移除当前元素全部的样式

("body").removeClass("cls");("body").removeClass();

判断是否应用样式

  • hasClass() 判断当前元素是否应用了某个类样式
    • hasClass( " 类样式名字 " )

var result=$("#dv").hasClass("cls"); 返回值为：==true==、==false==

切换元素样式

  • toggleClass(); 切换元素的类样式
    • toggleClass( " 类样式名字 ");
    • 注意：该方法能够添加和移除类样式 屡次操做

$("body").toggleClass("cls");//切换类样式

常见的样式的操做

  1. 获取与设置宽高

//获取宽和高的属性值---->数字类型 var width=("#dv").width()*2; var height=("#dv").height()*2; //设置元素的宽和高--->参数能够是数字也能够是字符串 ("#dv").width(width);("#dv").height(height);

  1. 获取设置位置

("#dv").offset().left;("#dv").offset().top; $("#dv").offset({"left":200,"top":200});

  1. 获取滚动条高度

(this).scrollLeft()(this).scrollTop()

链式编程

示例：

$(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");

注意：当发生断链的时候可使用 ==.end()== 方法恢复到锻炼以前的效果

$(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");

jQuery中的遍历

向下遍历

  1. childen(可选参数）
    • 只能遍历他的下一级（儿子辈）

(" #dv ").childen()(" #dv ").childen(" li ")

  1. find(必选参数）
    • 能够找到任意一级参数

$(" #dv ").find(" li ")

向上遍历

  1. parent(可选参数）
    • 只能遍历他的上一级（父辈）

$(" #dv ").parent()

  1. parents(）
    • 向上遍历全部的元素

$(" #dv ").parents()

  1. parentUntil(）
    • 向上在一个区间内遍历全部的元素

向上遍历a标签到div标签之间的全部元素 $(" a ").parentUntil("div")

同级遍历

1.next();

  • 获取的是当前元素的下一个兄弟元素

$(this).next().css("backgroundColor","green");

2.nextAll();

  • 获取的是当前元素的后面的全部的兄弟元素

$(this).nextAll().css("backgroundColor","green");

3.nextUntil();

  • 同级元素下面元素的一个区间

同级遍历 li1 标签到 li2 标签之间的全部元素 $("# li1 ").nextUntil("# li2")

4.prev();

  • 获取的是当前元素的前一个兄弟元素

$(this).prev().css("backgroundColor","green");

5.prevAll();

  • 获取的是当前元素的前面的全部的兄弟元素

$(this).prevAll().css("backgroundColor","green");

6.prevUntil();

  • 同级元素上面面元素的一个区间

同级遍历 li1 标签到 li2 标签之间的全部元素 $("# li1 ").prevUntil("# li2")

7.siblings();

  • 获取的是当前元素的全部的兄弟元素(本身除外)

$(this).siblings().css("backgroundColor","green");

过滤效果

1.first();

  • 第一个符合条件的元素

得到第一个p标签元素 $(“div p”).first();

2.last();

  • 最后一个符合条件的元素

得到最后一个p标签元素 $(“div p”).last();

3.eq(index);

  • 指定第几个标签元素
  • 下标从 0开始

得到第四个p标签元素 $(“div p”).eq(3);

4.filter();

  • 过滤留下特定的

过滤全部不是 cls样式的标签元素 $(this).filter(".cls");

5.not();

  • 过滤掉指定的

过滤全部是 cls样式的标签元素 $(this).not(".cls");

each()方法的使用

  • each：迭代方法（循环）
    • 参数1：索引
    • 参数2：对象
$("#uu>li").each(function (index,element) {
   //第一个参数是索引,第二个参数是对象
   $(element).css("opacity",(index+1)/10);
});
复制代码

jQuery中的动画效果

动态效果

  • 显示与隐藏
  • 单位：毫秒
  • $("ul").show( 数字 | slow | normal | fast );
  • $("ul").hide( 数字 | slow | normal | fast );
  • $("ul").toggle( 数字 | slow | normal | fast );
    • slow：600ms
    • normal：400ms
    • fast：200ms
$("ul").show(500);			//显示
$("ul").hide(slow);			//隐藏
$("ul").toggle(normal);		//显示 / 隐藏 
复制代码

案例：几张图片依次的显示与隐藏

$(function () {
	$("#btn1").click(function () {
	
		//获取div,最后一个图片,隐藏
		$("div>img").last("img").hide(800,function () {
		
			//arguments.callee至关于递归
			$(this).prev().hide(800,arguments.callee);
		});
	});
	
	//显示
	$("#btn2").click(function () {
		$("div>img").first("img").show(800,function () {
		
			//arguments.callee至关于递归
			$(this).next().show(800,arguments.callee);
		});
	});
});

复制代码

滑动效果（向上、向下）

  • 滑入： slideUp( 数字 | slow | normal | fast )
  • 滑出：slideDown( 数字 | slow | normal | fast )
  • 切换划入滑出：slideToggle( 数字 | slow | normal | fast )
    • slow：600ms
    • normal：400ms
    • fast：200ms

( “div" ).slideUp(1000)；( “div" ).slideDown(1000)； $( “div" ).slideToggle(1000)；

淡入与淡出效果

  • 淡入： fadeIn( 数字 | slow | normal | fast )
  • 淡出：fadeOut( 时间 )
  • 淡入/淡出：fadeTaggle( 时间 )
  • 淡化透明度：fadeTo( 时间，透明度)

("#dv").fadeIn(1000);("#dv").fadeOut(1000); ("#dv").fadeToggle(1000); //一秒钟 透明度达到0.3("#dv").fadeTo(1000,0.3);

其余方式

中止动画

  • .stop()方法用来中止当前动画
  • 通常会与show()和hide()方法配合使用

("ul").stop().show(500); //显示("ul")stop().hide(slow); //隐藏

jQuery中animate方法的使用

  • animate(对象，时间，函数）
    • 第一个参数：是键值对---对象（数值的属性能够改，颜色不能改）
    • 第二个参数：时间---1000毫秒
    • 第三个参数：匿名函数---回调函数
$(function () {
	$("#btn").click(function () {
		$("#dv").animate({"width":"300px","height":"300px","left":"300px"},1000,function () {
			$("#dv").animate({"width":"50px","height":"30px","left":"800px","top":"300px","opacity":0.2},2000);
		});
	});
复制代码

jQuery中HTML的操做

建立元素的方式

  • jQuery中建立元素的方式:
    • 1.$("标签的代码")
    • 2.对象.html("标签的代码");
var aObj=$("<a href='http://www.baidu.com'>百度</a>");
$("#div").html("<p>这是一个p标签</p>")

复制代码

添加建立的元素

  1. append(元素） ==最后一个子节点==
    • 把元素添加到被选中元素里面的结尾（被选中元素里边 div里面）

//把元素添加到div中 $("#dv").append(aObj);//把超连接追加到div中

  1. pripend(元素）==第一个子节点==
    • 把元素添加到被选中元素里面的前面（被选中元素里边 div里面）

//把元素插入到某个元素的前面 //$("#dv").prepend(aObj);

  1. before(元素） ==添加兄弟==
    • 把元素添加到选中元素的前面（被选中元素外边 div外边）

//把元素添加到当前元素的前面(兄弟元素来添加) //$("#dv").before(aObj);

  1. after(元素） ==添加兄弟==
    • 把元素添加到选中元素的后边（被选中元素外边 div外边）

//把元素添加到当前元素的后面(兄弟元素来添加) //$("#dv").after(aObj);

  1. appendTo(）
    • 把一个对象直接加到另一个对象里面
>var obj = $("<p></p>");
>把 obj对象 主动的加到div中
>obj.appendTo( $( "#div" ) )
复制代码

元素属性的操做

  1. .attr()
    • 设置属性与获取属性
      • .attr("属性") 获取到属性里面的属性值
      • .attr("属性“，”属性值") 为元素设置属性值

获取到a标签里面的超连接 ("a").attr( "herf" ); 为a标签设置超连接("a").attr( "herf"," www.baidu.com " );

删除元素

  1. .html()
    • 清空元素中的内容

$("#dv").html("");//清空元素中的内容

  1. empty()

    • 清空元素中的内容

//$("#dv").empty();//清空元素中的内容

  1. remove()

    • 移除元素自身---自杀

//$("#dv").remove();//移除元素自身---自杀

克隆元素

  1. .clone()
    • 克隆元素

克隆span标签给div2标签 var spanObj=("#dv>span").clone();//克隆,复制了这个元素("div2").append(spanObj);

设置元素的全选与全不选

  1. .prop()方法

    • 能够设置元素的全选与全不选
    • 案例：
<input type="button" value="全选" id="btnAll"/>
<input type="button" value="全不选" id="btnNoAll"/>
<div id="dv">
 <input type="checkbox" value="1"/>吃饭
 <input type="checkbox" value="2"/>睡觉
 <input type="checkbox" value="3"/>打豆豆
 <input type="checkbox" value="4"/>打篮球
 <input type="checkbox" value="5"/>打足球
 <input type="checkbox" value="6"/>打铅球
 <input type="checkbox" value="7"/>打桌球
</div>
</body>
复制代码
 //两个按钮:1按钮全选,2全不选
 $(function () {
 //获取第一个按钮,点击---全选
 $("#btnAll").click(function () {
 $("#dv :checkbox").prop("checked",true);
 });
 //获取第二个按钮,点击---全不选
 $("#btnNoAll").click(function () {
 $("#dv :checkbox").prop("checked",false);
 });
 });

复制代码

jQuery中事件的相关操做

绑定事件

  1. .bind()
  • 能够为元素同时绑定多个事件
  • 第一个参数是：事件名字,
  • 第二个参数是：事件处理函数-匿名函数

绑定一个事件 .bind( "事件名" , "处理函数" ) 绑定多个事件 .bind( { "事件名": "处理函数" , "事件名": "处理函数" , "事件名": "处理函数" } )

//绑定单个事件
 $("#btn").bind("click",function () {
	alert("我被点了");
});

 //bind()方法能够为元素同时绑定多个事件
$("#btn").bind({"click":function(){
	alert("我被点了");
},"mouseover":function(){
	$(this).css("backgroundColor","red");
},"mouseout":function(){
	$(this).css("backgroundColor","");
}});
复制代码
  1. .delegate()
  • 参数1.要绑定事件的元素---p
  • 参数2.要绑定的事件的名字---click
  • 参数3.绑定事件的处理函数---匿名函数
//给div标签里面的p标签添加事件
$("#dv").delegate("p","click",function () {
	alert("我被点了");
})
复制代码
  1. on()
  • 两个参数
    • 1事件的名字
    • 2事件处理函数
  • 三个参数
    • 1,事件的名字
    • 2.要绑定事件的元素--p
    • 3事件处理函数

父级元素.on("事件类型","子级元素",事件处理函数);

$("#btn").on("click",function () {
	//建立p添加到div中
	$("#dv").append($("<p>这是一个p</p>"));
	
	//为div中的p标签绑定事件
	$("#dv").on("click","p",function () {
		alert("我被点了");
	});
});
复制代码

注意： ==在实际的应用中，通常状况下on比较经常使用，bind与delegate不经常使用==

解绑事件

  1. 绑定与解绑事件

    • bind() unbind()
    • deledae() undelegate()
    • on() off()

  2. 参数

    • （事件名字）要解绑的事件的名字
    • （元素，事件名字）为那个元素解除那种绑定事件

  3. 示例：

$("#dv").unbind("click");
$("#dv").undelegate("click");
$("#dv").off("click");
复制代码
  1. 父子元素事件解绑关系
//下面的代码是把子级元素的点击事件解绑了,父级元素的点击事件还存在
$("#dv").off("click","**");
//移除父级元素和子级元素的全部的事件
$("#dv").off();
复制代码

注意：

父级元素和子级元素都是经过正常的方式绑定事件,若是经过off解绑的>时候,父级元素的事件解绑了,子级元素的事件没有解绑

可是:若是子级元素是经过父级元素调用delegate的方式绑定的事件,父>级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事>件都会被解绑
复制代码

触发事件

  1. 直接调用要触发的元素的方法
  2. 使用： trigget(事件名)
  3. 使用： triggerHandler(事件名)
$(function () {
	$("#btn1").click(function () {
		$(this).css("backgroundColor","red");
	});
	
	//点击第二个按钮-触发第一个按钮的点击事件
	$("#btn2").click(function () {
	
		//触发事件--3三种方式
		$("#btn1").click();
		
		$("#btn1").trigger("click");//触发事件
		
		$("#btn1").triggerHandler("click");//触发事件
	});
});
复制代码

注意：trigger() 与 triggerHandler() 区别

trigger() 会触发浏览器的默认行为，并执行事件 triggrtHandler() 不会触发浏览器默认行为，可是会执行事件 例如：获取到焦点是浏览器的默认行为

$("#txt").trigger("focus");		//文本框获取到焦点了
$("#txt").triggerHandler("focus");	//文本框没有获取到焦点了
复制代码

事件对象

$("div").on("click",function(event){} )

  • event.delegateTarget：代码绑定事件的对象
  • event.currentTarget：绑定事件的对象
  • event.target：真正触发事件的对象

取消冒泡事件与默认事件

取消冒泡事件

  1. event.stoPropagation()
  2. return false

取消默认事件

  1. event.preventDefault()
  2. return false;

例如能够取消a标签的默认事件 $("a").preventDefault()

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程