<!DOCTYPE htmi>

<html>

<head>

    <meta charset="UTF-8">

    <title>JQuery常见方法示例</title>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script type="text/javascript">

        $(function () {

            ////attr() 方法设置或返回被选元素的属性值，自定义属性时使用。

            //var item0=$("div").attr("data-code");//获取某属性值

            //$("ul").attr("class","box");//设置某属性值

            //$("ul").attr({"class":"box","name":"book"});//设置多个属性值

            ////prop() 方法设置或返回被选元素的属性和值,固有属性时使用。

            //var item1 = $("div").prop("class");//获取某属性值

            //$("ul").prop("class", "box");//设置某属性值

            //$("li").prop({ "class": "book", "title": "123" });//设置多个属性值

            //$("div").removeAttr("data-code"); //移除属性

            //$("div").removeClass();//移除标签类名

            //$("div").addClass("test");//添加标签类名

            ////find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

            //$("div").find("ul").css("background", "red");

            ////append() 方法在被选元素的结尾（仍然在内部）插入指定内容(html内容)。

            //$("li").append("<a href='http://www.baidu.com'>123</a>");

            ////parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。

            //$("p").parent(".selected").css("background", "yellow");

            ////filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。

            //$("li").filter(".li").css("background", "yellow").attr("name","li");

            //$('li').filter(':even').css('background-color', 'red');//:even忽略偶数

            //$("ul").find("li").filter(':even').css('background-color', 'red');

            ////not() 从匹配元素集合中删除元素。与filter() 相反

            //$('li').not(':even').css('background-color', 'red');

            ////has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。它跟filter()方法是有区别的。has()方法有父子级关系。

            //$('ul').has('.li').css('background','red');   //只有包含的标签的class值是box的div(父级)的背景色为红色

            ////eq(0) 第1个

            //$('div').find('li').eq(0).css('background','red');   //给div下的第一个li的背景设置为红色

            ////next() 下一个

            //$('div').find('li').eq(0).next().css('background','red');  //给div下的第一个li的下一个li的背景设置为红色

            ////prev() 上一个

            $('div').find('li').eq(4).prev().css('background', 'red');  //给div下的第一个li的上一个li的背景设置为红色

            ////index():索引就是当前元素在所有兄弟节点中的位置

            $("li").click(function () {

                confirm($(this).index());

            });

            ////

            $('div').closest('form'); //选择离div最近的那个form父元素

            $('div').children(); //选择div的所有子元素

            $('div').siblings(); //选择div的同级元素

            $('div').insertAfter($('p'));//使用.insertAfter()，把div元素移动p元素后面

            $('p').after($('div'));//使用.after()，把p元素加到div元素前面

            //.insertAfter()和.after()：在现存元素的外部，从后面插入元素

　　        //.insertBefore()和.before()：在现存元素的外部，从前面插入元素

        　　//.appendTo()和.append()：在现存元素的内部，从后面插入元素

        　　//.prependTo()和.prepend()：在现存元素的内部，从前面插入元素

            //confirm(item1);

        });

    </script>

</head>

<body>

    <div class="book" data-code="book_code">

        <ul>

            <li>1.前言</li>

            <li class="li">2.目录</li>

            <li class="li">3.第一章</li>

            <li class="li">4.第二章</li>

            <li>5.第三章</li>

            <li>6.第四章</li>

            <li>7.第五章</li>

        </ul>

    </div>

    <li>6.第六章</li>

    <li>7.第七章</li>

    <div class="selected">

        <p>Hello Again</p>

    </div>

</body>

</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挂载windows nfs

    1.win下创建nfs文件夹并共享 2.登陆linux,执行 yum 3.创建挂载点 4.挂载win nfs 5./etc/fstab添加永久挂载 6.查看挂载磁盘,此时windows盘已落在linu ...

  2. window-server 服务器解决远程连接

    mstsc 连接远程服务器,出现黑屏的情况: 解决方案: 运行 -> 输入gpedit.msc,进入组策略 -> 计算机配置 -> 管理模板 -> Windows组件 -> ...

  3. Vue.js之计算属性（computed）、属性监听（watch）与方法选项（methods）

    vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...

  4. 使用Hot Chocolate和.NET 6构建GraphQL应用(6) —— 实现Query排序功能

    系列导航 使用Hot Chocolate和.NET 6构建GraphQL应用文章索引 需求 从前几篇文章可以看出,使用Hot Chocolate实现GraphQL接口是比较简单的,本篇文章我们继续查询 ...

  5. MySQL 新增表分区很慢，转移大表数据

    问题: MySQL (version 5.7.26) 数据库有一批表 xxx_yyy,由于评估的数据量可能比较大,因此每张表都设置了表分区,把每个月的数据保存在单独的分区里. 那么如果每年年末,没有提 ...

  6. JS 函数提升&变量提升以及函数声明&函数表达式的区别

    感谢原文作者:迟早会有猫 原文链接:https://www.cnblogs.com/SidselLoong/p/10515809.html 今天看js的变量提升问题,里面提到了函数提升.然后发现自己之 ...

  7. 入门 - k8s伸缩应用程序 （六）

    目标 使用 kubectl 伸缩应用程序. Scaling(伸缩)应用程序 在之前的文章中,我们创建了一个 Deployment,然后通过 服务 提供访问 Pod 的方式.我们发布的 Deployme ...

  8. 关于IBAction、IBOutlet前缀IB的解释

    - 全称:Interface Builder - 以前的UI界面开发模式:Xcode3 + Interface Builder - 从Xcode4开始,Interface Builder已经整合到Xc ...

  9. ReactiveCocoa 学习资料

    之前就有听说,感觉很强大,ReactiveCocoa更加被Mattt Thompson大神称为开启一个新Objective-C纪元.所以觉得非常有学习的必要了. 一些很好的学习资料: Reactive ...

  10. 微信小程序开发提升效率

    http://www.ifanr.com/minapp/790017 微信小程序的 API 实现需要兼顾方方面面,所以仍然使用 callback 写法. 众所周知,Callback-Hell(回调地狱 ...