1. <!DOCTYPE htmi>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>JQuery常见方法示例</title>
  7.     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  8.     <script type="text/javascript">
  9.         $(function () {
  10.             ////attr() 方法设置或返回被选元素的属性值，自定义属性时使用。
  11.             //var item0=$("div").attr("data-code");//获取某属性值
  12.             //$("ul").attr("class","box");//设置某属性值
  13.             //$("ul").attr({"class":"box","name":"book"});//设置多个属性值
  14.  
  15.             ////prop() 方法设置或返回被选元素的属性和值,固有属性时使用。
  16.             //var item1 = $("div").prop("class");//获取某属性值
  17.             //$("ul").prop("class", "box");//设置某属性值
  18.             //$("li").prop({ "class": "book", "title": "123" });//设置多个属性值
  19.             //$("div").removeAttr("data-code"); //移除属性
  20.             //$("div").removeClass();//移除标签类名
  21.             //$("div").addClass("test");//添加标签类名
  22.  
  23.             ////find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
  24.             //$("div").find("ul").css("background", "red");
  25.  
  26.             ////append() 方法在被选元素的结尾（仍然在内部）插入指定内容(html内容)。
  27.             //$("li").append("<a href='http://www.baidu.com'>123</a>");
  28.  
  29.             ////parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。
  30.             //$("p").parent(".selected").css("background", "yellow");
  31.  
  32.             ////filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
  33.             //$("li").filter(".li").css("background", "yellow").attr("name","li");
  34.             //$('li').filter(':even').css('background-color', 'red');//:even忽略偶数
  35.             //$("ul").find("li").filter(':even').css('background-color', 'red');
  36.  
  37.             ////not() 从匹配元素集合中删除元素。与filter() 相反
  38.             //$('li').not(':even').css('background-color', 'red');
  39.  
  40.             ////has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。它跟filter()方法是有区别的。has()方法有父子级关系。
  41.             //$('ul').has('.li').css('background','red');   //只有包含的标签的class值是box的div(父级)的背景色为红色
  42.  
  43.             ////eq(0) 第1个
  44.             //$('div').find('li').eq(0).css('background','red');   //给div下的第一个li的背景设置为红色
  45.  
  46.             ////next() 下一个
  47.             //$('div').find('li').eq(0).next().css('background','red');  //给div下的第一个li的下一个li的背景设置为红色
  48.  
  49.             ////prev() 上一个
  50.             $('div').find('li').eq(4).prev().css('background', 'red');  //给div下的第一个li的上一个li的背景设置为红色
  51.  
  52.             ////index():索引就是当前元素在所有兄弟节点中的位置
  53.             $("li").click(function () {
  54.                 confirm($(this).index());
  55.             });
  56.  
  57.             ////
  58.             $('div').closest('form'); //选择离div最近的那个form父元素
  59.             $('div').children(); //选择div的所有子元素
  60.             $('div').siblings(); //选择div的同级元素
  61.  
  62.             $('div').insertAfter($('p'));//使用.insertAfter()，把div元素移动p元素后面
  63.             $('p').after($('div'));//使用.after()，把p元素加到div元素前面
  64.             //.insertAfter()和.after()：在现存元素的外部，从后面插入元素
  65. 　　        //.insertBefore()和.before()：在现存元素的外部，从前面插入元素
  66.         　　//.appendTo()和.append()：在现存元素的内部，从后面插入元素
  67.         　　//.prependTo()和.prepend()：在现存元素的内部，从前面插入元素
  68.             //confirm(item1);
  69.         });
  70.     </script>
  71. </head>
  72.  
  73. <body>
  74.     <div class="book" data-code="book_code">
  75.         <ul>
  76.             <li>1.前言</li>
  77.             <li class="li">2.目录</li>
  78.             <li class="li">3.第一章</li>
  79.             <li class="li">4.第二章</li>
  80.             <li>5.第三章</li>
  81.             <li>6.第四章</li>
  82.             <li>7.第五章</li>
  83.         </ul>
  84.     </div>
  85.     <li>6.第六章</li>
  86.     <li>7.第七章</li>
  87.     <div class="selected">
  88.         <p>Hello Again</p>
  89.     </div>
  90. </body>
  91.  
  92. </html>

　　

JQuery常见方法的更多相关文章

  1. jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)

    在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...

  2. jQuery on()方法

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...

  3. 转：jQuery 常见操作实现方式

    http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...

  4. jquery 使用方法<转载>

    jquery 使用方法 jQuery是目前使用最广泛的javascript函数库.据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司 甚至把jQuery作为他们的官 ...

  5. jQuery 常见操作实现方式

    一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document. ...

  6. jQuery on()方法示例及jquery on()方法的优点

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...

  7. [转] jquery 使用方法

    jquery 使用方法 jQuery是目前使用最广泛的javascript函数库.据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司 甚至把jQuery作为他们的官 ...

  8. jQuery jQuery on()方法

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...

  9. jQuery.ajax()方法中參数具体解析

    前言 在项目开发中,为了实现异步向服务端发起请求,最常常使用的就是jQuery.ajax方法了.刚開始需求比較简单,调用jQuery.ajax方法时要传的參数也就那几个常见的參数:url/data/d ...

随机推荐

  1. linux文件权限全面解析

    目录 linux文件权限全面解析 一:linux文件的权限有哪些? 1,权限分为3个部分 2,权限位 3,每一个权限拥有一个数字编号 4,在添加权限的时候,可以将权限加起来 5,linux添加权限命令 ...

  2. 搭建sublime.txt环境结合使用python

    { "cmd": ["python3", "-u", "$file"] }

  3. 一起玩转玩转LiteOS组件：TinyFrame

    摘要:TinyFrame是一个简单的用于解析串口(如 UART.telnet.套接字等)通信数据帧的库. 本文分享自华为云社区<LiteOS组件尝鲜-玩转TinyFrame>,作者:Lio ...

  4. [HZOI] 山海经 题解

    0.题目大意 给出一个序列,每次查询一个区间的最大子段和的端点和值.序列长度 \(n \le 10^{5}\) . 1.思路 显然应该使用线段树.题目要求每次求一个区间的最大子段和,那么在线段树节点中 ...

  5. FreeSWITCH 对接RTSP和RTMP视频

    在某些场景需要把摄像头或者其它推流视频加入FreeSWITCH.因此可以采用如下方式处理: 安装mod_vlc 然后在配置文件中加入 < action applicaiton="pla ...

  6. NOIP2017 Day2T3 列队

    首先可以观察到这样一个事实,如果 \((x, y)\) 出队,那么只会影响 \(x\) 这一行,以及最后一列的排布.并且可以发现,每次一个人出队,总会对最后一列有影响,因此我们可能需要将最后一列单独拿 ...

  7. PHP扩展开发编译环境的搭建

    PHP允许使用扩展的方式,直接使用C语言开发PHP的功能,由于编译的问题,很多底层和框架的基础工作如果用PHP必然会带来额外的开销,降低系统的吞吐量,必然yaf就是这样的思路,把框架封装在扩展里,让系 ...

  8. SSH 密钥登录

    一.什么是SSH? 简单说,SSH是一种网络协议,用于计算机之间的加密登录. 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码也不会 ...

  9. 使用java实现圆形运动

    1 package com.neuedu.test; 2 3 import java.awt.Graphics; 4 import java.awt.Image; 5 6 import com.neu ...

  10. MySQL之视图篇

    MySQL之视图篇 文章目录 MySQL之视图篇 1. 概述 1.1 为什么使用视图? 1.2 视图的理解 2. 创建视图 2.1 创建单表视图 2.2 针对于多表 2.3 基于视图创建视图 3. 查 ...