【web】jquery使用心得
jquery是一个JavaScript库,容易学习,简化了JavaScript的编程。
一. 下载jquery库
使用这个库可以直接在web页中,从 jquery.com 的官网上引用 .js文件的链接地址。
也可以先将jquery库从官网上下载在本地后,再在使用的web页中,从本地目录下引用。
如果是要下载jquery库的话,从官网主页进入,点击download jquery能看到有3个链接,对于开发工作有用的是前两个链接。其中compressed的下载项包含的是压缩过的JavaScript代码,uncompressed表示的是未压缩的,后者更容易读,两者代码内容是一样的,形式上前者更简单。拷贝代码,在本地目录下新建 jquery.js 文件。
jQuery库地址: jquery.com
要使用jquery库时,在.html文件里引用自己的.js文件,需要在引用jquery.js文件之后进行。
二. 选择器
通过javascript的代码编辑来改变样式,根本改动仍然是代码转换到css进行的。用jQuery进行代码编写更加简便,几乎可以完全等换css操作。
- 更改背景色
a.html
<div id="a">A</div> <script src="E:\js\jquery.js"><\script> <script src="E:\js\a.js"><\script>
此后所有的示例中,.html文件内容都类似此文件。
a.js
jQuery('#a') //#表示对象为id .css('background','green'); $('#a') .css('background','green');
jQuery在代码中可用$代替
- 选择器
如1中所编写的$(’#a’),括号中的#a可以是CSS中任意的选择器,例中是用的id选择器–#
div 元素选择器
$('div') .css('color','grey');
class 类选择器
$('.a') .css('color','green');
input 元素选择器
html中为
$('input[type="nmber"]') .css('background','yellow');
选择器也是可以嵌套的:
a.js
$('#a p') .css('border','2px solid black'); //边框粗 像素,实线,黑色
a.html
<div id="a" >A <p>3</p> </div> //嵌入 <script src="E:\js\jquery.js"></script> <script src="E:\js\a.js"></script>
伪类操作:
选中第一个更改
$('div:first') .css('border','2px solid pink');
三. 过滤器
1.
类可以层层包括;同类可以有不同id:
b.html
<div class="grandpa"> <div class="pa"> <div id="c1" class="child"></div> <div id="c2" class="child"></div> </div> </div>
b.js
$('div .child') //找到child类的div //$('div') .find('.child') //同上作用
例下,过滤后更改样式:
b.html
<style> div { padding:2px; //内边距宽度 margin-bottom:2px; //下外边距 background:rgba(0,0,0,.1); //0.1为透明度 } </style> <div class="grandpa"> <div class="pa"> <div id="c1" class="child">c1</div> <div id="c2" class="child">c2</div> </div> </div> <script src="E:\js\jquery.js"></script> <script src="E:\js\jq\main.js"></script>
b.js
$('div') .find('.child') .css('border','2px solid pink'); //$('.grangdpa') //与上等价,不必从div开始找,可以从外层的类开始。 .find('.child')
也可以从内向外找:
$('#c1') .parent() //找到选中 pa 类,往上找一级 .css('border','2px solid blue'); $('#c1') .parents('.grandpa') //往上找,只要有给定的父类就选中 .css('.border','2px solid grey');
2.过滤
同一个元素选择器,可以同时有几个类,表达形式如:
b.html
<div class="child student"></div> //空格隔开
可以在同类中过滤:
//.html <div class="grandpa"> <div class="pa"> <div id="c1" class="child n">c1</div> <div id="c2" class="child">c2</div> <div id="c3" class="child">c3</div> </div> </div> //.js $('.child') .filter('.n') //只选中 n 类 .css('background','pink');
四. 样式
1.一个类的多种样式
在一个类中想添加多种样式,两种方式:
<div class="a">A</div> <script src="E:\js\jquery.js"></script> <script src="E:\js\jq\main.js"></script> //1. 多次添加 $('.a') .css('background','grey') .css('color','pink'); //2. 列表添加 $('.a') .css({ color:'pink', background:'grey', });
ps:对于连字符,可以有两种处理,避免报错:①使用连字符,但外加单引号,使其被处理时当做字符串。②不使用连字符,驼峰命名法,第二个有意义的词开始大写首字母。
2. 运用样式表
可以在样式表里先写好样式。
<style> .black{ //样式 background:red; color:yellow; } </style> <div class="a">A</div> <script src="E:\js\jquery.js"></script> <script src="E:\js\jq\main.js"></script> $('.a') .addClass('black'); //增加样式
- IT咨询顾问:一次吐血的项目救火 java或判断优化小技巧 asp.net core Session的测试使用心得 【.NET架构】BIM软件架构02:Web管控平台后台架构 NetCore入门篇:(十一)NetCore项目读取配置文件appsettings.json 使用LINQ生成Where的SQL语句 js_jquery_创建cookie有效期问题_时区问题
- Installshield2008使用心得(打包web工程)
- 使用Lion.Web.UpLoadModule上传大文件心得
- 关于手机端JQuery的使用心得(1)
- 使用JQuery中ajax方法访问web服务。
- 甩掉 ashx/asmx,使用jQuery.ajaxWebService请求WebMethod,Ajax处理更加简练
- Jquery弹出层插件Thickbox使用心得
- 前沿设计推荐-使用jquery打造动感的浮动web界面
- 使用 jQuery,第 2 部分: 构建未来的 Web 应用程序
- 使用 jQuery,第 2 部分: 构建未来的 Web 应用程序
- Jquery ThickBox插件使用心得(不建议使用)
- 【转】Jquery弹出层插件Thickbox使用心得
- 关于手机端JQuery的使用心得(3)
- ·jQuery弹出层插件Thickbox使用心得
- jQuery .live() 使用心得
- 关于手机端JQuery的使用心得
- 使用 jQuery,第 2 部分:构建未来的 Web 应用程序
- 【WitchHat.cn心得】Silverlight中,即使使用HttpWebRequest也抛System.Security.SecurityException
- jquery.cookies 的使用心得[仅做自己记忆所用]
- 关于jquery.AutoComplete插件的一些使用心得(编码问题,效率问题)