jQuery基础--jQuery特殊属性操作
1、index()
会返回当前元素在所有兄弟元素里面的索引。<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//index()会返回当前元素在所有兄弟元素里面的索引。
$("li").click(function () {
console.log($(this).index());
});
});
</script>
</body>
</html>2、
1.1. val方法
val方法用于设置和获取表单元素的值，例如input、textarea的值
//设置值
$("#name").val(“张三”);
//获取值
$("#name").val();<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="呵呵" id="btn">
<input type="text" value="洋酒" id="txt">
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//console.log($("#btn").val());
//$("#btn").val("哈哈");
//console.log($("#btn").attr("value"));
//$("#txt").val("123");
$("#txt").focus(function () {
//如果是默认值，清空内容
if($(this).val() === "洋酒"){
$(this).val("");
}
});
$("#txt").blur(function () {
if($(this).val() === ""){
$(this).val("洋酒");
}
});
});
</script>
</body>
</html>1.2. html方法与text方法
html方法相当于innerHTML text方法相当于innerText
//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
//获取内容
$(“div”).html()
//设置内容
$(“div”).text(“<span>这是一段内容</span>”);
//获取内容
$(“div”).text()区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div><h3>我是标题</h3></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//html:innerHTML text:innerText
//console.log($("div").html());//<h3>我是标题</h3>
//console.log($("div").text());//我是标题
//$("div").html("<p>我是文本</p>");
$("div").text("<p>我是文本</p>");
});
</script>
</body>
</html>1.3. width方法与height方法
设置或者获取高度
//带参数表示设置高度
$(“img”).height(200);
//不带参数获取高度
$(“img”).height();获取网页的可视区宽高
//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
padding: 10px;
border: 10px solid #000;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//获取div的宽度
//console.log($("div").css("width"));
//$("div").css("width", "400px");
//直接获取到的是数字
//就是获取的width的值
console.log($("div").width());//width
//console.log($("div").innerWidth());//padding+width
//console.log($("div").outerWidth());//padding+width+border
//console.log($("div").outerWidth(true));//padding+width+border+margin
//$("div").width(400);
//需要获取页面可视区的宽度和高度
// $(window).resize(function () {
// console.log($(window).width());
// console.log($(window).height());
// });
});
</script>
</body>
</html>1.4. scrollTop与scrollLeft
设置或者获取垂直滚动条的位置
//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();【案例：仿腾讯固定菜单栏案例】 【案例：小火箭返航案例】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
height: 4000px;
width: 4000px;
}
</style>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$(window).scroll(function () {
console.log($(window).scrollTop());
console.log($(window).scrollLeft());
});
});
</script>
</body>
</html><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
img {
vertical-align: top;
}
.main {
margin: 10px auto 0;
width: 1000px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$(window).scroll(function () {
//判断卷去的高度超过topPart的高度
//1. 让navBar有固定定位
//2. 让mainPart有一个marginTop
if($(window).scrollTop() >= $(".top").height() ){
$(".nav").addClass("fixed");
$(".main").css("marginTop", $(".nav").height() + 10);
}else {
$(".nav").removeClass("fixed");
$(".main").css("marginTop", 10);
}
});
});
</script>
</head>
<body>
<div class="top" id="topPart">
<img src="images/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
<img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
<img src="images/main.png" alt=""/>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
height: 8000px;
}
a {
color: #FFF;
}
.actGotop {
position: fixed;
bottom: 50px;
right: 50px;
width: 150px;
height: 195px;
display: none;
z-index: 100;
}
.actGotop a, .actGotop a:link {
width: 150px;
height: 195px;
display: inline-block;
background: url(images/gotop.png) no-repeat;
outline: none;
}
.actGotop a:hover {
width: 150px;
height: 195px;
background: url(images/gotop.gif) no-repeat;
outline: none;
}
</style>
</head>
<body>
<!-- 返回顶部小火箭 -->
<div class="actGotop"><a href="javascript:;" title="Top"></a></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//当页面超出去1000px的时候，让小火箭显示出来,如果小于1000，就让小火箭隐藏
$(window).scroll(function () {
if($(window).scrollTop() >= 1000 ){
$(".actGotop").stop().fadeIn(1000);
}else {
$(".actGotop").stop().fadeOut(1000);
}
});
function getScroll(){
return {
left:window.pageYOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
top:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
}
}
//在外面注册
$(".actGotop").click(function () {
//$("html,body").stop().animate({scrollTop:0},3000);
//scrollTop为0
//$(window).scrollTop(0);
})
});
</script>
</body>
</html>1.5. offset方法与position方法
offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。
//获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
//获取相对于其最近的有定位的父元素的位置。
$(selector).position();<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 400px;
height: 400px;
background-color: pink;
position: relative;
margin: 100px;
}
.son {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//获取元素的相对于document的位置
console.log($(".son").offset());
//获取元素相对于有定位的父元素的位置
console.log($(".son").position());
});
</script>
</body>
</html>empty()
触发事件click()
trigger()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="触发" id="btn">
<p>我是一个p元素</p>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("p").on("click", function () {
alert("呵呵");
})
//toggle：切换 trigger：触发
$("#btn").on("click",function () {
//触发p元素的点击事件
//$("p").click();
//$("p").trigger("click");
});
});
</script>
</body>
</html>delay(2000)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 60px;
background-color: pink;
text-align: center;
line-height: 60px;
font-size: 30px;
margin: 100px auto;
display: none;
}
</style>
</head>
<body>
<div>这个一个提示消息</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("div").fadeIn(1000).delay(2000).fadeOut(1000);
});
</script>
</body>
</html>链式编程//设置性操作：可以链式编程
//获取性操作，不能链式，因为获取性操作，数值，字符串，
//返回值是不是一个jq对象。
console.log($("div").width(200).height(200).css("backgroundColor", "pink").width());案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: #ff16cf;
}
.comment li {
float: left;
}
ul {
list-style: none;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//1. 给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心
var wjx_k = "☆";
var wjx_s = "★";
$(".comment>li").on("mouseenter", function () {
$(this).text(wjx_s).prevAll().text(wjx_s);
$(this).nextAll().text(wjx_k);
});
//2. 给ul注册鼠标离开时间，让所有的li都变成空心
$(".comment").on("mouseleave", function () {
$(this).children().text(wjx_k);
//再做一件事件，找到current，让current和current前面的变成实心就行。
$("li.current").text(wjx_s).prevAll().text(wjx_s);
});
//3. 给li注册点击事件
$(".comment>li").on("click", function () {
$(this).addClass("current").siblings().removeClass("current");
});
});
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>each（）用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制</title>
<style>
ul {
list-style: none;
}
li {
float: left;
width: 200px;
height: 200px;
background: pink;
text-align: center;
line-height: 200px;
margin: 0 20px 20px 0;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
// for(var i = 0; i < $("li").length; i++) {
// $("li").eq(i).css("opacity", (i+1)/10);
// }
//each方法
$("li").each(function (index, element) {
$(element).css("opacity", (index+1)/10);
})
});
</script>
</head>
<body>
<ul id="ulList">
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
</ul>
</body>
</html>$冲突解决
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="itcast.js"></script>
<script src="jquery-1.12.4.js"></script>
<script>
console.log($);
//jQuery释放$的控制权
var mm = $.noConflict();
jQuery(function () {
});
</script>
</head>
<body>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-07-31 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
