JQuery --- 第二期 (jQuery属性操作)
个人学习笔记
1.JQuery的内容选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery的内容选择器</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//:contains(text) 作用:找到包含指定文本内容的指定元素
var $div1 = $("div:contains('div')");
console.log($div1);
//:empty 作用:找到既没有文本内容,也没有子元素的指定元素
var $div2 = $("div:empty");
console.log($div2);
//:has(selector) 作用:找到包含指定子元素的指定元素
var $div3 = $("div:has('p')");
console.log($div3);
//:parent 作用:找到包含指定文本内容或子元素的指定元素
var $div4 = $("div:parent");
console.log($div4);
});
</script>
<style>
div{
width: 100px;
height: 100px;
margin-top: 20px;
background: green;
}
</style>
</head>
<body>
<div></div>
<div>div 1号</div>
<div>div 2号</div>
<div><p></p></div>
<div><span></span></div>
</body>
</html>
2. 属性和属性节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性和属性节点</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
/*
什么是属性
对象身上的变量就是属性
如何操作属性
对象.属性名称 = 值
对象.属性名称
对象['属性名称'] = 值
对象['属性名称']
什么是属性节点
<span name="mySpan"></span>
给HTML标签添加的属性就是属性节点
在浏览器找到span标签后,展开看到的就是属性
在attributes属性中的内容就是属性节点
如何操作属性节点使用get和set方法
var span = document.getElementsByTagName('span')[0];
span.setAttribute("name","newSpan");
console.log(span.getAttribute("name"));
属性和属性节点的区别
任何元素都有属性,但是只有DOM元素有属性节点
*/
var span = document.getElementsByTagName('span')[0];
span.setAttribute("name","newSpan");
console.log(span.getAttribute("name"));
});
</script>
</head>
<body>
<span name="mySpan"></span>
</body>
</html>
3.JQuery-attr方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-attr方法</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
/**
* 获取或者设置或新增属性节点的值
*
* 传递一个参数:获得指定属性节点的值,无论找到多少个元素,只会返回第一个属性节点的值
* 传递两个参数:如果存在,就更改,不存在就新增.有多少元素就设置多少元素
*/
console.log($('span').attr("class", "newSpan1"));
console.log($('span').attr("new", "haha"));
console.log($('span').attr("new"));
/**
* 删除属性节点:会删除所有被找到的元素的属性节点
* 如果想要删除多个属性节点,直接敲一个空格就行了
*/
$('span').removeAttr("class new");
console.log($('span'));
});
</script>
</head>
<body>
<span class="span1" name="第一个span"></span>
<span class="span2" name="第二个span"></span>
</body>
</html>
4.JQuery-prop方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-prop方法</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//和attr方法基本一样
$('span').eq(0).prop("test","moti");
console.log($("span").prop("test"));
$('span').removeProp("class");
console.log($('span')); /*
官方推荐在操作属性节点的时候,具有true和false两个属性的属性节点,
如CheckBox,selected,或者disabled使用prop,
其他的时候attr()
*/
console.log($('input').prop("checked"));//返回true和false
console.log($('input').attr("checked"));//返回checked和undefined
});
</script>
</head>
<body>
<span class="span1" name="第一个span"></span>
<span class="span2" name="第二个span"></span>
<input type="checkbox" checked>
</body>
</html>
5.attr和prop方法练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr和prop方法练习</title>
<script src="jquery-1.12.4.js"></script>
<script> $(function () {
//给button添加点击事件
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
//获取输入框的内容
var input = document.getElementsByTagName("input")[0];
var text = input.value;
//修改img的src属性
$('img').attr("src",text);//推荐
// $('img').prop("src",text);
}
});
</script>
</head>
<img>
<input type="text"> <button>切换图片</button><br>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super">
</body>
</html>
6.JQuery相关类操作方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery相关类操作方法</title>
<script src="jquery-1.12.4.js"></script>
<style>
.class1{
background: rebeccapurple;
width: 200px;
height: 10px;
}
.class2{
background: green;
height: 100px;
}
</style>
<script>
$(function () {
var btn0 = document.getElementsByTagName("button")[0];
var btn1 = document.getElementsByTagName("button")[1];
var btn2 = document.getElementsByTagName("button")[2];
/**
* addClass:添加一个类,如果要添加多个,多个类名之间用空格隔开
*/
btn0.onclick = function () {
$("div").addClass("class2 class1");
}
/**
* removeClass:删除一个类,如果要删除多个,多个类名之间用空格隔开
*/
btn1.onclick = function () {
$("div").removeClass("class2");
}
/**
* toggleClass:切换类,有就删除,没有就添加
*/
btn2.onclick = function () {
$("div").toggleClass("class2 class1");
} });
</script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>
7.JQuery文本值相关的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery文本值相关的方法</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
var btn0 = document.getElementsByTagName("button")[0];
var btn1 = document.getElementsByTagName("button")[1];
var btn2 = document.getElementsByTagName("button")[2];
var btn3 = document.getElementsByTagName("button")[3];
var btn4 = document.getElementsByTagName("button")[4];
var btn5 = document.getElementsByTagName("button")[5]; btn0.onclick = function () {
$("div").html("<p>我是段落<span>我是span</span></p>")
};
btn1.onclick = function () {
console.log($("div").html());
};
btn2.onclick = function () {
$("div").text("我是文本内容");
};
btn3.onclick = function () {
console.log($("div").text());
};
btn4.onclick = function () {
$("input").val("请输入内容");
};
btn5.onclick = function () {
console.log($("input").val());
};
});
</script>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
</body>
</html>
8.jQuery操作CSS样式的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery操作CSS样式的方法</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
/**
* 逐个设置
*/
// $("div").css("width","100px");
// $("div").css("height","100px");
// $("div").css("background","green");
/**
* 链式设置
* 注意:链式操作如果大于三步,建议分开
*/
$("div").css("width","100px").css("height","100px").css("background","red");
/**
* 批量设置
* (推荐)
*/
$("div").css({
width:"100px",
height:"100px",
background:"blue"
});
/**
* 获取CSS样式值
*/
console.log($("div").css("background"));
});
</script>
</head>
<body>
<div></div>
</body>
</html>
9.JQuery位置和尺寸操作的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery位置和尺寸操作的方法</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
border: 20px solid #000;
margin-left: 50px;
position: relative;
}
.son{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 50px;
top: 50px; }
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
var btn0 =document.getElementsByTagName("button")[0];
var btn1 =document.getElementsByTagName("button")[1];
/**
* 监听获取
*/
btn0.onclick = function () {
//获取元素的宽度
console.log("father的宽度:",$(".father").width());
//获得元素距离窗口的偏移位
console.log("son距离窗口的左偏移位",$(".son").offset().left);
//获得元素距离定位元素的偏移位
console.log("son距离父元素的左偏移位",$(".son").position().left);
};
/**
* 监听设置
*/
btn1.onclick = function () {
//设置元素的宽度
$(".father").width("500px")
//设置元素距离窗口的偏移位
$(".son").offset({
top:40
});
//注意position方法只能获取不能设置,可以使用css方法设置
$(".son").css({
left:"10px"
});
};
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>
10.JQuery-scrollTop方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-scrollTop方法</title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
width: 100px;
height: 200px;
border: 2px solid #000;
overflow: auto;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
var btn0 =document.getElementsByTagName("button")[0];
var btn1 =document.getElementsByTagName("button")[1];
/**
* 监听获取
*/
btn0.onclick = function () {
//获取元素滚动的偏移位
console.log("scroll 的div滚动的偏移位:",$(".scroll").scrollTop());
//获取整个网页滚动的偏移位,为了保证浏览器兼容性,需要按照以下的写法
console.log("整个网页滚动的偏移位:",$("body").scrollTop() + $("html").scrollTop());
};
/**
* 监听设置
*/
btn1.onclick = function () {
//设置元素滚动的偏移位
$(".scroll").scrollTop(200);
//设置整个网页的偏移位,为了保证浏览器兼容性,需要按照以下的写法
$("html,body").scrollTop(300);
};
});
</script>
</head>
<body>
<div class="scroll">
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
</div>
<button>获取</button>
<button>设置</button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
JQuery --- 第二期 (jQuery属性操作)的更多相关文章
- JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
- JQuery第二天——JQuery的DOM操作
JQuery拥有隐式迭代和显式迭代 因为JQuery为类数组对象,可以使用手动遍历实现显式 .each():也可以使用 $("p").click(function(){ var t ...
- jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点
样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div" ...
- jQuery样式及html属性操作
样式及html属性操作1,行内样式 css(); a:获取样式 元素.css(样式名称); b:设置单个样式 元素.css("样式名称":"样式值"); c:设 ...
- jQuery 第二章 实例方法 DOM操作选择元素相关方法
进一步选择元素相关方法: .get() .eq() .find() .filter() .not() .is() .has() .add()集中操作 .end()回退操作 .get() $(&qu ...
- Jquery选择器大全、属性操作、css操作、文档、事件等
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. jQuery对象 jQuery产 ...
- jQuery 第二章 实例方法 DOM操作取赋值相关方法
取赋值相关方法: .html() .text() .val() .size() .addClass() .removeClass() .hasClass() .html() html方法干嘛的呢,底 ...
- jquery 标签中的属性操作
.arrt() 获取匹配的元素集合中的第一个元素的属性值,或设置每一个元素中的一个或多个属性值. .attr(attributeName) $("em").attr("t ...
- select元素选择时间以及jQuery对select的属性操作
<select class="input04" id="1" name="in_class1" onchange="setc ...
随机推荐
- 5月2日——iOS11定位失效问题
所存在的问题: (1)定位不能正常使用 (2)首次安装APP 时 "是否允许使用定位信息" 系统提示框不显示 iOS定位失效原因: 因为苹果现在增加了一项新的隐私保护功能 NSL ...
- 微信小程序-获取地理位置
近期公司使用微信小程序开发一套应用,涉及到使用小程序的获取地理位置接口,但是在使用测试过程中发现获取的经纬度偏差较大, 之后进行了一番搜索,终于找到了, 原文地址:http://blog.csdn.n ...
- nginx与Apache的对比以及优缺点
本文来自其他文章.如有好的问题,希望各位大神多多分享, 谢谢了..... 今天准备较详细的对比一下apache httpd与nginx两个web服务器的异同点.优缺点.由于我并不是做web开发的,所以 ...
- PyCharm中设置字体大小
1.在file(文件)里面找到setting(设置) 2. 然后再左面Editor里面找Font,再到右面Size里面设置字体大小
- Get Docker CE for CentOS
To get started with Docker CE on CentOS, make sure you meet the prerequisites, then install Docker. ...
- Http Hijacker
- bootgrid
编写bootgrid前提条件 有关bootgrid的.css和.js库文件 参数:ajax: 必须设置为true post: 传递给Java的参数 url: 与java连接的方法名 ...
- 一句python代码搭建FTP服务
环境搭建: python windows/linux pip install pyftpdlib (安装失败请到这里下载:https://pypi.python.org/pypi/pyftpdlib/ ...
- Java 读书笔记 (十一) Number & Math 类
所有的包装类(Integer.Long.Byte.Double.Float.Short)都是抽象类Number的子类. 这种由编译器特别支持的包装称为装箱,所以当内置数据类型被当作对象使用的时候,编译 ...
- kv.go
package clientv3 import ( pb "github.com/coreos/etcd/etcdserver/etcdserverpb" //protob ...