|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery_05_dom</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
/* 如何获取元素
html:取的是开始标签和结束标签的内容;包含元素名,属性;
html:如果传参数就是赋值,
如果不传参数就是取值
*/
console.info("==html==" + $("#div").html())
/*
text:获取的时候只有文本,html标签去掉了
*/
console.info("==text==" + $("#div").text())
/* val:取的是页面上可以修改value的元素,
val获取的是修改后的值;
input有value
select有value
*/
console.info("==val==" + $("#text").val());
$("#text").val("我修改后的值");
console.info("==val==" + $("#citySel").val());
/* prop和attr都是可以增加和修改属性的 */
/* 如果传一个值,就是获取,
传两个值就是修改
传的是json也是修改 */
$("#div").attr("data-count","20");
$("#div").attr({
"name":"张三",
"age":20
});
/*属性获取*/
console.info("==attr==" + $("#div").attr("id"));
/* 删除属性 */
$("#div").removeAttr("name");
/* prop是所有匹配元素中,只操作第一个元素
待观察
*/
$("#div").prop("a","b");
/* addClass:为div的class增加样式
只能操作类选择器
*/
$("#div").addClass("demo_2");
/* 删除样式 */
$("#div").removeClass("demo_2");
/* css:可以添加样式
一次增加一个样式
*/
$("#div").css("color","blue");
/* 一次增加一堆样式 */
$("#div").css({
"border":"1px solid blue",
"font-weight":"border",
});
/* jquery大部分函数,
键值对:传一个参数,表示取值,传两个参数表是设置值
只有一个值(html,text):传一个参数,是设置值,不传参数是获取值
*/
/* 可以获取高度
两个宽度
*/
console.info("==width==" + $("#div").width());
/* 获取left和top
scrollLeft:获取匹配元素相对滚动条左侧的偏移
*/
console.info("==scrollLeft==" + $("#div").scrollLeft());
console.info("==position==" + $("#div").position().left);
/* 修改 */
// $("#div").css("left","100px");
/* 将div从左边移动到右边
问题:当div跑到最右边的时候,要回来
*/
/* 如果flag为true,增加
如果flag为false,减少 */
var flag = true ;
window.setInterval(function(){
/*获取到左边的位置*/
var left = $("#div").css("left");
left = parseInt(left);
/* 100px它不是一个整数啊
如果第一个位置 不是整数,返回值是NAN;(Not a Number)
parseInt会不会报NumberFormatExpception
*/
if (left < 0) {
left = 0;
flag = true;
}
if (left > $("body").width()) {
left = $("body").width() ;
flag = false;
}
console.info($("body").width() + "==left==" + left + left + "===>" + flag);
/* 为什么要写两个if,可否写if else
left > 1260
left < 0 ;
还是有一个0-->1260
*/
if(flag)
{
/* left的值不停的增加和减少 */
left = left + 100 ;
}else
{
left = left - 100 ;
}
$("#div").css("left", left + "px");
},1000);
});
</script>
<style type="text/css">
.demo_1{
font-size: 20px;
width: 100px;
position: relative;
}
.demo_2{
background: red;
}
</style>
</head>
<body>
<span></span>
<div id="div" class="demo_1">文天祥（过零丁洋）</div>
<input type="text" id="text">
<select name="" id="citySel">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
</select>
</body>
</html>
|
