当前位置:首页 > 资讯 > info5 > 正文

[JQ]笔记1_JQ入门&选择器

发表于: 2016-11-07   作者:express_yourself   来源:转载   浏览:
摘要: –>类库简述–>jQuery简介–>jQuery环境的配置–>$(document).ready与window.onload的区别–>jQuery选择器基本选择器、层次选择器、过滤选择器内容过滤选择器、属性过滤选择器、子元素过滤选择器一、类库简述大多数JavaScript框架一般都具备的特性包括:选择器(Selector)DOM遍历DOM操作实用函数事件处理Ajax前端开发框架:Prototype

–> 类库简述
–> jQuery简介
–> jQuery环境的配置
–> $(document).ready与window.onload的区别
–> jQuery选择器
基本选择器、层次选择器、过滤选择器
内容过滤选择器、属性过滤选择器、子元素过滤选择器

一、类库简述

大多数 JavaScript 框架一般都具备的特性包括:
选择器(Selector)
DOM 遍历
DOM 操作
实用函数
事件处理
Ajax

前端开发框架:
Prototype Dojo YUI Ext JS MooTools
Bootstrap jQuery jQuery Mobile ……

二、jQuery简介

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

三、配置jQuery环境

1、获取jQuery类库
进入jQuery官网或其他平台下载jQuery文件
通常每个版本号有两个版本可供下载
生产版 - 用于实际的网站中,已被精简和压缩
开发版 - 用于测试和开发,未压缩,是可读的代码
2.0及之后的版本,不再兼容 IE 6 7 8

2、在页面中引入jQuery

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

用js模拟jq点击事件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style> *{margin:0;} div{ width:300px; height: 300px; background: #eee; } </style>
</head>
<body>
    <div id="box">点我</div>
</body>
<script> (function(){ function $(targetID){ var str=targetID.substring(0,1);//截取第0个元素1个 if (str=='#') { var ID=targetID.replace(/#/g,'') var obj=document.getElementById(ID); obj.click=function(fn){ this.onclick=fn; } return obj; } } window.Jquery=$;//对外公开接口 window.$=window.Jquery;//对外公开接口 })(); Jquery('#box').click(function(){ alert('box1'); }); $('#box').click(function(){ alert('box2'); }); </script>
</html>

四、jQuery执行情况
1、 在jQuery库中,jQuery的一个简写形式
例如: $(“#nan”)==jQuery(“#nan”)

2、当浏览器解析完DOM之后,执行ready小括号内的函数

3、ready与onload的简单区别
执行时机
编写个数
简写
$(document).ready( function () { …} )
可以简写为:$(function () {…} )

五、jQuery优势

轻量级
强大的选择器
出色的DOM操作
可靠的事件处理机制
完善的Ajax
出色的浏览器兼容性
链式操作方式
丰富的插件支持
完善的文档
开源

六、jQuery选择器

1、jQuery选择器的优势
简洁的写法
支持CSS1到CSS3选择器
完善的处理机制
2、jQuery选择器的分类
基本选择器
层次选择器
过滤选择器

基本选择器:

(“#test”)选取id为test的元素—单个元素(“.test”)选取所有class为test的元素—集合元素
$(“p”)选取所有的

元素—集合元素
() (“div,span,p.myClass”)选取所有

和拥有class为myClass的

标签的一级组元素—集合元素

层次选择器:

$(“div span”)选取

里的所有的 (可以选到子和孙所有元素)元素—集合元素
$(“div>span”)选取
元素下元素名是 的子元素—集合元素
$(“.one+div”)选取class为one的下一个
同辈元素—集合元素
$(“#two~div”)选取id为two的元素后面的所有
同辈元素—集合元素

基本过滤选择器:

$(“div:first”)选取所有

元素中第1个
元素—单个元素
$(“div:last”)选取所有
元素中最后一个
元素—单个元素
(input:not(.myClass))classmyClass (“input:even”)选取索引(索引从0开始,0算为偶数)是偶数的元素—集合元素
(input:odd)(0) (“input:eq(1)”)选取索引(索引从0开始)等于1的元素—单个元素
(input:gt(1))(0)1 (“input:it(1)”)选取索引(索引从0开始)小于1的元素—集合元素

内容过滤选择器:

$(‘div:contains(“测试”)’)选取包含文本“测试”的

元素—集合元素
$(“div:empty”)选取不包含子元素和文本的
空元素—集合元素
$(“div:has(p)”)选取含有

元素的

元素—集合元素
$(“div:parent”)选取拥有子元素或文本元素的
元素—集合元素

属性过滤选择器:

(div[id])iddiv (“div[title=test]”)选取属性title为“test”的

元素—集合元素
$(“div[title!=test]”)选取属性title不等于“test”的
元素—集合元素
$(“div[title^=test]”)选取属性title以“test”开始的
元素—集合元素
(div[title =test]”)选取属性title以“test”结束的
元素—集合元素
$(“div[title*=test]”)选取属性title含有“test”的
元素—单个元素
(div[id][title =‘test’]”)选取拥有属性id,并且属性title以”test”结束的
元素—集合元素

子元素过滤选择器:

(div:nthchild(1))divdiv (“ul li:first-child”)选取每个ul中第一个li元素—集合元素
(ulli:lastchild)ulli (“ul li:only-child”)在ul中选取是惟一子元素的li元素—集合元素

关于选择器的例子(可以复制代码挨个尝试):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器</title>
<style> *{margin:0;padding:0;list-style: none;font-size: 24px;color:#333;} #wrap{width:360px; border:1px solid #666;} </style>
</head>
<body>
<div id="wrap">
    <span>我是span1标签</span>
    <p>我是p1标签</p>
    <p id="p2">我是p2标签</p>
    <p class="bg3 bgpink">我是p3标签</p>
    <div>
        <p>我是p4标签</p>
        <p>我是p4标签</p>
    </div>
    <p class="bgblue">我是p5标签</p>
    <p>我是p6标签</p>
    <p class="bgpink bg7">我是p7标签</p>
    <div>
        <h5>我是h5标签</h5>
        <p>我是p4标签</p>
        <span>2132</span>
    </div>
    <p class="bgblue bg8">我是p8标签</p>
    <p style="height:20px;width:360px;"></p>
    <p>
        <span>我是span2标签</span>
        <span>我是span3标签</span>
    </p>
    <p>
        <a href="#">我是a标签</a>
    </p>
</div>
<span>我是span4标签</span>
</body>
<script src="jquery-1.8.3.js"></script>
<script> /*基本选择器*/ /*$('#p2').css({'background':'blue'}); $('.bgpink').css({'background':'pink'}); $('p').css({'background':'red'}); $('*').css({'background':'green'}); //群组选择器 $('#p2,.bgpink,span').css({'background':'orange'});*/ /*层次选择器*/ //选取<div>里的所有的<span>元素 /*$('div span').css({'background':'blue'}); // 选取<div>元素下元素名是<span>的子元素 $('div>span').css({'background':'green'}); // 选取紧接在.bgpink元素后的p元素 $('.bgpink+p').css({'background':'pink'}); //选取id为p2的元素之后的所有类名为bgpink同辈元素 $('#p2~.bgpink').css({'background':'orange'});*/ /*基本过滤选择器*/ /*$('p:first').css({'background':'blue'}); $('div:last').css({'background':'green'}); $('p:not(.bgpink)').css({'background':'pink'}); //选取索引是偶数的所有元素,索引从0开始 $('p:even').css({'background':'orange'}); //选取索引是奇数的所有元素,索引从0开始 $('p:odd').css({'background':'blue'});*/ //选取索引等于index的<p>元素(index从0开始) /*$('p:eq(3)').css({'background':'blue'}); //选取索引大于index的<p>元素(index从0开始) $('p:gt(3)').css({'background':'pink'}); //选取索引小于index的<p>元素(index从0开始) $('p:lt(3)').css({'background':'orange'});*/ /*内容过滤选择器*/ //选取含有文本内容包含“2”的<p>元素 // $('p:contains(2)').css({'background':'blue'}); //选取不包含子元素或者文本的空元素<p> // $('p:empty').css({'background':'green'}); //选取含有<span>元素的<p>元素 // $('p:has(span)').css({'background':'pink'}); //选取含有子元素或者文本的<p>元素(非空元素) // $('p:parent').css({'background':'orange'}); /*属性过滤选择器*/ // $('p[class]').css({'background':'pink'}); // $('p[class=bgblue]').css({'background':'blue'}); //选取class属性的值不等于bgpink的<p>元素 // $('p[class!=bgpink]').css({'background':'green'}); //选取class属性的值以bgpink开始的<p>元素 // $('p[class^=bgpink]').css({'background':'red'}); //选取class属性的值以bgpink结束的<p>元素 // $('p[class$=bgpink]').css({'background':'yellow'}); // 选取class属性的值含有bgblue的<p>元素 // $('p[class*=bgblue]').css({'background':'blue'}); // 选择满足所有属性选择器的<p>元素????? // $("p[class$=bgpink][class=bgblue][id]").css({'background':'yellow'}); /*子元素过滤选择器*/ //选取素每个父元素下的第2个<p>元素(index从1开始) $('p:nth-child(2)').css({'background':'pink'}); //选取素每个父元素下的偶<p>元素(index从1开始) /*$('p:nth-child(even)').css({'background':'blue'}); //选取素每个父元素下的奇<p>元素(index从1开始) $('p:nth-child(odd)').css({'background':'yellow'}); //选取所有<div>父元素的第一个<h5>子元素 $('div h5:first-child').css({'background':'orange'}); //选取所有<div>父元素的最后一个<p>子元素 $('div p:last-child').css({'background':'red'}); //如果某个元素是它父元素中唯一的子元素,那么将会被匹配。 $('p a:only-child').css({'background':'green'});*/ </script>
</html>
<!-- 子元素选择器重难点 1、first-child与:first的区别 $(“ul li: first-child”)选取每个<ul>中第一个<li>元素 ->每个<ul>中第一个元素->必须是<li>->才会被选中->否则不会被选中 $(‘div:first’)选择所有div标签中的第一个。 2、nth-child(index)与:eq(index)的区别 index从1开始 index从0开始 $(‘div:nth-child(1)’) 选取所有<div>中是其父标签的第一个子标签的div; ->每个<div>有父标签&父标签第i个子标签必须是<div>->才会被选中 $(‘div:eq(0)’);选取第一个div; -->

1、first-child与:first的区别

$(“ul li: first-child”)选取每个<ul>中第一个<li>元素
->每个<ul>中第一个元素->必须是<li>->才会被选中->否则不会被选中
$(‘div:first’)选择所有div标签中的第一个。

2、nth-child(index)与:eq(index)的区别
index从1开始 index从0开始
$(‘div:nth-child(1)’) 选取所有

中是其父标签的第一个子标签的div;
->每个
有父标签&父标签第i个子标签必须是
->才会被选中
$(‘div:eq(0)’);选取第一个div;

理解nth-child(2n)&nth-child(2n+1)&nth-child(3n+1)–n从哪开始:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style> ul{ overflow: hidden; list-style: none; } ul li{ float: left; width:70px; height:70px; border-radius: 50%; background: red; } </style>
</head>
<body>
   <ul>
      <li></li><li></li><li></li><li></li><li></li><li></li>
      <li></li><li></li><li></li><li></li><li></li><li></li>
   </ul>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script> $(function(){ // $('ul li:nth-child(2n)').css('background','blue');//索引从1开始 // $('ul li:nth-child(2n+1)').css('background','blue');//索引从0开始 // $('ul li:nth-child(3n)').css('background','blue');//索引从1开始 // $('ul li:nth-child(3n+1)').css('background','blue');//索引从0开始 $('ul li:nth-child(3n+2)').css('background','blue');//索引从0开始 }); </script>
</html>

[JQ]笔记1_JQ入门&选择器

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,
一、jQuery 简介 jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做
引入与分类 参考:样式与link标签。如 <head> <title>test---html</title> <m
<script type="text/javascript"> jQuery(function () { var SpanShow = function () { var r
选择器   当我们定义一条样式规则时候,这条样式规则会作用于网页当中的某些元素,而我们的规定的
选择器   当我们定义一条样式规则时候,这条样式规则会作用于网页当中的某些元素,而我们的规定的
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号