Promise SpringApplication editor npm安装 Angular magento java数据分析 erp项目描述 hadoop创建文件夹 string转16进制 kubernetes架构 python3删除文件 input函数python python语言 java在线课程 vbs脚本 js上传图片 离散数学pdf js格式化时间 ad下载 linux多线程编程 go程序设计语言 谷歌浏览器访问助手 磁芯大战 allowtransparency 炫舞爱的惊喜 Linux进程查看 趣学python编程 php定时任务 snmp网络管理软件 只狼月隐糖 编译软件 生成海报 qq个人文件夹清理 华为虚拟按键 ps魔棒工具在哪 16g101一3图集 神界原罪2石像鬼迷宫 mysql查询优化 ps左右翻转
当前位置: 首页 > 学习教程  > 编程语言

【前端】jQuery 基础复习、巩固

2020/8/11 20:18:32 文章标签:

JQuery 基础

1.概念

1. 概念: 一个JavaScript框架。简化JS开发
	* jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
	* jQuery设计的宗旨	是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
	* 它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
	* JavaScript框架:本质上就是一些js文件,封装了js的原生代码而已

2.jquery版本选择

根据项目的需求,选择具体的版本。
jQuery1.x版本的框架时兼容所有IE浏览器的。
而2.x版本的jQuery框架并不支持低端IE浏览器。此处的低端IE浏览器指的是IE8版本以及8版本以下。

* 目前jQuery有三个大版本:
	1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,
		功能不再新增。因此一般项目来说,使用1.x版本就可以了,
		 最终版本:1.12.4 (2016年5月20日)
	2.x:不兼容ie678,很少有人使用,官方只做BUG维护,
		 功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,
		 最终版本:2.2.4 (2016年5月20日)
	3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,
		 一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。
		 目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)
* jquery-xxx.js 与 jquery-xxx.min.js区别:
	1. jquery-xxx.js:开发版本。给程序员看的,有良好的缩进和注释。体积大一些
	2. jquery-xxx.min.js:生产版本。程序中使用,没有缩进。体积小一些。程序加载更快

3.JQuery对象和JS对象区别与转换

	1. JQuery对象在操作时,更加方便。
    2. JQuery对象和js对象方法不通用的.
    3. 两者相互转换
        * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
        * js -- > jq : $(js对象)

*****获取对象,检验是否获取到

1.通过常见的jq.get(index),jq[0],获取value确定。
2.通过jq.html() 查看。
3.如果都没有看到你希望获取到的元素,那么很有可能没有获取到。认真检查层次关系!八成是写错了。

4.选择器

4. 选择器:筛选具有相似特征的元素(标签)

	1. 基本操作学习:
		1. 事件绑定
			//1.获取b1按钮
            $("#b1").click(function(){
                alert("abc");
            });
		2. 入口函数
			 $(function () {
	           
   			 });
			 window.onload  和 $(function) 区别
                 * window.onload 只能定义一次,如果定义多次,后边的会将前边的覆盖掉
                 * $(function)可以定义多次的。
		3. 样式控制:css方法
			 // $("#div1").css("background-color","red");
      		$("#div1").css("backgroundColor","pink");


2. 分类
		1. 基本选择器
			1. 标签选择器(元素选择器)
				* 语法: $("html标签名") 获得所有匹配标签名称的元素
			2. id选择器 
				* 语法: $("#id的属性值") 获得与指定id属性值匹配的元素
			3. 类选择器
				* 语法: $(".class的属性值") 获得与指定的class属性值匹配的元素
			4. 并集选择器:
				* 语法: $("选择器1,选择器2....") 获取多个选择器选中的所有元素
<ul id="lang" class="clang">
    <li id="java" >java</li>
    <li id="python" name="python" >python</li>
    <li id="c">c</li>
</ul>
<script>
    $(function () {
        $("ul")     //标签
        $("#lang")  //id
        $(".clang") //类
        $("#java,#python") //获取多个
    });
</script>

		2. 层级选择器
			1. 后代选择器
				* 语法: $("A B ") 选择A元素内部的所有B元素(包括孙子节点)		
			2. 子选择器
				* 语法: $("A > B") 选择A元素内部的所有B子元素(只包含儿子节点)
后代选择器的使用:得到所有的ul标签下的li标签
$("ul li")
子选择器的使用:只会得到儿子li,不会得到孙子li
$("ul > li")

		3. 属性选择器
			1. 属性名称选择器 
				* 语法: $("A[属性名]") 包含指定属性的选择器
			2. 属性选择器
				* 语法: $("A[属性名='值']") 包含指定属性等于指定值的选择器
			3. 复合属性选择器
				* 语法: $("A[属性名='值'][]...") 包含多个属性条件的选择器
<body>
<ul id="lang" class="clang">
        <li id="java" class="c" >java</li>
    <li id="python" name="python" >python</li>
    <li id="c">c</li>
</ul>
</body>
<script>
    $(function () {
        $("ul li[id]")                  //包含指定属性
        $("ul li[id='java']")           //包含指定属性+指定值
        $("ul li[id='java'][class='c']")//包含多个指定属性+指定值
    });
</script>

		4. 过滤选择器
			1. 首元素选择器 
				* 语法: :first 获得选择的元素中的第一个元素
			2. 尾元素选择器 
				* 语法: :last 获得选择的元素中的最后一个元素
			3. 非元素选择器
				* 语法: :not(selector) 不包括指定内容的元素
			4. 偶数选择器
				* 语法: :even 偶数,从 0 开始计数
			5. 奇数选择器
				* 语法: :odd 奇数,从 0 开始计数
			6. 等于索引选择器
				* 语法: :eq(index) 指定索引元素
			7. 大于索引选择器 
				* 语法: :gt(index) 大于指定索引元素
			8. 小于索引选择器 
				* 语法: :lt(index) 小于指定索引元素
			9. 标题选择器
				* 语法: :header 获得标题(h1~h6)元素,固定写法
首元素选择器 , 选择所有li中第一个。
$("#lang li:first");
尾元素选择器 , 选择所有li中最后一个。
$("#lang li:last");

非元素选择器 , 选择所有li中除了id为python的li。
$("#lang li:not(#python)")

偶数选择器,从 0 开始计数(取得偶数li)
$("#lang li:even")
奇数选择器,从 0 开始计数(取得奇数li)
$("#lang li:odd")

等于索引选择器 ,取得索引刚好等于指定的数字(索引0,即第一个li)
$("#lang li:eq(0)")
大于索引选择器,取得大于0.1,23。。。
$("#lang li:gt(0)") 
小于索引选择器,小于0,没有任何元素
$("#lang li:lt(0)")

标题选择器 , 获取所有h1到h6元素
$(":header") 

		5. 表单过滤选择器
			1. 可用元素选择器 
				* 语法: :enabled 获得可用元素
			2. 不可用元素选择器 
				* 语法: :disabled 获得不可用元素
			3. 选中选择器 
				* 语法: :checked 获得单选/复选框选中的元素
			4. 选中选择器 
				* 语法: :selected 获得下拉框选中的元素
<div id="div1">
    <input type="text" name="username" >
    <input type="password" name="password" disabled="disabled">
</div>

<div id="div2">
    <input type="checkbox" name="hobby" id="coding" value="coding">打代码
    <input type="checkbox" name="hobby" id="sport" value="sport">运行
    <input type="checkbox" name="hobby" id="game" value="game">游戏
</div>

<div id="div3">
    <select id="country">
        <option > 请选择</option>
        <option name="china" value="name">China</option>
        <option name="USA" value="USA">USA</option>
        <option name="uk" value="uk">uk</option>
    </select>
</div>
<script>
$("#div1 input:enabled"); //获取可用enabled ,username
$("#div1 input:disabled");//获取不可用disabled ,password

$("#div1 input:checked");//获取单选中的选中的元素
$("#div2 input:checked");//获取多选中的选中的元素

$("#div3 #country option:selected");//获取下拉框选中的元素。
</script>

5. DOM操作
	1. 内容操作
		1. html(): 获取/设置元素的标签体内容   <a><font>内容</font></a>  --> <font>内容</font>
		2. text(): 获取/设置元素的标签体纯文本内容   <a><font>内容</font></a> --> 内容
		3. val(): 获取/设置元素的value属性值(单选、多选、input也许会用到)
<div id="val" >
    <input id="username" value="username">
    <p>123<a>test</a></p>
</div>

<script>

$("#val").html(); //<input id="username" value="username">
取值:获取元素的value
$("#val #username").val();
设置新值:设置value属性
$("#val #username").val("new Value");
获取文本值
$("#val #username").val();	//new user
</script>

在这里插入图片描述


	2. 属性操作
		1. 通用属性操作
			1. attr(): 获取/设置元素的属性
			2. removeAttr():删除属性
			3. prop():获取/设置元素的属性
			4. removeProp():删除属性

			* attr和prop区别?
				1. 如果操作的是元素的固有属性,则建议使用prop
				2. 如果操作的是元素自定义的属性,则建议使用attr
1.通过 attr() 获取和设置元素
$("#lang #python").attr("value");
"python"
$("#lang #python").attr("value","new_py");
w.fn.init [li#python, prevObject: w.fn.init(1)]
$("#lang #python").attr("value");
"new_py"

2.通过 removeAttr(prop),删除指定的属性
$("#lang #python").removeAttr("value");
w.fn.init [li#python, prevObject: w.fn.init(1)]
$("#lang #python").attr("value");
undefined

3.通过 prop():获取/设置元素的属性
获取元素的属性
$("#java").prop("style");
CSSStyleDeclaration {0: "color", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "",}
设置元素的属性
$("#java").prop("style","color:red");
w.fn.init [li#java]

4. removeProp():删除属性

不知为何怎样都没成功删除过属性...所以Attr还是比较好用的。


		2. 对class属性操作
			1. addClass():添加class属性值
			2. removeClass():删除class属性值
			3.toggleClass():切换class属性,即存在就删除,不存在就添加
		toggleClass(“id”):
			判断如果元素对象上存在class=“id”,则将属性值one删除掉。
			如果元素对象上不存在class=“id”,则添加。
			相当于同时实现了addClass和removeClass的功能;
			4. css():
删除class属性值
$("#lang #java").removeClass();
$("#lang #java").prop("class")
""
添加class属性值
$("#lang #java").addClass("java_class");
$("#lang #java").prop("class")
"java_class"

改变css
$("#lang #java").css("color","red");

切换class属性,当指定class不存在时
$("#lang #java").toggleClass("one");
$("#lang #java").attr("class")
"one"
切换class属性,当指定class存在时
$("#lang #java").toggleClass("one");
$("#lang #java").attr("class")
""

在这里插入图片描述


	3. CRUD操作:
		1. append():父元素将子元素追加到末尾
			* 对象1.append(对象2): 将对象2添加到对象1元素内部,并且在末尾
		2. prepend():父元素将子元素追加到开头
			* 对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头
		3. appendTo():
			* 对象1.appendTo(对象2):将对象1添加到对象2内部,并且在末尾
		4. prependTo():
			* 对象1.prependTo(对象2):将对象1添加到对象2内部,并且在开头
		5. after():添加元素到元素后边
			* 对象1.after(对象2): 将对象2添加到对象1后边。对象1和对象2是兄弟关系
		6. before():添加元素到元素前边
			* 对象1.before(对象2): 将对象2添加到对象1前边。对象1和对象2是兄弟关系
		7. insertAfter()
			* 对象1.insertAfter(对象2):将对象2添加到对象1后边。对象1和对象2是兄弟关系
		8. insertBefore()
			* 对象1.insertBefore(对象2): 将对象2添加到对象1前边。对象1和对象2是兄弟关系
		9. remove():移除元素
			* 对象.remove():将对象删除掉
		10. empty():清空元素的所有后代元素。
			* 对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点
<body>
<button type="button" id="btn"  name="btn"  onclick="_abc()" >add</button>
<li id="php" > php is  the best language for web programming</li>
<ul id="lang" >
    <li id="java"  class="java" >java</li>
    <li id="python"  >python</li>
    <li id="c" >c</li>
</ul>


</body>
<script>
    function _abc(){
         var lang = $("#lang");
         var python = $("#python");
         var php = $("#php");
         //append:添加到结尾的二种方式
         lang.append(php);
         lang.append('<li id="php" > php is  the best language for web programming</li>');
		 //prepend:添加到开头
		 lang.prepend(php);
		 //appendTo 与append 相反。
		 php.append(lang);
		 //prependTo与prepend 相反。
		 php.prepend(lang);

		//after():添加元素到元素后边.即php添加到python之后
		 python.after(php);
		//before():添加元素到元素前边.即php添加到python之前
		 python.before(php);
		//insertAfter() 与after相反。
		//insertBefore()与before相反。

		//remove():移除元素,包括删除自己。
		php.remove();
		//empty():清空元素的所有后代元素。只删除后代,自己这个壳还在。
    }
</script>

本文链接: http://www.dtmao.cc/news_show_100329.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?