zoukankan html css js c++ java

Python 第十三篇之二：jQuery基础

一：jQuery是一个兼容多浏览器的javascript类库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀，jQuery的核心是先找到一个元素然后对其进行操作，jQuery分为1版本和2版本及以上的，1版本兼容IE6/IE7/IE8，而jquery 2版本及以上不再兼容IE8及以下的浏览器，因此要兼容低版本的浏览器就要用jquery 1版本，另外jquery还分为压缩版和非压缩版，压缩版在线上使用，非压缩版在开发调试的时候使用：

jquery-3.1.0.js #非压缩版，可浏览性强，便于人类失败
jquery-3.1.0.min.js #压缩版，将多行合并，更简洁，便于机器识别

官方下载地址：http://jquery.com/download/

所有版本下载：http://www.jq22.com/jquery-info122

中文教程：http://www.php100.com/manual/jquery/

1.1：这么好的jquery该如何使用呢?

1.1.1：导入文件并简单替换text内容：

<body>
    <div id="id1">123</div>
<script type="text/javascript" src="css/jquery-1.8.3.js"></script> <!--建议在body的最下面进入导入文件，可以保证用户先看到页之后在加载效果，否则一直在加载js效果不成功用户可能会关闭页面不看了
    当页面框架加载完成之后执行下面的代码-->
    <!--$代表的是jQuery对象，是自动创建的, $("#id1").text("jack")等于document.getElementById("id1")获取到id再取到text赋值-->
    <script>
    $(function() {
        $("#id1").text("jack")
    } );
</script>
</body>

#执行结果：

1.1.2：通过jQuery找到指定的标签并为其添加class:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ii {
            background-color: #00AAFF;
        }
    </style>
</head>
<body>
    <div id="id1">123</div>
    <div class="yy"><h2>123</h2></div>
    <div class="yy"><h2>456</h2></div>
    <div class="yy"><h2>789</h2></div>
<script type="text/javascript" src="css/jquery-1.8.3.js"></script> <!--建议在body的最下面进入导入文件，可以保证用户先看到页之后在加载效果，否则一直在加载js效果不成功用户可能会关闭页面不看了
    当页面框架加载完成之后执行下面的代码-->
    <!--$代表的是jQuery对象，是自动创建的, $("#id1").text("jack")等于document.getElementById("id1")获取到id再取到text赋值-->
    <script>
    $(function() {
        $("#id1").text("我是被替换的内容");
        $(".yy").addClass("ii");
    } );
</script>
</body>

#执行结果：

1.1.3:jQuery和JS和HTML的关系:

首先了HTML是实际展示在用户面前的用户可以直接体验到的，JS是操作HTML的他能改变HTML实际展示给用户的效果,首先了解JS是一门语言，他是运行在浏览器上的,jQuery是什么呢？他是对JS进行了封装，成了一个类库，就类似于python中的类，我们用的时候直接掉类库了就行了非常方便.

1.2:基本选择器，

http://www.php100.com/manual/jquery/index.html ：

1.2.1：id选择器：比较常用的，根据给定的ID匹配一个元素。

$("#i1").removeClass("hide") #找到一个id找到标签移除一个class
[<div id="i1" class>…</div>]

1.2.2：标签选择器，根据给定的元素标签名匹配所有元素，常用的

$("div") #获取所有的标签，结果是一个数组 [<div id="i1" class>…</div>, <div class="item"></div>, <div class="item">…</div>, <div class="c1">123</div>, <div class="item"></div>, <div id="i2"></div>]

1.2.3：类选择器，根据给定的css类名匹配元素，常用的

$(".item") #获取所有class是item的标签
[<div class="item"></div>, <div class="item">…</div>, <div class="item"></div>]

1.2.4.层级标签选择器，将每一个选择器匹配到的元素合并后一起返回,你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内，比较常用

$(".item div,a") #获取类是item下的div和a标签
[<div class="c1">123</div>, <a>baidu</a>]

1.2.4：所有的元素（*），比较多的用于集合上下文搜索：

HTML 代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
jQuery 代码:
$("*")
结果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

1.2.5：组合选择器，对某个元素下的一个或多个的元素之间的匹配：

HTML 代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
jQuery 代码:
$("div,span,p.myClass")
结果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

1.3：层级选择器，

1.3.1:ancestor descendant:在给定的祖先元素下匹配所有的后代元素,ancestor任何有效选择器,任何有效选择器任何有效选择器:

找到表单中所有的 input 元素
HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]

1.3.2:parent > child,在给定的父元素下匹配所有的子元素，parent任何有效选择器，child用于匹配元素的选择器，并且它是第一个选择器的子元素。

匹配表单中所有的子级input元素。
HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form > input")
结果:
[ <input name="name" /> ]

1.3.3:prev + next：prev 元素后的next元素，prev任何有效的选择器，next一个有效的选择器并且紧接着第一个选择器

匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("label + input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]

1.3.4:prev ~ siblings：匹配 prev 元素之后的所有siblings元素，prev是任何有效选择器，siblings一个选择器，并且它作为第一个选择器的同辈

找到第一个与表单同辈的 input 元素
HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form ~ input")
结果:
[ <input name="none" /> ]

1.3.5：其他方法

$(":input") #找到所有的input标签，冒号是特殊的
[<input type="button" value="button">, <input type="checkbox">, <input type="file">, <input type="hidden">, <input type="image">, <input type="password">, <input type="radio">, <input type="reset">, <input type="submit">, <input type="text">, <select>…</select>, <textarea></textarea>, <button>Button</button>]
$(":text")
[<input type="text">] #找到所有的input标签并且类型等于text，这个和$('input[type='text']')效果是一样的
$(":text,password") 找到所有的input的标签并且type='text'或type='password'的标签,这是一个组合选择器
[<input type="text">]

1.4：jQuery基本筛选器：

1.4.1:first、last，获取第一个和最后一个元素：

HTML代码：
<ul>
    <li>list item1</li>
    <div>
         <li>list item7</li>
    </div>
    <li>list item2</li>
    <li>list item3</li>
    <li>list item4</li>
    <li>list item5</li>
       <div>
         <li>list item7</li>
           <div>
               <div>
                   <h1>sss</h1>
                   <li>item8</li>
               </div>
           </div>
    </div>
</ul>
jQuery代码：
$("li:first") #第一个li
[<li>list item1</li>]
$("li:last") #最后一个li
[<li>item8</li>]

1.4.1：not，不是li的元素：

$("li:not(div,a,span)") #对获取到的结果进行过滤，不包含div，a和spa标签
[<li>list item1</li>, <li>list item7</li>, <li>list item2</li>, <li>list item3</li>, <li>list item4</li>, <li>list item5</li>, <li>list item7</li>, <li>item8</li>]

1.4.2：even和odd，匹配偶数基数额元素，从0开始计数，表格的1/3/5行等于索引的0/2/4....

<ul>
    <li>list item1</li>
    <div>
         <li>list item7</li>
    </div>
    <li>list item2</li>
    <li>list item3</li>
    <li>list item4</li>
    <li>list item5</li>
       <div>
         <li>list item7</li>
           <div>
               <div>
                   <h1>sss</h1>
                   <li>item8</li>
               </div>
           </div>
    </div>
</ul>
结果如下：
$("li:even") #偶数的索引从0开始，0/2/4/8/10
[<li>list item1</li>, <li>list item2</li>, <li>list item4</li>, <li>list item7</li>]
$("li:odd") #计数的索引从1开始，1/3/5/7/9
[<li>list item7</li>, <li>list item3</li>, <li>list item5</li>, <li>item8</li>]

1.4.3:gt/lt/eq 大于等于小于一个索引的所有值：

$("li:lt(4)")
[<li>list item1</li>, <li>list item7</li>, <li>list item2</li>, <li>list item3</li>]
$("li:gt(4)")
[<li>list item5</li>, <li>list item7</li>, <li>item8</li>]
$("li:eq(4)")
[<li>list item4</li>]

1.5：属性选择器

1.5.1:attribute：匹配博涵在给定属性的元素名,在jquery1.3中@符号已经被废除，如果要兼容最新版本只要简单去掉@符号即可

HTML代码:
<div id="i7">
 <li>list item7</li>
   <div class="c1">
	   <div id="i8">
		   <h1>sss</h1>
		   <li>item8</li>
	   </div>
   </div>
</div>
#结果如下
$("div") #所有div
[<div id="i7">…</div>, <div class="c1">…</div>, <div id="i8">…</div>]
$("div[id]") #获取到所有所有id属性的div
[<div id="i7">…</div>, <div id="i8">…</div>]
$("div[class]") #获取到所有有class属性div
[<div class="c1">…</div>]

1.5.2：attribute=value，匹配给定的属性是某个特定值的元素：

HTML代码：
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
#结果如下：
$("input[name='newsletter']") #获取所有有newsletter属性的input标签
[<input type="checkbox" name="newsletter" value="Hot Fuzz">, <input type="checkbox" name="newsletter" value="Cold Fusion">]
$("input[name='newsletter']").attr('checked',true) #给获取到的标签添加一个新的属性
[<input type="checkbox" name="newsletter" value="Hot Fuzz" checked="checked">, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="checked">]

1.5.3：attribute=value，匹配给定的属性是某个特定值的元素attribute!=value，匹配所有不含有指定的属性，或者属性不等于特定值的元素，此选择器等价于 :not([attr=value])，要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])

$("input[name!='newsletter']") #查找到没有属性newsletter或属性值不等于newsletter的所有input标签
[<input type="checkbox" name="accept" value="Evil Plans">]
$("input[name!='newsletter']").attr('checked',true) #对查找到标签进行操作赋值
[<input type="checkbox" name="accept" value="Evil Plans" checked="checked">]

1.5.4：attribute^=value，匹配给定的属性是以某些值开始的元素

1.5.5：attribute$=value，匹配给定的属性是以某些值结尾的元素

1.5.6：attribute*=value，匹配给定的属性是以包含某些值的元素

$("input[name^='newsletter']") #匹配所有以newsletter开头的input标签，会在所有层级的标签中找
[<input type="checkbox" name="newsletter" value="Hot Fuzz" checked="checked">, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="checked">]
$("input[name$='sletter']") #匹配所有以sletter结尾的
[<input type="checkbox" name="newsletter" value="Hot Fuzz" checked="checked">, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="checked">]
$("input[name*='sletter']") #匹配属性当中包含指定的值
[<input type="checkbox" name="newsletter" value="Hot Fuzz">, <input type="checkbox" name="newsletter" value="Cold Fusion">, <input type="checkbox" name="newsletter" value="Hot Fuzz">, <input type="checkbox" name="newsletter" value="Cold Fusion">]

1.5.7：[selector1][selector2][selectorN]，复合属性选择器，需要同时满足多个条件时使用。

HTML代码：
<input id="i1" type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<div>
    <div>
        <input type="checkbox" name="newsletter" value="Hot Fuzz" />
        <input type="checkbox" name="newsletter" value="Cold Fusion" />
    </div>
</div>
<input type="checkbox" name="accept" value="Evil Plans" />
结果如下：
$("input[id][name$='sletter']") #先找到有id属性的标签，在找到含有name以sletter结尾的标签
[<input id="i1" type="checkbox" name="newsletter" value="Hot Fuzz">]

1.6:子元素查找操作

1.6.1： :first-child 查找其第几个孩子，专门用于查找操作孩子的,类似的:first只匹配第一个元素，而此选择符将为每个父元素匹配一个子元素

HTML代码：
<ol>
    <li>list item1</li>
    <div>
         <li>
             <h2>xxx</h2>list
         </li>
    </div>
    <li>list item2</li>
    <li>list item3</li>
    <li>list item4</li>
    <li>list item5</li>
       <div id="i7">
         <li>list item7</li>
           <div class="c1">
               <div id="i8">
                   <h1>sss</h1>
                   <li>item8</li>
               </div>
           </div>
       </div>
</ol>
结果如下：
$("ol li:first-child") #找到ol下的li下的第一个子元素，包含匹配到的子元素的子子孙孙
[<li>list item1</li>, <li>…</li><h2>xxx</h2>"list
         "</li>, <li>list item7</li>

1.6.2：:last-child 匹配最后一个子元素，:last，只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素

HTML 代码：
<ol>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ol>
<ol>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ol>
结果如下：
$("ol li:first-child") #第一个匹配的元素
[<li>John</li>, <li>Glen</li>] 
$("ol li:last-child") #最后一个匹配的元素
[<li>Brandon</li>, <li>Ralph</li>]

1.7：表单类操作，表单类是input[type=xxx]的简写

1.7.1：input，匹配所有input,textarea, select 和button元素

1.7.2：text，匹配所有的单行文本框

HTML代码：
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
</form>
结果如下：
$(":input") #匹配所有input的表单，
[<input type="button" value="Input Button">, <input type="checkbox">, <input type="file">, <input type="hidden">, <input type="image">, <input type="password">, <input type="radio">, <input type="reset">, <input type="submit">, <input type="text">, <select>…</select>, <textarea></textarea>, <button>Button</button>]
$(":text") #文本框,等于匹配了<input type="text">
[<input type="text">]

查看全文

相关阅读:
PHP四种界定符
 设计模式单例模式与工厂模式
 PHP include与require的区别
 面向对象 static abstract interface 等知识点
 gogland golang 颜色&字体 colors&font 配置文件
 什么是游戏中的帧同步
 kcp协议详解
 kcp流模式与消息模式对比
 kcp源码走读
 kcp结构体字段含义

原文地址：https://www.cnblogs.com/zhang-shijie/p/5420091.html