and the height position of the operating jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 100px; width: 100px; overflow: auto;">
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
</div>
</body>
</html>
The figure: p more label content, by overflow: auto can show the scroll bar, scroll bar belongs to the div tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 100px; width: 100px; overflow: auto;">
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
</div>
<div style="height: 1000px"></div> <!--新增1000px的div标签-->
<script src="jquery-1.12.4.js"></script>
</body>
</html>
Above: The new div tag is 1000 pixels, the browser can see there is a new far right scroll bar, which is a pulley browser window, instead of the div.
The figure: .scrollTop () Gets the position of the current browser window scroll bar by $ (window), the current position is 68
Above: the scroll bar position is 565
Above: Use window to window associated; check the label position of the scrollbar can be used to associate div tag.
Above: do not pass the reference position is acquired; transmission parameter is specified to the specified position of the scroll bar; if the set value is 0, that is, Top.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1"></div>
<div style="height: 100px; width: 100px; overflow: auto;">
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
</div>
<div id="i2"></div>
<div style="height: 1000px"></div>
<script src="jquery-1.12.4.js"></script>
</body>
</html>Code: Add two div tags
Above: using the offset (), # i1 div tag top = 8, left = 8, which is the default div has a margin margins, default is top8 and left8.
Figure: 100px i2 above has a tag of div; i2 is the height of 108
Figure: respectively acquire the top and left
<div style="position: relative">
<div id="i11" style="position: absolute"></div>
</div>Code Description:
如果使用offset获取position: absolute的位置，获取到的不是基于窗口的位置，而是基于position: relative标签的相对位置。- height
to obtain highly pure label
$("p").height(); <!--获取标签的高度-->$("p").height(20); <!--设置标签的高度-->-
innerHeight ()
to obtain highly pure Borders + -
outerHeight ()
Get External height - outerHeight (true)
when set to true, calculating the margin
jQuery binding events
1、
常用的绑定
$('.c1').click()
2、
绑定c1，关联click事件，调用匿名函数
$('.c1').bind('click',function(){
})
解绑c1
$('.c1').unbind('click',function(){
})
3、
绑定c1下的a标签，关联click事件，调用匿名函数
$('.c1').delegate('a','click',function(){
})
解绑
$('.c1').undelegate('a','click',function(){
})
4、
上面三种绑定的方式，内部调用都是on方式
绑定
$('.c1').on('click',function(){
})
解绑
$('.c1').off('click',function(){
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text">
<input id="a1" type="button" value="添加">
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>";
$('#u1').append(temp);
});
$('ul li').click(function () {
var v = $(this).text();
alert(v)
})
</script>
</body>
</html>
Above: Click 2, it will pop up a message box, the contents of the message box we clicked 2
Above: 3 input, add the figure 3 successfully added the content and the corresponding li tag; however, when to click 3 does not eject any information; because when you run the program, only 1 and 2 associated with these two labels li while 3 is added later, and not binding on the 3 events.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text">
<input id="a1" type="button" value="添加">
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>";
$('#u1').append(temp);
});
// $('ul li').click(function () {
// var v = $(this).text();
// alert(v)
// })
// $('ul li').bind('click',function () {
// var v = $(this).text();
// alert(v)
// })
// $('ul li').on('click',function () {
// var v = $(this).text();
// alert(v)
// })
$('ul').delegate('li','click',function () {
var v = $(this).text();
alert(v)
})
</script>
</body>
</html>Code Description:
新添加的标签，通过使用click、bind、on的方式去绑定事件都未生效，因为代码是从上到下执行的，执行的过程中还没有添加新li标签，所以没有绑定。
而使用delegate情况不一样，delegate叫委托，只有当你点击li这个标签的时候delegate才会去绑定你点击的li标签，这样新增标签也会被绑定，事件就会生效。
在网页中添加、编辑新内容时就可以使用delegate。
Prevent the occurrence of an event of jQuery event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://www.baidu.com">Go</a>
</body>
</html>Code: Hyperlinks
Figure 2: you can jump to a specific page by clicking a hyperlink
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="ClickOn()" href="https://www.baidu.com">Go</a>
<script>
function ClickOn() {
alert(123);
}
</script>
</body>
</html>Code Description:
添加onclick这个dom事件；
点击事件后先执行alert
Figure 2: After clicking OK will jump to a specific page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="return ClickOn()" href="https://www.baidu.com">Go</a> <!--添加return-->
<script>
function ClickOn() {
alert(123);
return false; <!--return为false-->
}
</script>
</body>
</html>Code Description:
false：点击alert的确定后不会跳转到指定页面
true：点击alert的确定后可以跳转到指定页面
事件阻断主要就是为了做表单验证。
也就是说想要执行某个事件之前可以先做false和true的判断，如果为true才会继续执行超链接。
比如：输入用户名密码，可以先检查格式是否符合格式标准，符合的话就为true，然后才会将用户密码通过submit提交。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="return ClickOn()" href="https://www.baidu.com">Go</a>
<a id="i1" href="https://www.baidu.com">Go2</a>
<script src="jquery-1.12.4.js"></script>
<script>
function ClickOn() {
alert(123);
return true;
}
$('#i1').click(function () { //使用jQuery方式
alert(456)
})
</script>
</body>
</html>
Above: Click Go2, will pop up alert, will jump to a specific page after clicking OK bomb box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="return ClickOn()" href="https://www.baidu.com">Go</a>
<a id="i1" href="https://www.baidu.com">Go2</a>
<script src="jquery-1.12.4.js"></script>
<script>
function ClickOn() {
alert(123);
return true;
}
$('#i1').click(function () {
alert(456);
return false; //添加return false；
})
</script>
</body>
</html>Code: return false; do not jump to the page;