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 ...
随机推荐
- PAT1130:Infix Expression
1130. Infix Expression (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Give ...
- CAS 4.0.x 自定义登录页面
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] CAS默认登录页面 复制一个新的页面管理页面 修改页面引用 修改casproperties 修改casLoginViewjs ...
- Hibernate中的持久化类
一.持久化类概述 就是一个JavaBean,这个JavaBean与表建立了映射关系.这个类就称为是持久化类. 简单理解为 持久化类=JavaBean+映射文件. 持久化类:是指其实例需要被Hibern ...
- maven的pom文件中配置测试用例
<build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> ...
- Ubuntu安装和卸载.bundle格式的VMware
本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=628 前言: 本文中用于演示的.bundle文件是VMware-Workstation-Full-14.1.1-75 ...
- Hibernate验证器
第 4 章 Hibernate验证器 http://hibernate.org/validator/documentation/getting-started/#applying-constrain ...
- 译MassTransit 创建消息消费者
创建消息消费者一个消息消费者是一个 可以消费一个或多个消息类型的类,指定IConsumer<T>接口,T为消息类型 public class UpdateCustomerConsumer ...
- Python+Selenium+PIL+Tesseract真正自动识别验证码进行一键登录
Python 2.7 IDE Pycharm 5.0.3 Selenium:Selenium的介绍及使用,强烈推荐@ Eastmount的博客 PIL : Pillow-3.3.0-cp27-cp27 ...
- redis基础操作~~数据备份与恢复、数据安全、性能测试、客户端连接、分区
数据备份与恢复 数据备份redis save 命令用于创建当前数据库的备份. redis 127.0.0.1:6379> SAVE OK 该命令将在 redis 安装目录中创建dump.rdb文 ...
- 【BZOJ 2004】: [Hnoi2010]Bus 公交线路
题目链接: TP 题解: 所以说,超显眼的数据范围啊. 很显然我们对于每个P的区间都是要有k个站被bus停留,然后考虑转移的话应该是把这k个站里的某个bus往前走,那么转移也很显然了,n的范围很大 ...