jquery选择器，筛选器，属性，事件基础

左边栏实例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <script src="jquery-3.2.1.min.js"></script>

     <style>

             .hide{

                 display: none;

             }

             .container{

                 width:300px;

                 height: 600px;

                 background-color: #ddd;

                 border: 1px solid #;

             }

             .container .title{

                 height: 38px;

                 font-size: 28px;

                 line-height: 38px;

                 background-color: orange;

                 cursor: pointer;

             }

             .container .body{

                 background-color:white;

             }

             .container .body a{

                 display:block;

                 padding: 10px;

             }

         </style>

     <title>Title</title>

 </head>

 <body>

 <div class='container'>

             <div>

                 <div class='title' onclick="Dis(this);">Menu1</div>

                 <div class='body'>

                     <a href="">content1</a>

                     <a href="">content2</a>

                     <a href="">content3</a>

                 </div>

             </div>

             <div>

                 <div class='title' onclick="Dis(this);">Menu2</div>

                 <div class='body hide'>

                     <a href="">content1</a>

                     <a href="">content2</a>

                     <a href="">content3</a>

                 </div>

             </div>

             <div>

                 <div class='title' onclick="Dis(this);">Menu3</div>

                 <div class='body hide'>

                     <a href="">content1</a>

                     <a href="">content2</a>

                     <a href="">content3</a>

                 </div>

             </div>

             <div>

                 <div class='title'onclick="Dis(this);">Menu4</div>

                 <div class='body hide'>

                     <a href="">content1</a>

                     <a href="">content2</a>

                     <a href="">content3</a>

                 </div>

             </div>

             <div>

                 <div class='title' onclick="Dis(this);">Menu5</div>

                 <div class='body hide'>

                     <a href="">content1</a>

                     <a href="">content2</a>

                     <a href="">content3</a>

                 </div>

             </div>

         </div>

  <script type="text/javascript">

     function Dis(ths){

         $(ths).next().removeClass('hide');

         $(ths).parent().siblings().find('.body').addClass('hide');

     }

 </script>

 </body>

 </html>

左边栏实例

基本选择器：

<div id='11' class='top'></div>

$('.top')  class选择器

$('#11')  id选择器

$('div')  tag选择器

层级筛选器

<form>

  <label>Name:</label>

  <input name="name" />

  <fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

 </fieldset>

</form>

<input name="none" />

$("form input")  找到表单里面所有的 input 元素（包括孙子级）

结果

 [ <input name="name" />, <input name="newsletter" /> ]

$("form > input") 匹配表单里面所有的子级input元素（儿子级）

结果

[ <input name="name" /> ]

$("label + input")  匹配所有紧跟在 label 后面的同级input 元素

结果

[ <input name="name" />, <input name="newsletter" /> ]

$("form ~ input")  找到所有与表单同辈的 input 元素

结果

[ <input name="none" /> ]

基本筛选器

$('li:first')  找到的第一个

$('li:last')  找到的最后一个

$('li:even') 查找所有找到的1、3、5...行（即索引值0、2、4...）

$('li:odd')   查找所有找到的2、4、6行（即索引值1、3、5...）

$('li:eq(1)') 找到的第2个（索引为1）

$('li:lt(2)')  查找第一第二行，即索引值是0和1，也就是比2小

筛选

筛选：

$('li').first() 找到的第一个

$('li').last() 找到的最后一个

$('li').eq(1) 找到的第二个（索引为1）

$('li').slice(2,5) 对找到的进行切片，end不写表示一直到最后

$('li').filter('.selected') 对找到的筛选出包含.selected

$('li').filter('.selected : first') 复合使用取第一个

$('li').hasClass("protected") 判断返回布尔值

选择：
找子级

$('li').children() 找到<li>里面的所有直接子级（儿子级）

$('li').find('a')  在<li>里面的所有子级里找a标签 （包括孙子级）
找同级

$('li').next() 找到<li>下一个同级

$('li').nextAll() 找到<li>下面的所有的同级

$('li').nextUntil() 选择从<li>往下一直到..的之间的
$('li').prev() 找到<li>上一个同级

$('li').prevAll() 找到<li>上面的所有同级

$('li').prevUntil() 选择从<li>往上一直到..的之间的

$('li').siblings()  所有同级（除了自己）
找父级

$('li').parent() 找到<li>的父级

$('li').parents() 找到<li>的所有父级（包括祖级）

jquery的循环

$.each(li,function(i,item){

    console.log(i,item)

})

i表示下标索引，item表示值

方式一

$(.title).each(function(i,item){

    console.log(i,item)

})

方式二

属性和css

$("p").css("color");  取得第一个段落的color样式属性的值。

$("p").css({ "color": "#ff0011", "background": "blue" });  将所有段落的字体颜色设为红色并且背景为蓝色。

$("p").css("color","red");  将所有段落字体设为红色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .back{

            position: fixed;

            bottom: 0px;

            right: 0px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div style="height: 2000px;"></div>

<div onclick="GoTop()" class="back hide">返回顶部</div>

<script src="jquery-1.8.2.js"></script>

<script type="text/javascript">

    function GoTop(){

        //返回顶部

        $(window).scrollTop(0);

    }

    $(function(){

        $(window).scroll(function(){

            //当滚动滑轮时，执行函数体

            //获取当前滑轮滚动的高度

            var top = $(window).scrollTop();

            if(top>100){

                //展示“返回顶部”

                $('.back').removeClass('hide');

            }else{

                //隐藏“返回顶部”

                $('.back').addClass('hide');

            }

        });

    });

</script>

</body>

</html>

返回顶部实例

文档加载完成执行的两种方式

方式 一

$(document).ready(function(){

    ....

})

方式 二

$(function(){

    ...

})

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         body{

             margin: 0px;

         }

         img {

             border: 0;

         }

         ul{

             padding: 0;

             margin: 0;

             list-style: none;

         }

         .clearfix:after {

             content: ".";

             display: block;

             height: 0;

             clear: both;

             visibility: hidden;

         }

         .wrap{

             width: 980px;

             margin: 0 auto;

         }

         .pg-header{

             background-color: #303a40;

             -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);

             -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);

             box-shadow: 0 2px 5px rgba(0,0,0,.2);

         }

         .pg-header .logo{

             float: left;

             padding:5px 10px 5px 0px;

         }

         .pg-header .logo img{

             vertical-align: middle;

             width: 110px;

             height: 40px;

         }

         .pg-header .nav{

             line-height: 50px;

         }

         .pg-header .nav ul li{

             float: left;

         }

         .pg-header .nav ul li a{

             display: block;

             color: #ccc;

             padding: 0 20px;

             text-decoration: none;

             font-size: 14px;

         }

         .pg-header .nav ul li a:hover{

             color: #fff;

             background-color: #425a66;

         }

         .pg-body{

         }

         .pg-body .catalog{

             position: absolute;

             top:60px;

             width: 200px;

             background-color: #fafafa;

             bottom: 0px;

         }

         .pg-body .catalog.fixed{

             position: fixed;

             top:10px;

         }

         .pg-body .catalog .catalog-item.active{

             color: #fff;

             background-color: #425a66;

         }

         .pg-body .content{

             position: absolute;

             top:60px;

             width: 700px;

             margin-left: 210px;

             background-color: #fafafa;

             overflow: auto;

         }

         .pg-body .content .section{

             height: 500px;

         }

         .back{

             position: fixed;

             bottom: 0px;

             left: 0px;

         }

         .hide{

             display: none;

         }

     </style>

 </head>

 <body>

     <div class="pg-header">

         <div class="wrap clearfix">

             <div class="logo">

                 <a href="#">

                 </a>

             </div>

             <div class="nav">

                 <ul>

                     <li>

                         <a  href="#">首页</a>

                     </li>

                     <li>

                         <a  href="#">功能一</a>

                     </li>

                     <li>

                         <a  href="#">功能二</a>

                     </li>

                 </ul>

             </div>

         </div>

     </div>

     <div class="pg-body">

         <div class="wrap">

             <div class="catalog">

                 <div class="catalog-item active" auto-to="function1"><a>第1张</a></div>

                 <div class="catalog-item" auto-to="function2"><a>第2张</a></div>

                 <div class="catalog-item" auto-to="function3"><a>第3张</a></div>

                 <div onclick="GoTop()" class="back hide">返回顶部</div>

             </div>

             <div class="content">

                 <div menu="function1" class="section">

                     <h1>第一章</h1>

                 </div>

                 <div menu="function2" class="section">

                     <h1>第二章</h1>

                 </div>

                 <div menu="function3" class="section">

                     <h1>第三章</h1>

                 </div>

             </div>

         </div>

     </div>

     <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

     <script type="text/javascript">

         function GoTop() {

             $(window).scrollTop(0);

         }

         $(function(){

             //滑动屏幕控制菜单栏和回到顶部

             $(window).scroll(function () {

                 var sct = $(window).scrollTop();

                 if(sct>60 && 100>sct){

                     $('.catalog').addClass('fixed');

                     $('.back').addClass('hide');

                 }else if(sct >=100) {

                     $('.back').removeClass('hide');

                     $('.catalog').addClass('fixed');

                     }else{

                     $('.catalog').removeClass('fixed');

                     $('.back').addClass('hide');

                 }

                 $('.section').each(function () {

                     var offSet=$(this).offset().top;

                     var lht =$(this).height();

                     var totalheight =offSet+lht;

                     var documentheight = $(document).height();

                     var windowheight = $(window).height();

                     if(offSet<sct && totalheight>=sct){

                         if(windowheight+sct==documentheight){

                              $('.catalog-item').last().addClass('active').siblings().removeClass('active');

                         }else {

                             var menus = $(this).attr('menu');

                             $('.catalog').find('[auto-to="'+menus+'"]').addClass('active').siblings().removeClass('active');

                         }

                     }

                 })

             })

             //点击菜单栏到达内容位置

             $('.catalog-item').bind('click',function () {

                 var auto = $(this).attr('auto-to');

                 var lht = $('div').find('[menu="'+auto+'"]').offset().top;

                 $(window).scrollTop(lht);

             })

         })

     </script>

 </body>

 </html>

滚动菜单，返回顶部，跳到指定内容

<!DOCTYPE html>

<html>

    <head>

        <meta charset='utf-8' />

        <title></title>

        <script type="text/javascript" src='jquery-1.8.2.js'></script>

        <script type="text/javascript">

            $(function(){

                $('#selectAll').click(function(){

                    $('#checklist :checkbox').prop('checked',true);

                })

                $('#unselectAll').click(function(){

                    $('#checklist :checkbox').prop('checked',false);

                })

                $('#reverseAll').click(function(){

                    $('#checklist :checkbox').each(function(){

                        $(this).prop('checked',!$(this).prop('checked'))

                    })

                })

            })

        </script>

    </head>

    <body>

        <div id='checklist'>

            <input type='checkbox' value='1'/>篮球

            <input type='checkbox' value='2'/>足球

            <input type='checkbox' value='3'/>羽毛球

        </div>

        <input type='button' value='全选' id='selectAll' />

        <input type='button' value='不选' id='unselectAll' />

        <input type='button' value='反选' id='reverseAll' />

    </body>

</html>

全选反选取消

$(document).height() 页面高度

$(window).scrollTop() 滑轮高度

$(window).height() 屏幕高度

$('.tip').height() 标签高度

$('.tip').offset() 标签到顶端的距离

$('.tip').offset().top 标签到顶端的高度

事件：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">

        <div id="title" style="background-color: black;height: 40px;"></div>

        <div style="height: 300px;"></div>

    </div>

<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>

<script>

    $(function(){

        $('#title').mouseover(function(){

            $(this).css('cursor','move');

        }).mousedown(function(e){

            //console.log($(this).offset());

            var _event = e || window.event;

            var ord_x = _event.clientX;

            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;

            var parent_top = $(this).parent().offset().top;

            $(this).bind('mousemove', function(e){

                var _new_event = e || window.event;

                var new_x = _new_event.clientX;

                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);

                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');

                $(this).parent().css('top',y+'px');

            })

        }).mouseup(function(){

            $(this).unbind('mousemove');

        });

    })

</script>

</body>

</html>

实例：移动面板

绑定事件

$('.class').bind('click',function(){

　　....})

同时绑定多个事件类型

$('#foo').bind('mouseenter mouseleave', function() {

  $(this).toggleClass('entered');

});

同时绑定多个事件类型/处理程序

$("button").bind({

  click:function(){$("p").slideToggle();},

  mouseover:function(){$("body").css("background-color","red");},

  mouseout:function(){$("body").css("background-color","#FFFFFF");}

});

委托事件

html代码

<div style="background-color:red">

<p>这是一个段落。</p>

<button>请点击这里</button>

</div>

-----------------------------------------------------------

jquery代码

$("div").delegate("button","click",function(){

  $("p").slideToggle();

});

内容

html代码：

<div>John Resig</div>

<div>George Martin</div>

<div>Malcom John Sinclair</div>

<div>J. Ohn

------------------------------------------------------------

jquery代码：

$("div:contains('John')")    查找所有包含 "John" 的 div 元素

---------------------------------------------------------------------

结果：

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

属性

prop  应用在input txetarea select

$("input[type='checkbox']").prop("checked");  选中为true,没选中为false

$("input[type='checkbox']").prop("disabled",true);  禁用页面上的所有复选框

$("input[type='checkbox']").prop("checked", true);  选中所有页面上的复选框。

attr  应用在除了input txetarea select以外的所有

$("img").attr("src","test.jpg");  设置单个属性

$("img").attr({ src: "test.jpg", alt: "Test Image" });  设置多个属性

removeAttr  移除属性

$("img").removeAttr("src");

addClass  增加class

removeClass  移除class

HTML代码/文本/值

$('p').html();

$('p').textl();

$('p').val();   获取文本框中的值

文档处理

内部插入

$("p").append("<b>Hello</b>");  向所有段落中追加一些HTML标记。

$("p").prepend("<b>Hello</b>");  向所有段落中前置一些HTML标记代码

<p><b>Hello</b>I would like to say: </p>

html代码：

<p>I would like to say: </p>

<p>I would like to say: </p>

<b class="foo">Hello</b>

<b class="foo">Good Bye</b>

jquery代码：

$("p").prepend( $(".foo")[0] );

结果：

<p><b class="foo">Hello</b>I would like to say: </p>

<p><b class="foo">Hello</b>I would like to say: </p>

<b class="foo">Good Bye</b>

appenedTo，prependTo

html代码：

<p>I would like to say: </p>

<div></div><div></div>

jquery代码：

$("p").appendTo("div");

结果：

<div><p>I would like to say: </p></div>

<div><p>I would like to say: </p></div>

外部插入

before,after, 在段落之前/后插入

$("p").before("<b>Hello</b>");

$("p").after("<b>Hello</b>");

insertBefore,insertAfter

html代码

<div id="foo">Hello</div><p>I would like to say: </p>
jquery代码

$("p").insertBefore("#foo");
结果：

<p>I would like to say: </p><div id="foo">Hello</div>

替换

replaceWith  后面替换前面

$("p").replaceWith("<b>Paragraph. </b>");

replaceAll    前面替换后面

$("<b>Paragraph. </b>").replaceAll("p");

删除

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

$("p").empty(); 内容删除 保留<p></p>

$("p").remove();包括<p></p>全部删除

复制

<b>Hello</b><p>, how are you?</p>

$("b").clone().prependTo("p");

结果：

<b>Hello</b><p><b>Hello</b>, how are you?</p>

http://www.php100.com/manual/jquery/

jquery选择器，筛选器，属性，事件基础的更多相关文章

jQuery 选择器筛选器样式操作文本操作属性操作文档处理事件动画效果插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
jQuery 初识筛选器属性选择器
---------------------------大事使我们惊讶,小事使我们沮丧,久而久之,我们对这二者都会习以为常. 一 jQuery是什么? ［1］ jQuery由美国人John Resi ...
jquery选择器筛选器
jQuery对象 Query 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里 ...
JQuery 选择器筛选器
什么是jQuery对象参考:http://jquery.cuishifeng.cn/css.html jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQue ...
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
jquery 选择器、筛选器、事件绑定与事件委派
一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...
第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换
1.jQuery简介为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的页面, 并且兼 ...
jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...
Jquery选择器大全、属性操作、css操作、文档、事件等
一.简介定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. jQuery对象 jQuery产 ...
jQuery三——筛选方法、事件
一.jquery常用筛选方法以下为jquery的常用筛选方法: 代码示例如下: <!DOCTYPE html> <html lang="en"> < ...

随机推荐

Redis集群主备模式部署
网上有非常多用Ruby安装Redis-cluster的文章.可是在实际环境下不想安装Ruby,所以本文主要介绍了用Redis命令部署Redis集群.而且为集群中每个master实例添加一个slave实 ...
Angular Scope解析与应用
Scope层级结构 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA== ...
CodeIgniter RestServer中put请求获取不到參数的问题解决
近期用restserver遇到个蛋疼的问题,发现$this->put得到的參数都是null.查了一下发现.这貌似这个普遍问题,參见链接:https://github.com/chriskacer ...
李洪强漫谈iOS开发[C语言-044]-翻译数字
李洪强漫谈iOS开发[C语言-044]-翻译数字
Wicket实战（一）概述
今天给大家介绍一个很好的东西.一个被称作Java平台上的ASP.NET--Wicket. 什么是Wicket 什么是Wicket,假设你用谷歌或其它搜索引擎搜索一番之后,就会发现wicket是Java ...
NSubstitute
https://github.com/nsubstitute/NSubstitute http://nsubstitute.github.io/help/creating-a-substitute/
Interfaces (C# Programming Guide)
https://msdn.microsoft.com/en-us/library/ms173156.aspx An interface contains definitions for a group ...
html5 canvas程序演示--P1197 [JSOI2008]星球大战
html5 canvas程序演示--P1197 [JSOI2008]星球大战 <!doctype html> <html> <head> <meta char ...
js验证手机号，身份证，车牌号验证
js验证手机号 <input type="text" class="identificationno"> // 身份证号码为15位或者18位,15 ...
JeePlus：代码生成器-生成示例（操作）
ylbtech-JeePlus:代码生成器-生成示例(操作) 1.返回顶部 1. 生成示例由以下部分组成单表主附表树表富文本图片管理自定义树组件自定义Grid 多对多左树右表 2. 2 ...

jquery选择器，筛选器，属性，事件 基础