jquery与js的区别与基础操作

时间:2023-01-31 22:30:46

一.什么是 jQuery

jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是John Resig,于2006年创建的一个开源项目,随着越来越多开发者的加入,jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。它可以用最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐。

JQuery的优点:小巧、方便、功能强大。插件丰富、开源、免费。

二.Jquery的功能和优势

jQuery 作为 JavaScript 封装的库,他的目的就是为了简化开发者使用 JavaScript。主要功能有以下几点:

1.像 CSS 那样访问和操作 DOM
2.修改 CSS 控制页面外观
3.简化 JavaScript 代码操作
4.事件处理更加容易
5.各种动画效果使用方便
6.让 Ajax 技术更加完美
7.基于 jQuery 大量插件
8.自行扩展功能插件
jQuery 最大的优势,就是特别的方便。比如模仿 CSS 获取 DOM,比原生的 JavaScript要方便太多。并且在多个 CSS 设置上的集中处理非常舒服,而最常用的 CSS 功能又封装到单独的方法,感觉非常有心。最重要的是 jQuery 的代码兼容性非常好,你不需要总是头疼着考虑不同浏览器的兼容问题。

好!以上都是网摘!

三.下面是今天自己的学习心得给大家分享

首先我们知道jquery是javascript的一个强大的库,想用使用我们就必须先将他引入到js文件中下面是步骤:

首先我们下载一个jquery文件,并把他在js页面的head区域写上如下的代码:

jquery与js的区别与基础操作

这样就把jquery文件引入了,注意这个引入方法是置顶的!;

jquery的用法与js的大体类似;

*****************************************************************************************

说一下JQuery选择器

网摘:

1、JQuery选择器用于查找满足条件的元素,比如可以使用$(“#控件id”)来根据控件id获得控件的JQuery对象。相当于getElementByid。

2、$(“TagName”)来获取所有指定签名的JQuery对象,相当于getElementsByTagName。

3、CSS选择器,同时选择拥有某个样式的多个元素:

   $(“.text”).click(function(){alert($(this).text();)})

4、多条件选择器:$(“p,div,span.menuitem”),同时选择p标签、div标签和拥有menuitem样式的span标签。

5、层次选择器:

(1)$(“div li”)获取div下的所有li标签(后代,子、子的子标签…)。

(2)(“div > li”)获取div下的直接li子标签.

(3)$(“.menuitem + div”)获取样式名为menuitem之后的第一个div标签。

(4)$(“.menuitem ~ div”)获取样式名为menuitem之后的所有div标签。

*********************************************************************************************

看一下练习:

body里面:

 <div id="aa">123</div>
<div id="a1"></div>
<div id="a1"></div>
<span id=a1></span>
<input type="text" name="uid" id="asd" value="123" />
</body>

1.找元素:

js:

//js找元素
var a = document.getElementById("asd");
//根据id找aa; var a = document.getElementsByClassName("a1");
// 根据名称来找
// 找到的是一个数组 document.getElementsByTagName("div");
//根据标签名字找 var a = document.getElementsByName("uid");
//用于表单元素

jquery:

//jq找元素:
var a = $("#aa")
//$用来选取元素,括号里面是根据什么类型找的
alert(a)
//输出的是object;找到jquery对象; $a = $(".a1");
// 根据名称来找
alert(a.eq(2));
//输出的是object;加入eq()方法就是取到了jq的索引;取索引就用.eq(); var = $("div");
//根据标签名字找 $("[name=uid]");
//直接根据属性筛选找的,不是根据name

输出的类型:

Js中找元素,找的是DOM对象

Jquery中找对象,找的是Jquery对象

2.操作内容:

js:

//操作内容
//非表单元素的
alert(a.innerText);//获取文本
alert(a.innerHTML);//获取html代码
//表单元素
alert(a.value);//获取value值
a.value="hello";//更改value值

jquery:

//操作内容
//非表单元素的
alert(a.text());//获取文本
a.text("bbbbbbbbbbbbb")//更改文本内容
alert(a.html);//获取html代码,更改同上
//表单元素
alert(a.val());//获取表单的value值
alert(a.val("hello"));//更改表单value的值

3.操作属性:

js:

//操作属性
a.setAttribute("test","test");//设置属性 可添加,可修改
a.removeAttribute("test");//移除属性
alert(a.getAttribute("value"));//获取value值

jquery:

//操作属性
a.attr("test","test");//设置,添加属性;
a.removeAttr("test");//移除一个属性
alert(a.attr("value"));//给一个参数为获取,给两个为设置 //prop方法:也可以对属性进行操作,不容易出现BUG
a.prop("test","test");//添加属性
a.removeProp("test");//移除
alert(a.prop("test"));

4.操作样式

js:

//操作样式;
//更改字体大小
//只能获取内联样式表
a.Style.fontSize = "30px";

jquery:

//操作样式
a.css("background-color","aqua"); //给两个参数为设置,给一个参数为获取

************************************************************************

网摘:

获取样式attr(“class”),设置样式attr(“class”, “myclass”)。

追加样式addclass(“myclass”)。

移除样式removeclass(“myclass”)。

切换样式togleclass(“myclass”)。如果存在则去掉样式,如果不存在则添加。

判断样式是否存在:hasclass(“myclass”)。

************************************************************************

5.统一操作元素

js:

//统一操作元素属性
var d = document.getElementsByClassName("a1"); for(var i=0;i<d.length;i++)
{
d[i].style.fontSize = "30px";
}

jquery:

//统一样式操作:
$(".a1").css("font-size","30px");

6.添加jquery事件:

一个全选的例子,用jquery来写非常方便

当点击全选的时候  下面的选项都被选中,移除后,都不选中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head> <body>
<input type="checkbox" id="ck" />全选
<br /><br />
<input type="checkbox" class="ck" />
<input type="checkbox" class="ck" />
<input type="checkbox" class="ck" />
<input type="checkbox" class="ck" />
<input type="checkbox" class="ck" />
</body>
</html>
<script type="text/javascript" src="js/jquery-1.11.2.min.js" > </script>
<script>
//添加事件的方法:
$("#ck").click(function(){ //找到自身的选种状态
//$(this)筛选本身,自身
$(".ck").prop("checked",$(this).prop("checked"));
//找到所有的$(".ck"),设置属性:.prop("checked",属性既是上面的自身状态)!
})
//找到ck;.click代表点击事件,没有方法的方法名=匿名函数 </script>

图:

jquery与js的区别与基础操作jquery与js的区别与基础操作

*****************************************************************

网摘:

JQuery中事件的绑定:$(“#btn”).bind(“click”,function(){})。

JQuery用$(“#btn”).click(function(){})来简化。

调用事件对象的stopPropagation()方法终止事件冒泡。

移除事件绑定:unbind()方法即可移除元素上绑定的事件,如果bind(“click”)则移除click事件的绑定

*****************************************************************

7.调用样式表:

做一个小例子:

<!DOCTYPE html>
<html> <head>
<script src="js/jquery-1.11.2.min.js"></script>
<meta charset="{CHARSET}">
<title></title>
</head>
<style>
.aa{
width: 100px;
height: 100px;
float: left;
background-color: #E77918;
margin: 3px;
} </style>
<body>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
</body>
</html>
<script>
//找到div
//加点击事件
$(".aa").click(function(){
$(".aa").css("background-color","#E77918");
$(".aa").css("border-radius","0px");
//找到所有的恢复
$(this).css("background-color","blue");
$(this).css("border-radius","55px");
//找到自身元素,替换为blue
})
//相当简洁
</script>

轻轻松松实现点谁谁变色变圆,且恢复其他的原有颜色与形状:

图:

jquery与js的区别与基础操作

jquery与js的区别与基础操作

jquery基础,有不懂的一定要看强大的注释

jquery与js的区别与基础操作的更多相关文章

  1. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  2. JQUERY与JS的区别

    JQUERY与JS的区别 <style type="text/css"> #aa { width:200px; height:200px; } </style&g ...

  3. jQuery与js的区别,并有基本语法详解,

    通过过一下对比,我们能很清楚的发现jquery与js的区别,运用jquery能大量减少代码量,不过js里面关于时间的setinterval和settimeout只能用js <script src ...

  4. jQuery于js的区别和联系

    一.什么是jQuery jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里 ...

  5. jquery&period;js和jquery&period;min&period;js的区别介绍

    1.区别:jquery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js文件名不一定完全相同,但通常情况下:jquery.js是完整的未压缩的jQuery库,文 ...

  6. jquery&period;js和jquery&period;min&period;js的区别和springboot整合echarts&period;min&period;js

    1.区别:jquery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js文件名不一定完全相同,但通常情况下:jquery.js是完整的未压缩的jQuery库,文 ...

  7. jQuery与JS的区别,以及jQuery的基础语法

    *在使用jQuery时,要在页面最上端加上 <script src="../jquery-1.11.2.min.js"></script> 看一下js与jQ ...

  8. Jquery和JS的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery---jq基础了解&lpar;语法&comma;特性&rpar;&comma;JQ和JS的区别对比&comma;JQ和JS相互转换&comma;Jquery的选择器&lpar;基础选择器&comma;层级选择器&comma;属性选择器&rpar;&comma;Jquery的筛选器&lpar;基本筛选器&comma;表单筛选器&rpar;&comma;Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

随机推荐

  1. 十大开源的&period;NET用户界面框架 让GUI设计不再犯难

    选择一款合适的GUI框架是.NET开发中比较重要但又很棘手的问题,因为用户界面相当于一款应用的"门面",直接面向用户.好的UI更能吸引用户,有时甚至成为决定一款应用成败的关键.下面 ...

  2. 剑指Offer&colon;面试题28——字符串的排列&lpar;java实现&rpar;(待序)

    问题描述: 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 结果请按字母 ...

  3. Spring 3整合Quartz 2实现定时任务--转

    常规整合 http://www.meiriyouke.net/?p=82 最近工作中需要用到定时任务的功能,虽然Spring3也自带了一个轻量级的定时任务实现,但感觉不够灵活,功能也不够强大.在考虑之 ...

  4. MYSQLI DEMO

    1.Select // DEMO mysqli连接方式参考 $db = new mysqli("localhost:3306", "root", "& ...

  5. ownCloud Virtual Machines&lpar;bitnami&period;com&rpar;

    ownCloud Virtual Machines(bitnami.com)https://bitnami.com/stack/owncloud/virtual-machine

  6. JSP精华知识点总结

    本文转自:http://blog.csdn.net/qy1387/article/details/8050239 JSP精华知识点总结 Servlet三个要素 1.必须继承自HttpServlet 2 ...

  7. Phpcms安装前后域名默认访问路径

    一.安装前 phpcms下载后index.html文件内容如下图,在本地服务器配置项目虚拟域名后,访问域名后直接跳到:域名/install/install.php,然后出现安装界面. 二.安装之后 提 ...

  8. Java基础总结--数组

    ---数组的定义---组织存储一组数据1.存放相同类型数据的集合--就是一种容器本质上变量也是一种容器--区别就是只存储了一个数据的容器--面对容器,而不是分散的数据eg.买一盘鸡蛋--蛋托其实就是容 ...

  9. 安装Oracle客户端和plsql

    Oracle 客户端安装 +  pl/sql工具安装配置   Oracle 客户端安装 +  pl/sql工具安装配置 下载oracle客户端,并在本地安装. 11g下载地址为: http://www ...

  10. git 添加管理成员

    git 添加管理成员   登录git后的样子: 具体操作流程看截图和说明 : * 图中1:打开设置面板: * 图中2:打开成员面板: * 图中3:添加成员功能标签: * 图中4:添加的成员,这里会弹出 ...