怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 342 JQUERY DREAMWEAVER
怎样开始JQuery的学习
来源：互联网
2023-03-16 23:53:52 版权归原作者所有，如有侵权，请联系我们
jQuery是一个非常优秀的轻量级js库，对各种浏览器的兼容，动画效果、异步调用、html页面代码与内容分离都有很好的支持，他的核心理念是write less,do more(写得更少,做得更多)，如此优秀的js库，我们怎么开始对齐进行学习呢。
工具/原料
- jQuery
- visual studio 2010
方法/步骤
我们开始学习jQuery，首先明白jQuery是怎么选择HTML元素的。它能够简化在DOM中选择元素的任务，有3种基本的选择符：标签名、ID和类。下面我们一步步了解jQuery这些选择。
首先我们编辑一个html文档，打开visual studio2010，创建一个web项目。
web项目中默认创建了一个Default.aspx web窗体。我们双击在此编写我们的html代码。我们需要导入一个css文件和我们自己的js文件，再导入自己js文件之前，需要先导入jQuery.js，这是jQuery的核心js文件，可以将其认为提供了页面与JavaScript的接口。
我们先在html中写一段代码
div>
ul id="selected-plays">
li>喜欢的运动
ul>
li>a href="/asyoulikeit/">篮球/a>/li>
li>足球/li>
li>乒乓球/li>
li>羽毛球/li>
/ul>
/li>
li>喜欢的书籍
ul>
li>a href="hamlet.pdf">羊皮卷/a>/li>
li>呼啸山庄/li>
li>老人与海/li>
/ul>
/li>
li>信息反馈
ul>
li>Henry IV (a href="mailto:wyfh2004@126.com">电子邮件/a>)
ul>
li>Part I/li>
li>Part II/li>
/ul>
li>a href="http://jingyan.baidu.com/">百度经验/a>/li>
li>Richard II/li>
/ul>
/li>
/ul>
/div>
运行效果如图：
使用ID 选择元素，并使用 >选择其子元素
首先我们编辑一个css文件（01.css），为html演示做准备。在css中创建一个类
.horizontal {
float: left;
list-style: none;
margin: 10px;
}
创建一个js文件（01.js），输入代码：
$(document).ready(function() {
$('#selected-plays > li').addClass('horizontal');
});
上面js代码的意思：查找ID为 selected-plays 的元素（ #selected-plays ）的
子元素（ > ）中所有的列表项（ li ） 。
使用否定式伪类：not
在css文件中添加sub-level 类：
.sub-level {
background: #ccc; //背景设置成灰色
}
对于ID为 selected-plays 的元素 li 没有应用horizontal 类样式的添加 sub-level 样式。
js文件中添加代码：
$('#selected-plays li:not(.horizontal)').addClass('sub-level'); //没有应用到 horizontal 的元素
样式表中再添加代码，对超链接添加样式：
a {
color: #00c;
}
a.mailto {
background: url(images/email.png) no-repeat right top;
padding-right: 18px;
}
a.pdflink {
background: url(images/pdf.png) no-repeat right top;
padding-right: 18px;
}
a.henrylink {
background-color: #fff;
padding: 2px;
border: 1px solid #000;
}
属性选择：
js中添加代码：$('a[href^="mailto:"]').addClass('mailto');
超链接href开头为mailto的添加mailto样式
$('a[href$=".pdf"]').addClass('pdflink');
超链接href结尾为pdf的添加pdflink样式
$('a[href^="http"][href*="henry"]').addClass('henrylink');
为 href 属性即以 http 开头且任意位置包含 henry的所有链接添加一个 henrylink 类
添加完代码之后，我们看一下效果：
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：jQuery插件扩展机制实现全选、全不选、反选功能 下一篇：html基本语法
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 330 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 374 JQUERY