前端jquery部分很精彩


Posted in Javascript onMay 03, 2016

一、简介
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。

二、选择器
1.id选择器

<body>
<div id="demo">我是一个div</div>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo').css('color','red');
</script>
</body>

2.元素标签名选择器element

<body>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<h3>标题1</h3>
<h3>标题2</h3>
<h3>标题3</h3>
<h3>标题4</h3>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('div').css('color','red');
$('h3').css('color','red').css('font-size','30px');
</script>
</body>

3.类选择器

<body>
<h3 class="demo">我是一个拥有class的h3</h3>
<h3 class="demo">我是一个拥有class的h3</h3>
<h3 class="demo" >我是一个拥有class的h3</h3>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('.demo').css('color','red');
</script>

4.*选择器(匹配所有元素)

<body>
<div id="demo">我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<h3>标题1</h3>
<h3>标题2</h3>
<h3>标题3</h3>
<h3>标题4</h3>
<h3 class="demo">我是一个拥有class的h3</h3>
<h3 class="demo">我是一个拥有class的h3</h3>
<h3 class="demo" >我是一个拥有class的h3</h3>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('*').css('color','red'); //选择所有元素
<script>
</body>

5.群组选择器

<body>
<div id="demo">我是一个div</div>
<h3>标题1</h3>
<h3 class="demobox">我是一个拥有class的h3</h3>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo,.demobox,h3').css('color','red');
</script>
</body>

6.后代选择器

<body>
<ul>
<li>
  <a>ul的li的a标签</a>
  <a>ul的li的a标签</a>
  <a>ul的li的a标签</a>
</li>
</ul>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('ul li a').css('color','red');
</script>
</body>

6.指定选择器

<body>
<div class="demo">class的div</div>
<p class="demo">class的p</p>
<div>普通div</div>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('div.demo').css('color','red');
</script>
</body>

7.子选择器

<body>
<div id="demo">
<p>子p1</p>
<p>子p2</p>
<p>子p3</p>
<div>
  <p>孙子p1</p>
  <p>孙子p2</p>
  <p>孙子p3</p>
</div>
</div>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo>p').css('color','red');
</script>
</body>

8.next(选择器)

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
//$('#demo').next('p').css('color','red'); //第一种方法
$('#demo+p').css('color','red');    //第二种方法
</script>
</body>

9.nextall(选择器)

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
//$('#demo').nextAll().css('color','red'); //第一种方法
 $('#demo~p').css('color','red'); //第二种方法
</script>
</body>

10.prev方法

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo').prev().css('color','red');
</script>  
</body>

11.prevall方法

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo').prevAll().css('color','red');
</script>
</body>

12.slbings()方法

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo').siblings().css('color','red');
</script>
</body>

三、筛选器(过滤选择器)

滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类
:使用冒号(:)开头。

1.基本筛选

前端jquery部分很精彩

$('li:first').css('background', '#ccc'); //第一个元素
$('li:last).css('background', '#ccc'); //最后一个元素
$('li:not(.red)).css('background', '#ccc'); //非 class 为 red 的元素
$('li:even').css('background', '#ccc'); //索引为偶数的元素
$('li:odd).css('background', '#ccc'); //索引为奇数的元素
$('li:eq(2)).css('background', '#ccc'); //指定索引值的元素
$('li:gt(2)').css('background', '#ccc'); //大于索引值的元素
$('li:lt(2)').css('background', '#ccc'); //小于索引值的元素
$(':header').css('background', '#ccc'); //页面所有 h1 ~ h6 元素
focus 过滤器,必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。
而不是鼠标点击或者 Tab 键盘敲击激活的。
$('input').get(0).focus(); //先初始化激活一个元素焦点
$(':focus').css('background', 'red'); //被焦点的元素

::first、:last 和 first()、last()这两组过滤器和方法在出现相同元素的时候,first 会实现第一个父元素的第一个子元素,last 会实现最后一个父元素的最后一个子元素。所以,如果需要明确是哪个父元素,需要指明:
$('#box li:last').css('background', '#ccc'); //#box 元素的最后一个 li
//或$('#box li).last().css('background', '#ccc'); //同上

 2.内容筛选器

前端jquery部分很精彩

//选择元素文本节点含有 ycku.com 文本的元素
$('div:contains("ycku.com")').css('background', '#ccc');
$('div:empty').css('background', '#ccc'); //选择空元素
$('ul:has(.red)').css('background', '#ccc'); //选择子元素含有 class 是 red 的元素
$(':parent').css('background', '#ccc'); //选择非空元素

jQuery 提供了一个名称和:parent 相似的方法, 但这个方法并不是选取含有子元素或文本
的元素,而是获取当前元素的父元素,返回的是元素集合。

$('li').parent().css('background', '#ccc'); //选择当前元素的父元素
$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素
$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到 div 父元素停止

3.可见性过滤器

-前端jquery部分很精彩

$('p:hidden).size(); //元素 p 隐藏的元素
$('p:visible').size(); //元素 p 显示的元素

注意::hidden 过滤器一般是包含的内容为:CSS 样式为 display:none、input 表单类型为
type="hidden"和 visibility:hidden 的元素。

4.子元素过滤器

前端jquery部分很精彩

子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。

$('li:first-child').css('background', '#ccc'); //每个父元素第一个 li 元素
$('li:last-child').css('background', '#ccc'); //每个父元素最后一个 li 元素
$('li:only-child').css('background', '#ccc'); //每个父元素只有一个 li 元素
$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数 li 元素
$('li:nth-child(even)').css('background', '#ccc'); //每个父元素偶数 li 元素
$('li:nth-child(2)').css('background', '#ccc'); //每个父元素第三个 li 元素

5.其他方法

前端jquery部分很精彩

前端jquery部分很精彩

四、基础DOM和css操作

1.元素内容操作

前端jquery部分很精彩

在常规的 DOM 元素中,我们可以使用 html()和 text()方法获取内部的数据。html()方法   
可以获取或设置 html 内容,text()可以获取或设置文本内容。

$('#box').html(); //获取 html 内容
$('#box').text(); //获取文本内容,会自动清理 html 标签
$('#box').html('<em>www.li.cc</em>'); //设置 html 内容
$('#box').text('<em>www.li.cc</em>'); //设置文本内容,会自动转义 html 标签

注意:当我们使用 html()或 text()设置元素里的内容时,会清空原来的数据。而我们期
望能够追加数据的话,需要先获取原本的数据。
$('#box').html($('#box').html() + '<em>www.li.cc</em>'); //追加数据
如果元素是表单的话,jQuery 提供了 val()方法进行获取或设置内部的文本数据。

$('input').val(); //获取表单内容
$('input').val('www.li.cc'); //设置表单内容

如果想设置多个选项的选定状态,比如下拉列表、单选复选框等等,可以通过数组传递
操作。
$("input").val(["check1","check2", "radio1" ]); //value 值是这些的将被选定

2.元素属性操作

前端jquery部分很精彩

除了对元素内容进行设置和获取,通过 jQuery 也可以对元素本身的属性进行操作,包
括获取属性的属性值、设置属性的属性值,并且可以删除掉属性。

$('div').attr('title'); //获取属性的属性值
$('div').attr('title', '我是域名'); //设置属性及属性值
$('div').attr('title', function () { //通过匿名函数返回属性值
return '我是域名';
});
$('div').attr('title', function (index, value) { //可以接受两个参数
return value + (index+1) + ',我是域名';
});

3.元素样式操作

前端jquery部分很精彩
前端jquery部分很精彩

元素样式操作包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种操作方法。而在整个 jQuery 使用频率上来看,CSS 样式的操作也是极高的,所以需要重点掌握。

$('div').css('color'); //获取元素行内 CSS 样式的颜色
$('div').css('color', 'red'); //设置元素行内 CSS 样式颜色为红色
在需要设置多个样式的时候,我们可以传递多个 CSS 样式的键值对即可。

$('div').css({
'background-color' : '#ccc',
'color' : 'red',
'font-size' : '20px'
});

除了行内 CSS 设置,我们也可以直接给元素添加 CSS 类,可以添加单个或多个,并且
也可以删除它。

$('div').addClass('red'); //添加一个 CSS 类
$('div').addClass('red bg'); //添加多个 CSS 类
$('div').removeClass('bg'); //删除一个 CSS 类
$('div').removeClass('red bg'); //删除多个 CSS 类

我们还可以结合事件来实现 CSS 类的样式切换功能。

$('div').click(function () { //当点击后触发
$(this).toggleClass('red size'); //单个样式多个样式均可
});
.toggleClass()方法的第二个参数可以传入一个布尔值, true 表示执行切换到class 类,false表示执行回默认 class 类(默认的是空 class),运用这个特性,我们可以设置切换的频率。
var count = 0;
$('div').click(function () { //每点击两次切换一次 red
$(this).toggleClass('red', count++ % 3 == 0);
});

4.css方法

jQuery 不但提供了 CSS 的核心操作方法,比如.css()、.addClass()等。还封装了一些特殊功能的 CSS 操作方法,我们分别来了解一下。

前端jquery部分很精彩
前端jquery部分很精彩

$('div').width(); //获取元素的长度,返回的类型为 number
$('div').width(500); //设置元素长度,直接传数值,默认加 px
$('div').width('500pt'); //同上,设置了 pt 单位
$('div').width(function (index, value) { //index 是索引,value 是原本值
return value - 500; //无须调整类型,直接计算
});

前端jquery部分很精彩

$('div').height(); //获取元素的高度,返回的类型为 number
$('div').height(500); //设置元素高度,直接传数值,默认加 px
$('div').height('500pt'); //同上,设置了 pt 单位
$('div').height(function (index, value) { //index 是索引,value 是原本值
return value - 1; //无须调整类型,直接计算
});

前端jquery部分很精彩

alert($('div').width()); //不包含
alert($('div').innerWidth()); //包含内边距 padding
alert($('div').outerWidth()); //包含内边距 padding+边框 border
alert($('div').outerWidth(true)); //包含内边距 padding+边框 border+外边距 margin

前端jquery部分很精彩

$('strong').offset().left; //相对于视口的偏移
$('strong').position().left; //相对于父元素的偏移
$(window).scrollTop(); //获取当前滚动条的位置
$(window).scrollTop(300); //设置当前滚动条的位置

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
jQuery代码实现对话框右上角菜单带关闭×
May 03 #Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 #Javascript
搞定immutable.js详细说明
May 02 #Javascript
Immutable 在 JavaScript 中的应用
May 02 #Javascript
基于javascript数组实现图片轮播
May 02 #Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 #Javascript
bootstrap3 兼容IE8浏览器!
May 02 #Javascript
You might like
如何在PHP程序中防止盗链
2008/04/09 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
python脚本爬取字体文件的实现方法
2017/04/29 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
Django 框架模型操作入门教程
2019/11/05 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
大学生简历中个人的自我评价
2013/10/06 职场文书
优秀应届生推荐信
2013/11/09 职场文书
管道维修工岗位职责
2013/12/27 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
商务邀请函
2015/01/30 职场文书
保研专家推荐信范文
2015/03/25 职场文书
学校运动会感想
2015/08/10 职场文书
少先队中队工作总结
2015/08/14 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
找规律教学反思
2016/02/23 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android