初学入门jQuery 知识点以及基础题目总结（一）

一 、  jQuery简介

•       jQuery由美国人John Resig于2006年创建
•       jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
•       设计思想         write less,do more

•       jQuery的优势    

1.体积小，压缩后只有100KB左右

2.强大的选择器出色的DOM封装

3.可靠的事件处理机制

4.出色的浏览器兼容性

5.使用隐式迭代简化编程

5.丰富的插件支持

二、 如何在页面中引入jQuery

引入jQuery在网上外国官网或者中国官网上可以下载    jQuery 库   或者可以直接引入 网络地址

1.jQuery 网络库地址

•     jQuery 官网： http://jquery.com
•     中国版jQuery 网址 ：https://www.bootcdn.cn/

2.引入效果

• 本地引入：https://www.bootcdn.cn/jquery/3.5.1/   在网站上找到3.5.1 版本的jQuery版本（已经是现今最新的版本，）

选中 https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js 后右键单击转到 ：在新的页面中右键单击后点击另存为，

会在相应位置生成一个 名字为 jQuery.js 的js文件  。 之后再于项目中引入：

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

• 网络引入：

    <script src="https://cdn.ccbootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

三 、 Jquery中预加载和选择器

1.jQuery 中的预加载  $(document).ready()

网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完

写法：

 $(document).ready(function(){//执行内容})  $(doc

ument).ready()$(document).$(document).ready()ready()

简化写法：

$(function(){
  //执行代码
}) ;

 

2. jQuery 选择器

jQuery 中的选择器跟 css中的选择器基本相同，效果基本相同，表达方式有所不同：

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$("h2" )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素
并集选择器	selector1,selector2,..., selectorN	将每一个选择器匹配的元素合并后一起返回	$("div,p,.title" )选取所有div、p和拥有class为title的元素
全局选择器	*	匹配所有元素	$("*" )选取所有元素
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$("#menu span" )选取#menu下的<span>元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素<span>
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>
属性选择器（开头）	[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(" [href^='en']" )选取href属性值以en开头的元素
属性选择器（结尾）	[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素
属性选择器（包含）	[attribute*=value]	选取给定属性是以包含某些值的元素	$(" [href* ='txt']" )选取href属性值中含有txt的元素
可见性过滤选择器	:visible	选取所有可见的元素	$(":visible" )选取所有可见的元素
可见性过滤选择器	:hidden	选取所有隐藏的元素	$(":hidden" ) 选取所有隐藏的元素

 

四 、   追加和移除样式和属性

（1）.为元素增加减少类

1.添加样式

$("selecetor").addClass("newClass");

2.移除样式

$("selector").removeClass("oldClass");

3.切换样式

模拟了addClass()与removeClass()实现样式切换的过程

$("selector").toggleClass('newclass') ;

4.判断是否含有样式

$('selector'). hasClass('newclass');

 

（2）.为元素增加减少内容

1.HTML代码操作

html()可以对HTML代码进行操作，类似于JS中的innerHTML

$("div.left").text("<div class='content'>…</div>");

2.标签内容操作

text()可以获取或设置元素的文本内容

$("div.left").text("<div class='content'>…</div>");

html( ) 和text( )方法的区别

html( )	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html(content)	content为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text( )	无参数	用于获取所有匹配元素的文本内容
text (content)	content为元素的文本内容	用于设置所有匹配元素的文本内容

 

3.val()   有参数是改变他的val属性,无值是获取他的val属性

$('#index').val('')  //内容设置为空

 

（3）.设置元素插入删除节点

1.元素内部插入节点：

 

append(content)	$(A).append(B)表示将B追加到A中 如：$("ul").append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中 如：$newNode1.appendTo("ul");
prepend(content)	$(A). prepend (B)表示将B前置插入到A中 如：$("ul"). prepend ($newNode1);
prependTo(content)	$(A). prependTo (B)表示将A前置插入到B中 如：$newNode1. prependTo ("ul");

 

2.元素外部插入同辈节点：

after(content)	$(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul");
before(content)	$(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前 如：$newNode1.insertBefore("ul");

 

3.替换节点： 将前者的节点替换为后者的节点

replaceWith()	$(".gameList li:eq(2)").replaceWith($newNode1);
replaceAll()	$($newNode1).replaceAll(".gameList li:eq(2)");

4.复制节点

$(selector).clone([includeEvents]) ;

includeEvents的参数为 true 或 false  , true 复制事件处理，false 时反之t

（3）.设置元素属性

1.attr()用来获取与设置元素属性

$(selector).attr({[name1:value1]…[nameN:valueN]}) ;

2.removeAttr()用来删除元素的属性

$(selector).removeAttr(name) ;