jQuery和AngularJS的区别浅析

1本质区别：JQuery是继prototype之后又一个优秀的Javascript库；AngularJS是一个优秀的前端JS框架，主要特点是：MVVM、模块化、自动化双向数据绑定、语义标签和依赖注入等。
2DOm操作的差异：jQuery可以根据用户交互添加和修改DOM元素，AngularJS会最大限度地减少对DOM的破坏和重建；3、效率问题：比如AngularJS支持框架内的单元测试，简化了测试问题，减少了模块之间的耦合，而jquery则注重实现效果，不关注效率问题。
4jquery的目的是减少前端人员开发特效的工作量。
难道只是为了达到效果，减少js代码量吗？当项目的重点是数据可视化和执行而不是分析时，AngularJS此时可能会更有效。
比那更好。

jquery常用方法及作用？

jQuery的功能

这篇博客是根据阮一峰前辈在2011年分享的内容编写的（原文链接：）

jQuery的核心就是可以选择一个网页元素，然后对其进行某些操作

我们知道jQuery是一个构造函数，因此我们可以使用选择表达式将选定的元素注入到jQuery构造函数（$）中以获取选定的元素。

选择表达式可以是CSS选择器：

也可以是jQuery特有的表达式：

在jQuery中最终选择网页元素后，你可以对其进行一系列的操作，所有的操作都可以链接在一起写成字符串，如：

去掉左边，即：

这是最强大的jQuery。
这是最受赞赏和最方便的功能。
它的原理是每个jQuery操作返回一个jQuery对象，因此不同的操作可以连接在一起。

jQuery还提供了.end()方法，该方法允许结果集后退一步：

创建新元素的方法很简单，只需传入new元素放入元素直接进入jQuery的构造函数就是这样：

移动元素在网页中的位置有两种方法：

（1）直接移动传递元素

(2)移动其他元素，使目标元素到达所需位置。

(1)该方法是使用.insertAfter()将div元素移动到p元素后面：

(2)该方法是使用.after()添加p元素到div元素之前：

从表面上看，这两种方法的效果是一样的，唯一的区别似乎就是操作视角不同。
但实际上，它们有一个很大的区别，就是返回的元素不同。
第一个方法返回div元素，第二个方法返回p元素。
您可以根据需要选择使用哪种方法。

使用该模式的操作方法有四对：

text(?)//读写文本内容

当用于返回内容时,返回所有匹配元素的文本内容（HTML标签将被移除）。

当用于设置内容时，所有匹配元素的内容都会被重写。

html(?)//读写HTML内容

设置或返回所选元素的innerHTML（文本+HTML标签）

attr('title',?)//读写属性

设置或返回所选元素的属性值。

css({color:'red'})//读写样式

设置或返回所选元素的一个或多个样式属性。

addClass('blue')

向所选元素添加一个或多个类。

此方法不会删除现有的类属性，而只会添加一个或多个类属性。

on('click',fn)

支持元素的动态绑定，即页面上的元素在添加或更改后仍然可以进行绑定，只要选择器必须是目标约束该部分的父元素element

off('click',fn)

用于删除通过on()方法添加的元素事件处理程序

如何使用jQuery

步骤如下：

1.将jQuery放在一个文件夹中。
稍后我们引用这个jQuery，我会将它放在我项目的js文件夹中。

2.然后我们开始编辑HTML界面代码。

3.使用脚本标签将jQuery注入到我们的HTML界面中。
src引号内是我们的jQuery路径名。

4.然后编写一对脚本标签并在其中编写jQuery导入函数。
这样，一旦我们的HTML被加载，我们的jQuery代码就会被执行。

常见的jQuery属性和方法是：

which属性：

获取标签：$("#id")

获取标签内的代码：.html()

获取标签内的文本：.text()

修改标签内的代码：.html("content");

修改文本标签：.html("content");

修改标签属性：attr("attributes","valueattribute");

添加样式：addClass("样式名称");

自动转换类型：convertClass（“姓名style");

获取样式：css

添加元素：add("element");

删除元素：.remove();

删除Score部分：.empty();

获取第二个li节点：var$li=$("ulli:eq(1)");

获取第二个li节点文本内容：varli_txt=$

方法：

一：插入按钮：

在每个匹配元素文本末尾append()添加内容

例如：p我想说：/p

代码：

?$("p").append("bHello/b");

结果是：p我想说：bHello/b/p

appendto()将所有匹配元素附加到指定元素。
事实上，使用此方法反转了通常的$(A).append(B)操作，这意味着不是将B附加到A，而是将A附加到B文本的后面

例如。
:p我会说：/p

代码：

结果是：p我的意思是：bHello/b/p

prepend()在每个匹配组件文本的内部内容前面添加。

例如：p我想说：/p

代码：

结果是：pbHello/b我的意思是：/p

prependto()将所有匹配的元素添加到指定元素中。
事实上，使用此方法反转了通常的$(A).append(B)操作，这意味着不是将B添加到A，而是将A添加到B之前

例如：pI想说：/p

代码：

$("bHello/b").prependto("p");

结果为：pbHello/bI意思是：/p

after()内部插入每个匹配元素后面的内容。

例如：p我想说：/p

代码：

结果是：p我的意思是：bHello/b/p

insertAfter在指定元素后面插入所有匹配的元素。
事实上，使用此方法反转了通常的$(A).append(B)操作，这意味着不是在A之后插入B，而是在B之后插入A。

例如：p我想要说：/p

代码：

结果是：p我想说：bHello/b/p

Before()在每个匹配元素之前插入内容

eg:p我想要说：/p

代码：

$("bHello/b").after("p");

结果是：pI会说：bHello/b/p

insertBefore()：在标签B之前插入标签A

二：删除：

①删除该节点包含的所有子节点同时删除，也可以通过参数选择

②空删除节点，可删除元素内所有子节点

三：替换按钮：

①replaceWith()是替换所有匹配的元素替换为指定的HTML或DOM元素

②replaceAll()

四：包裹节点：

①warp()用于替换所有单独包装的元素

②warpAll()对部件使用元素进行操作需要的元素wrap

③warpinner()用于将每个子内容（包括文本节点）用不同结构的标签包裹起来

五：设置和获取文本值text和HTML

1,html():

2,text

3,val

六：浏览节点

1.Children()：获取下一个匹配元素的子元素()：立即获取。
以下匹配同级元素

3：获取紧邻匹配元素之前的同级元素

4。
,siblings()：获取匹配元素前后的所有同级元素

5：获取最接近的匹配元素

七：css-dom

cssget样式属性

offset()

position

scroll

scrollLeft

样式操作：

1：获取样式并设置样式attr

eg:pclass="myClass"title="选择你最喜欢的水果"你最喜欢的水果是什么？/p

获取样式：varp_class=$("p").attr("class");

设置样式：$("p").attr("class","high");

2：添加样式addClass

style

.high{

font-weight:bold粗体字体

颜色：红色？字体颜色

.another{

字体粗细：斜体斜体

颜色:蓝色?字体颜色

/样式

添加样式：

$("输入：eq(2)").click(function(){$("p".addClass("another"))})

☆css中有如下规则：

①如果一个元素中添加了多个class值，则相当于将它们合并style

②如果不同的类设置了相同的样式，后面的类会覆盖前面的类

addClass?？attr

适用于同一页面元素?ptest/p?ptest/p

第一次使用?$"p".addClass("high");?$"p".attr("class","high");

第一次结果?pclass="high"test/ppclass="high"test/p?

重用$"p".addClass("另一个");?$"p".attr("class","another");

最终结果？pclass="highanother"test/ppclass="another"test/p

3：删除类型RemoveClass

pclass="highanother"test/p?

删除类型：$"p".removeClass("high");

删除两个：$"p".removeClass("high").removeClass("another");==$"p".removeClass("highanother")

全部删除Both:$"p".removeClass();

4：转换转换类型

5：判断是否包含类型hasClass

可用于判断一个元素是否包含某个类。
如果是，则返回true，否则返回false

常用的jquery方法

新窗口打开链接XHTMLStrict版本使用时不支持target="_blank"属性使用JQuery可以很好的解决这个问题在新窗口中打开网站

复制代码如下：

$(a[@rel$=external])click(function(){thistarget="_blank";});/*用法:ahref="target=_blankcss教程("padding""emem");//BTargetanythingaboveIEif($browsermsie$browserversion)$("#menulia")css("padding""emem");//CTargetIEandbelowif($browsermsie$browserversion=)$("#menulia")css("padding""emem");//DTargetFirefoxandaboveif($browsermozilla$browserversion="")$("#menulia")css("padding""emem");

使用JQuery进行字符串替换可以替换文本内容中的特定字符串

复制代码如下：

varel=$(#id);el(el()replace(/word/ig""));

等列高使用以下方法实现两列等高并不容易CSS.JQuery可以帮你解决这个问题

复制代码如下：

functionequalHeight(group){tallest=;groupeach(function(.){thisHeight=$(this)嘿ght();if(thisHeighttallest){tallest=thisHeight;}});groupheight(tallest);}/*用法:$(document)ready(function(){equalHeight($("recentarticle"));equalHeight($("footercol"));});*/

重置字体大小重置字体大小重置字体大小是一个非常常用的函数变量

$("resetFont")click(function(){$()css(fontsizeoriginFontSize);});//增加FontSize$("increaseFont")click(function(){varcurrentFontSize=$()css(fontsize);varcurrentFontSizeNum=parseFloat(currentFontSize);varnewFontSize=currentFontSizeNum*;$()css(fontsizenewFontSize);returnfalse;});//DecreaseFontSize$("decreaseFont")click(function(){varcurrentFontSize=$()css(fontsize);varcurrentFontSizeNum=parseFloat(currentFontSize);varnewFontSize=currentFontSizeNum*;$()css(fontsizenewFontSize);returnfalse;});});

禁用右键菜单有很多JavaScript脚本可以禁用右键菜单，但JQuery更容易

复制代码如下：

jQuery中常用的方法有哪些？这些方法是用来做什么的？这些jQuery方法位于哪里？

分为以下几类

1.选择器方法（定位器元素方法）

$("不同类型的选择器")

2、过滤器方法

$("xxx").find(）等

3.添加、删除、修改DOM元素的方法

如append/delete/html/copy等

4.添加、删除、修改M元素属性的方法

示例：attr/css/val等

5集合处理方法episode

示例。
、json/each等方法

6.事件的绑定方法

例如：click/bind/live/toggle等

7.常用方法

如ajax等