Jquery的学习:基础核心!
一.什么是 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区域写上如下的代码:
<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>
这样就把jquery文件引入了,注意这个引入方法是置顶的!;
jquery的用法与js的大体类似;
看一下练习:
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
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");
//给两个参数为设置,给一个参数为获取
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>
图:
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的学习:基础核心!的更多相关文章
- jQuery插件学习基础
1.给jQuery添加全局的函数: $.zgz={ fn1:function(){ alert('我是刚设置的第一个全局函数') },fn2:function(){ alert('我是刚设置的第二个 ...
- Jquery重新学习之四[核心属性与文档处理属性]
1:核心.each(callback),size(),length(),get([index]) 1.1 .each(callback)通过它可以遍历对象.数组的属性值并进行处理 <form i ...
- jQuery之基础核心(demo)
jQuery之基础核心 作者的热门手记 jQuery之基础核心(demo) 本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javas ...
- JQuery基础核心
一.代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的. 而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执 ...
- 第一百六十三节,jQuery,基础核心
jQuery,基础核心 一.代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起 始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所 ...
- jQuery Mobile 入门基础教程
jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...
- 20165205 学习基础与C语言基础调查
学习基础和C语言基础调查 从<做中学>学到的经验 首先,在老师的这几篇文章中,最核心的一片文章就是<做中学>这一篇了,在文章中强调了不断联系的重要性,然后在学以致用的过程中发现 ...
- 《转》python学习--基础下
转自http://www.cnblogs.com/BeginMan/archive/2013/04/12/3016323.html 一.数字 在看<Python 核心编程>的时候,我就有点 ...
- 20165207 学习基础与C语言基础调查反馈
文章阅读体会与学习调查反馈 文章阅读体会 我在娄老师的文章里了解到了"做中学"的概念.并且通过娄老师慷慨地分享的相关经验,我对于它有了进一步的理解以及体会.以下是我收获以及我的感想 ...
- Jquery重新学习之七[Ajax运用总结A]
Jquery中Ajax的运用是另外一个重点,平时项目经常会用它进行一些异步操作:其核心是通过XMLHttpRequest对象以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而 ...
随机推荐
- 扩展BaseAdapter实现不存储列表项的ListView
下面的实例将会通过扩展BaseAdapter来实现Adapter,扩展BaseAdapter可以取得对Adapter最大的控制权:程序要创建多个列表项,每个列表项的组件都由开发者来决定. 下面的布局文 ...
- easelJS入门、事件、spritesheet
easelJS入门.事件.spritesheet <%@ page language="java" contentType="text/html; charset= ...
- Canvas 颜色反转
ImageData中的元素反转颜色 255-data[i,i+1,i+2] <!DOCTYPE html> <html lang="en"> <hea ...
- paramiko库安装
python的paramiko库用于执行ssh2连接(client和server).安装方式如下: 硬件环境:Raspberry 2B,arm,1GB RAM,16GB TF卡; 系统环境:Linux ...
- Linux下使用javac编译
Linux下使用javac编译Hadoop程序 首先要配置好Hadoop, 给出两个教程 Hadoop安装教程单机/伪分布式配置Hadoop2.6.0/Ubuntu14.04 Hadoop集群安装配置 ...
- ES2:ElasticSearch 集群配置
ElasticSearch共有两个配置文件,都位于config目录下,分别是elasticsearch.yml和logging.yml,其中,elasticsearch.yml 用来配置Elastic ...
- 《JAVASCRIPT高级程序设计》原生拖放和媒体元素
一.原生拖放 最早在网页中引入javascript拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.而现在,几乎网页中的任何元素都可以拖放以及作为放置目标.下面介绍一些与拖放相关的 ...
- [转载]【虚拟化系列】VMware vSphere 5.1 简介与安装
转载自:http://mabofeng.blog.51cto.com/2661587/1017680 一. VMware vSphere 5.1简介 vSphere是VMware推 ...
- 在Window下安装Oracle
一.Oracle下载地址 http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html 二.解压 ...
- Visual Studio 2017 RC 初探安装
上次看到博客介绍 Visual Studio 2017 RC,看到其中一个改进是启动很快,这是一大进步,也是低配电脑的程序员的期望.不过还没体验,是驴是骡子拉出来看看,这不就开始下载. 1.打开官网: ...