jQuery-day01
//demo1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-3.4.1.min.js"></script>
<script>
function bigger(){
//$选择器 等价document.getELementsByTagName()
//first last eq(index)
//获取段落的原始字号(16px)
var size = $("p").css("font-size");
//console.log(size);
//去掉单位,便于增加字号
size = size.replace("px","");
//将字号+1再设置给段落
$("p").css("font-size",++size+"px");
}
</script>
</head>
<body>
<input type="button" value="+" onclick="bigger();"/>
<p>1.引入jQuery.js</p>
<p>2.使用选择器选中节点</p>
<p>3.调用它的API操作节点</p>
</body>
</html>
<br/>//demo2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-3.4.1.min.js"></script>
<script>
function print1(){
//使用选择器获取的是jQuery对象
var $ps = $("p");//一组p jQuery对象
console.log($ps);
for (var i = 0; i < $ps.length; i++) {
//从jQuery对象中获取值是dom
$ps[i];
console.log($ps[i].innerHTML);
}
}
//调用时传入了this,它指代点击的
//那个图片,这是一个dom对象.
function chg(img){
console.log($(img).width());
console.log($(img).height());
if($(img).width()==218){
$(img).width(250).height(250);
}else{
$(img).width(218).height(218);
}
}
</script>
</head>
<body>
<input type="button" value="打印" onclick="print1();"/>
<p>1.jQuery对象才能调用jQuery方法</p>
<p>2.dom对象才能调用dom方法</p>
<p>3.jQuery对象本质上是dom数组</p>
<div>
<img alt="" src="../images/IMG_20191113_114502.JPG" style="width:218px;height:218px;" onclick="chg(this);">
</div>
</body>
</html>
<br/>//demo3选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.4.1.min.js"></script>
<script>
window.onload = function(){
//1.基本选择器
//和css选择器一样
//2.层次选择器
//2.1选择子孙/儿子
//和css派生选择器一样
//2.2选择弟弟
console.log($("#gz~li"));//+选下一个名为li的弟弟 不写li的话就是下一个标签不一定是li.
//~选后面全部弟弟
//3.过滤选择器(*)
//3.1基本顾虑选择器(*) gt(index)下标大于index的元素 lt(index)下表小于index的元素
console.log($("li:first"));
console.log($("li:even"));//偶数 odd是奇数
console.log($("li:eq(1)"));//下标等于1的
console.log($("li:not(#gz)"));
//3.2内容过滤选择器
console.log($("li:contains('海')"));//找出li中内容含有" 海"的 empty找出啥也没有的
//3.3可见性过滤选择器$("input:hidden")匹配所有不可见元素
//,或type为hidden的元素
//visible匹配所有可见元素
console.log($("li:hidden"));
//3.4属性过滤选择器
console.log($("li[style]"));
//3.5状态过滤选择器
//根据状态定位元素
//-enabled 匹配可用的元素
//-disable 匹配不可用的元素
//-checked 匹配选中的checkbox
//-selected 匹配选中的option
//$("input:selected")
console.log($("input:enabled"));
console.log($("input:checked"));
console.log($("input:checked")[0].value);
//4.表单选择器
console.log($(":radio"));
}
</script>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li>深圳</li>
<li>天津</li>
<li style="display:none;">杭州</li>
</ul>
<!--
readonly:只读.但数据有效依然可以提交给服务器.
disabled:不可用,数据无效,不能提交给服务器.
-->
<p>
<input type="text" disabled/>
<input type="password"/>
</p>
<p>
<input type="radio"name="sex" value="1" checked/>男
<input type="radio" name="sex"/>女
</p>
</body>
</html>
浙公网安备 33010602011771号