码迷,mamicode.com
首页 > 编程语言 > 详细

人生苦短,我用python-- Day17 jQuery讲解

时间:2016-12-01 02:43:29      阅读:329      评论:0      收藏:0      [点我收藏+]

标签:dom   3.1.1   字符   ack   back   lin   页面   2.x   code   

jQuery介绍:

  1.版本介绍:在官网下载jQuery会下载到1.x、2.x、3.x这三个系列,银角大王说1.x系列兼容性好,功能也能满足。

  2.格式介绍:在官网不管下载那个系列的,都会看到有两种格式,a.jquery-1.12.4.js    b.jquery-3.1.1.min.js;第二中是压缩格式,如果是编写代码阶段使用第一个方便我们自己好看,如果是项目上线阶段,建议换成第二个,节省空间;

1.html中如何引用jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">
        123
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        // 这里可以引用jQuery方法
        // 要是用jQuery方法,需要使用jQuery当做关键字进行调用jQuery方法;也可以使用一个$来代替jQuery;下面是来获取id等于i1的标签
jQuery(#i1) </script> </body> </html>

2.jQuery获取的结果和Document获取的结果比较

  a.jQuery中获取结果更多,我们暂且可以理解为获取的为一个数组,而domcument获取的结果是一个字符串,看例子:

             技术分享

  b.这两种的转换

    jQuery---->document:jQuery的结果[0]就可以了,上图可见

    document---->jQuery: 把结果放到$()中就可以了

              技术分享

3.选择器

  a.id选择器 

     $("#id")或jQuery("#id") 

  b.class选择器

    <div class = ‘c1‘></div>

    $(".c1") 选择class等于c1的标签

  c.标签选择器

<div class = ‘c1‘>
 <a>f1</a>
 <a>f2</a>
</div>
<div class=‘c1‘>
 <a>f3</a>
</div>
<div class=‘c1‘></div>

    $(‘a‘)   选择所有a标签

  d.标签组合选择器    

<div id = "i10"class = ‘c1‘>
 <a>f1</a>
 <a>f2</a>
</div> <div class=‘c1‘>  <a>f3</a> </div> <div class=‘c1‘></div>

    $(‘a,.c2,#i10‘)选a标签和class等于c2和id等于10的标签

  e.层级选择器

           技术分享

    层级筛选一,$(‘#i1‘) 找到id等于11的标签---->$(‘#i11 a‘)找到id等于11的标签下面所有的a标签(子子孙孙)

    层级筛选二,$(‘#i1‘) 找到id等于11的标签---->$(‘#i11>a‘)找到id等于11的标签下面所有的a标签(儿子层级的a标签,不在往深处找)

  f:基本选择器

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

         $(‘li‘); 找到所有的li标签---->$(‘li:first‘)找所有的li标签中的第一个

   $(‘li‘); 找到所有的li标签---->$(‘li:last‘)找所有的li标签中的最后一个

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

  $("tr");找到所有的tr标签--->$("tr:eq(1)");再找的所有的tr标签中获取索引为1的tr标签;注意这里的索引是从0开始的  看一下图

    技术分享

  g:属性选择器

           技术分享

  h:表单对象属性

     补充一下input标签中disabled的属性的用法,当一个input标签加上一个disabled属性的时候,表明这个输入框无法输入数据,看代码:

<input type="text" disabled>

那么问题来了,如果我们想找某个页面中那些input标签是有disabled这个属性的怎么办呢?

$("input:disabled")

 

 

 

 

人生苦短,我用python-- Day17 jQuery讲解

标签:dom   3.1.1   字符   ack   back   lin   页面   2.x   code   

原文地址:http://www.cnblogs.com/xinzhiyu/p/6120124.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!