jQuery-jquery scrollTop怎么解决所有浏览器兼容问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery-jquery scrollTop怎么解决所有浏览器兼容问题相关的知识，希望对你有一定的参考价值。
只在quirk模式下， body.scrollTop是被所有都支持的所以这个表大家也不用 也没有必要去记， 只要记住一条
if(window.pageYOffset)//这一条滤去了大部分， 只留了IE678
else if(document.documentElement.scrollTop )//IE678 的非quirk模式
else if(document.body.scrolltop)//IE678 的quirk模式
原则是看pageYOffset 然后看documentElement.scrollTop, 最后是document.body.scrollTop
当然 也可以直接scrollTop 而不使用pageYOffset
以下是MDN 提供的兼容性代码
scrolltop = (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollTop == ‘number’ ? t : document.body).scrollTop
转载，仅供参考。 参考技术A 只在quirk模式下， body.scrollTop是被所有都支持的
所以这个表大家也不用 也没有必要去记， 只要记住一条
if(window.pageYOffset)//这一条滤去了大部分， 只留了IE678
else if(document.documentElement.scrollTop )//IE678 的非quirk模式
else if(document.body.scrolltop)//IE678 的quirk模式
原则是看pageYOffset 然后看documentElement.scrollTop， 最后是document.body.scrollTop
当然 也可以直接scrollTop 而不使用pageYOffset
以下是MDN 提供的兼容性代码。
jQuery-jQuery引入和jQuery选择器
jQuery引入和jQuery选择器
jQuery引入
先下载jQuery文件，再通过script导入
<!DOCTYPE html>
<html>
<head>
<meta charset=‘utf-8‘/>
<title>jQuery</title>
</head>
<body>
<div class="body">
<ul>
<li id="login">登录</li>
<li id="register">注册</li>
</ul>
</div>
<!--引入jQuery-->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script>
// 利用jQuery提供的功能获取标签文本
var value = $(‘#login‘).text();
console.log(value);
</script>
</body>
</html>
jQuery对象和DOM对象
DOM对象和jQuery对象都为标签提供了各种各种功能，并且两者之间可以进行相互转换。
Dom对象转换jQuery对象：$(dom对象)
jQuery对象转换成Dom对象：jQuery对象[0]
<!DOCTYPE html>
<html>
<head>
<meta charset=‘utf-8‘/>
<title>jQuery</title>
</head>
<body>
<div id="content">人生如烟，烟如雾。</div>
<!--引入jQuery-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// DOM操作
// 获取文本
var txt = document.getElementById(‘content‘).innerText;
document.getElementById(‘content‘).innerText = ‘沙雕‘;
// jQuery操作
var text = $(‘#content‘).text();
$(‘#content‘).text(‘二货‘);
// Dom对象转换jQuery对象：$(dom对象)
$(document.getElementById(‘content‘))
// jQuery对象转换成Dom对象：jQuery对象[0]
$(‘#content‘)[0]
</script>
</body>
</html>
选择器
id选择器
HTML代码：
<div id="notMe">
<p>id="notMe"</p>
</div>
<div id="myDiv">白日依山尽</div>
jQuery代码：
$("#myDiv");
结果：
[<div id="myDiv">id="myDiv"</div> ]
class选择器
HTML代码：
<div class="notMe">窗前明月光</div>
<div class="myClass">疑是地上霜</div>
<span class="myClass">举头望明月</span>
jQuery代码：
$(".myClass");
结果：
[ <div class="myClass">窗前明月光</div>, <span class="myClass">举头望明月</span> ]
标签选择器
HTML代码：
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery代码：
$("div");
结果：
[ <div>DIV1</div>, <div>DIV2</div> ]
多选择器
HTML代码：
<div>鸡</div>
<p class="myClass">我顶你个肺</p>
<span>你太美</span>
<p class="notMyClass">哈哈哈哈哈哈</p>
jQuery代码：
$("div,span,p.myClass")
结果：
[ <div>鸡</div>, <p class="myClass">我顶你个肺</p>, <span>你太美</span> ]
层级选择器
HTML代码：
<form>
<label>Name:</label>
<input name="name" />
<div>
<label>Newsletter:</label>
<input name="newsletter" />
</div>
</form>
<input name="none" />
jQuery代码：
$("form input")
结果：
[ <input name="name" />, <input name="newsletter" /> ]
属性选择器
HTML代码：
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery代码：
$("input[name=‘newsletter‘]")
结果：
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" />, <input type="checkbox" name="newsletter" value="Cold Fusion" /> ]
表单选择器
HTML代码：
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select>
<option>Option</option>
</select>
<textarea> </textarea>
<button>Button</button>
</form>
jQuery代码：
$(":text") // 找到所有input标签且type=text的标签
//$(":input") //找到所有input标签
//$(":password") //找到所有input且type=password的标签
//$(":radio") //找到所有input且type=radio的标签
//$(":checkbox") //找到所有input且type=checkbox的标签
结果：
[ <input type="text" /> ]
以上是关于jQuery-jquery scrollTop怎么解决所有浏览器兼容问题的主要内容，如果未能解决你的问题，请参考以下文章