JQuery
JQuery
JQuery
转换
JQuery对象 --> DOM对象: JQuery Object[0]的第0个索引
DOM对象 --> JQuery对象: $(DOM对象)
选择器
id:
$('#id_name')
class:
$(".class")
tag:
$('tag_name')
组合:
tag_name .class_name #id_name
层级:
$('#i10 a')
$('#i10>a')
基本:
:first #第一个
:last #最后一个
:eq(index) #按索引第index个
$('[attr_name]' #具有attr_name的所有标签
$('[attr_name="value"]' #具有attr_name且值为value的所有标签
$("input[type='text']")
$(':text') #值是tet的input
example:
- 选择权
-
$('property_name').prop('checked'); //设置值
$('property_name').prop('checked', true); //获取值
- JQuery内置循环方法
$('#tb:checkbox').each(function(k){
this //this,DOM当前循环元素
})
筛选器:
JQ uery支持链式编程
$(this).next() //当前标签的下一个标签
$(this).nextAll() //当前标签往下所有标签
$(this).nextUntil('#i1') //当前标签往下开始直到i1的所有标签
$(this).prev() //当前标签的上一个标签
$(this).prevAll() //当前标签往上所有标签
$(this).prevUntil('#i1')() //当前标签往上开始直到i1的所有标签
$(this).parent() //当前标签的父标签
$(this).parents() //当前标签的父标签和家族关系
$(this).parentsUntil('#i1') //当前标签的父标签和家族关系直到i1的所有标签
$(this).children() //当前标签的子标签
$(this).siblings() //当前标签的兄弟标签
$(this).find('#id') //当前标签下查找标签
$(this).find('input[type="text"], input[type="password"]'
文本操作
$(this).text() //获取当前标签的文本内容,不解析html
$(this).text("<a>111</a>") //设置当前标签的文本内容
$(this).html() //获取当前标签的文本内容,解析html
$(this).html("<a>111</a>") //设置当前标签的解析html内容
$(this).val() //获取当前标签的value
$(this).val(..) //设置当前标签的value
样式操作
$(this).addClass(xx) //增加样式
$(this).removeClass(xx) //删除样式
$(this).togoleClass(xx) //有就删除没有就增加
$(this).css('color', 'red')
属性操作:
//专门用于做自定义属性
$(this).attr('name') //获取属性
$(this).attr('name', 'value') //设置属性
$(this).removeAttr('name') //删除属性
//专门用于checkbox,radio
$(this).prop('name') //获取属性
$(this).prop('name', 'value') //设置属性
$(this).removeProp('name') //删除属性
内容操作:
$(this).append() //在父级最后追加一个子元素
$(this).prepend() //在父级最前面追加一个子元素
$(this).before() //在当前元素之前追加（是同级关系）
$(this).after() //在当前元素之后追加（是同级关系）
$(this).remove() //
$(this).clear() //
$(this).clone() //
位置和尺寸:
$(window).scrollTop() //获取
$(window).scrollTop(0) //设置
$(window).scrollLeft() //获取
$(window).scrollLeft(0) //设置
$('#id').offset() //指定标签在html文档中的坐标
offset().top
offset().left
$('#id').position() //指定标签在他父标签中的坐标
$('#id').height() //获取标签高度
$('#id').innerHeight() //边框+纯高度
$('#id').outerHeight()
$('#id').outerHeight(true)
$('#id').
事件:
$('#id').click()
$('#id').bind('click', function(){})
$('#id').unbind('click', function(){})
$('#id').delegate('a', 'click', function(){}) #给id是id的标签下的a的标签绑定事件function,委托的形式
$('#id').undelegate('a', 'click', function(){})
$('#id').on('click', function(){})
$('#id').off('click', function(){})
阻止事件:
$('#i1').click(function(){
alert(456);
return false;
})
当页面框架加载完毕自动执行
$(function(){})
扩展
//给JQuery增加扩展方法
$.ajax()
$.extend({
'hnm': function(){
return '666';
}
})
$.fn.extend()
实例:
多选/复选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JQuery-1.12.4.js"></script>
</head>
<body>
<input type="button" value="all" onclick="chooseAll()">
<input type="button" value="noAll" onclick="chooseNo()">
<input type="button" value="reverseAll" onclick="reverseAll()">
<table border="1">
<thead>
<tr>
<th>checked</th>
<th>ip</th>
<th>port</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"> </td>
<td>2.2.2.2</td>
<td>32</td>
</tr>
<tr>
<td><input type="checkbox"> </td>
<td>2.3.3.3</td>
<td>33</td>
</tr>
<tr>
<td><input type="checkbox"> </td>
<td>2.4.4.4</td>
<td>34</td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
function chooseAll(){
$(':checkbox').prop('checked', true);
}
function chooseNo(){
$(':checkbox').prop('checked', false);
}
function reverseAll(){
$(':checkbox').each(function(k){
//this:当前循环的每一个元素
//k key-index,
console.log(k, this)
if(this.checked){
this.checked = false
}
else{
this.checked = true
}
})
}
</script>
TAB菜单 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JQuery-1.12.4.js"></script>
<style>
.header{
background-color: black;
color:white;
}
.content{
min-height: 50px;
border: 1px;
}
.hide{
display: none;
}
.diss{
width: 500px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div style="height: 400px; width: 200px">
<div class="item">
<div class="header">header1</div>
<div class="content hide">content1</div>
</div>
<div class="item">
<div class="header">header2</div>
<div class="content hide">content2</div>
</div>
<div class="item">
<div class="header">header3</div>
<div class="content hide">content3</div>
</div>
<div class="item">
<div class="header">header4</div>
<div class="content hide">content4</div>
</div>
</div>
</body>
</html>
<script>
$('.header').click(function(){
console.log($('this').text())
$('.content').addClass('hide')
$(this).next().removeClass('hide')
})
</script>
模态登录框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JQuery-1.12.4.js"></script>
<style>
.hide {
display:none;
}
.modal {
position:fixed;
top:50%;
left:50%;
width:500px;
height: 400px;
margin-left: -250px;
margin-top: -200px;
background-color: gray;
z-index: 10;
}
.shadow {
position: fixed;
top:0;
bottom: 0;
left: 0;
right:0;
opacity: 0.8;
z-index: 5;
background-color: blue;
opacity: 0.5;
}
.content {
width:200px;
height: 100px;
}
</style>
</head>
<body>
<div class="content">
<a>aaaaaa</a>
</div>
<div class="modal hide">
<div>
<input type="text">
<input type="text">
<input type="submit">
</div>
</div>
<div class="shadow hide">
</div>
</body>
</html>
<script>
$('.content').click(function(){
$('.shadow').removeClass('hide');
$('.modal').removeClass('hide');
})
</script>
点赞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JQuery-1.12.4.js"></script>
<style>
.content {
padding: 50px;
background-color: burlywood;
width:500px;
left:0;
height:100px;
position: relative;
border: 2px;
}
.zan {
position: absolute;
bottom: 0;
left: 0;
background-color: grey;
width:30px;
height:30px;
}
</style>
</head>
<body>
<div class="content">
<div class="zan">赞</div>
</div>
<p></p>
<div class="content">
<div class="zan">赞</div>
</div>
<p></p>
<div class="content">
<div class="zan">赞</div>
</div>
<p></p>
<div class="content">
<div class="zan">赞</div>
</div>
</body>
</html>
<script>
$('.zan').click(function(){
var tag = document.createElement('span');
var fontSize =10;
var top = 90;
var right = 200;
var opacity=1;
$(tag).text('+1');
$(tag).css('color', 'green');
$(tag).css('fontSize', fontSize +'px');
$(tag).css('top', top +'px');
$(tag).css('right', right +'px');
$(tag).css('opacity', opacity);
// $(tag).css('position', 'relative');
$(this).parent().append(tag);
var obj;
obj = setInterval(function(){
if(opacity < 0){
// alert(1)
clearInterval(obj);
$(tag).remove();
}
fontSize = fontSize + 5;
top = top - 5;
right = right - 5;
opacity = opacity - 0.1;
$(tag).css('fontSize', fontSize +'px');
$(tag).css('top', top +'px');
$(tag).css('right', right +'px');
$(tag).css('opacity', opacity);
// $(tag).css('position', 'absolute');
},100);
})
</script>
