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"> < ...
随机推荐
- td里面嵌套img标签后如何消除图片间隔
td里面嵌套image标签后如何消除图片间隔 CreateTime--2018年3月7日16:18:12 Author:Marydon 情景还原: <body> <div sty ...
- Django打造大型企业官网（五）
4.6.切换轮播图的箭头样式以及显示和隐藏 templates/news/index.html <span class="arrow left-arrow">‹< ...
- struts2学习笔记（8）-------struts2的ajax支持
struts2支持一种stream类型的Result,这样的类型的Result能够直接向client浏览器响应二进制,文本等. 我们能够再action里面生成文本响应,然后在client页面动态载入该 ...
- PHP + Socket 发送http请求进而实现站点灌水
本质上实现组装http信息的请求行,头信息.主题信息.參考it自学网 cookie信息和http请求头有非常大关系,注意把http请求头信息传递到函数里面 01-msg.php <?php re ...
- .NET下为百度文本编辑器UEditor增加图片删除功能
[摘要:比来写了个项目,用到了UEditor,但是UE并出有文件删除功效 然后网上找若何增加 找半天只能找到一个1.2.X的 以是便摹仿PHP的 改成了.NET的 PHP本文 第一步 (增加背景删除地 ...
- URAL 1057 数位dp
题目传送门http://acm.timus.ru/problem.aspx?space=1&num=1057 最近在学习数位dp,具体姿势可以参照这篇论文:http://wenku.baidu ...
- 第十二周 Leetcode 354. Russian Doll Envelopes(HARD) LIS问题
Leetcode354 暴力的方法是显而易见的 O(n^2)构造一个DAG找最长链即可. 也有办法优化到O(nlogn) 注意 信封的方向是不能转换的. 对第一维从小到大排序,第一维相同第二维从大到小 ...
- NOIP 2011 Mayan游戏 大暴搜
题目链接:https://www.luogu.org/problemnew/show/P1312 我的第一篇题解!! 当然感谢ZAGER 的提示,他的链接https://www.cnblogs.com ...
- Android 网络请求及数据处理
Android 网络请求: 1.Volley http://blog.csdn.net/t12x3456/article/details/9221611 2.Android-Async-Http ...
- MQTT + apache-apollo服务器初学使用
说明:MQTT是IBM开发的一个即时通讯协议,有可能成为物联网的重要组成部分.该协议支持所有平台,几乎可以把所有联网物品和外部连接起来,被用来当做传感器和致动器(比如通过Twitter让房屋联网)的通 ...