alert 用于打开网页是弹出提示
holdready用来暂停和启动我们的ready事件。ture为暂停false为开启。
<!DOCTYPE html>
<html>
<head>
< charset=\"utf-8\" />
< >DEMO</ >
< src=\"js/jquery.min.js\"></ >
<style>
div{
height:50px;
width:150px;
background-color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<div></div>
<div>我是div</div>
<div>3</div>
<div><span>span</span></div>
<div><p></p></div>
<img src=\"https://aecpm.alicdn.com/tps/i4/TB1LbUcGFXXXXc3XXXXvKyzTVXX-520-280.jpg\"alt=\"\">
</body>
< >
//contains(text)作用:找到指定的元素包含有指定文本内容的元素(这里面指的是包含不是等于)
/* $(function(){
var $div=$(\"div:contains(我是div)\");
console.log($div);
}); */
//empty作用:找到既没有子元素也没有文本内容的指定元素
/* $(function(){
var $div=$(\"div:empty\");
console.log($div);
}); */
//has(selector)作用:找到包含指定子元素的元素
/* $(function(){
$div=$(\"div:has(\'span\')\");
console.log($div);
}); */
//parent作用:找到有子元素或者有文本内容的指定元素
/* $(function(){
var $div=$(\"div:parent\");
console.log($div);
}); */
</ >
</html>
<!DOCTYPE html>
<html>
<head>
< charset=\"utf-8\" />
< >DEMO</ >
< src=\"js/jquery.min.js\"></ >
<style>
div{
height:50px;
width:150px;
background-color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<span class=\"span1\" name=\"it666\"></span>
<span class=\"span2\" name=\"it\"></span>
</body>
< >
// attr()获取或者设置属性节点的值,如果传递一个参数的时候就是获取元素的值,当传递两个参数的时候就是修改属性节点的值
// 无论找到多少个元素他都只会返回第一个元素
/* $(function(){
console.log($(\"span\").attr(\"class\"));
}); */
/* 当使用attr来设置属性节点的值时,会设置所有找到元素的属性节点的值，如果设置的属性节点不存在，那就会新增一个属性节点
$(function(){
$(\"span\").attr(\"class\",\"box\");
}); */
// removeattr(name)用于删除属性节点的值,会删除所有找到属性元素中的属性节点的值,要是想同时删除多个属性节点那就在节点名称后用空格隔开就好
$(function(){
$(\"span\").removeAttr(\"class name\");
});
</ >
</html>
<!DOCTYPE html>
<html>
<head>
< charset=\"utf-8\" />
< >DEMO</ >
< src=\"js/jquery.min.js\"></ >
</head>
<body>
<input type=\"text\">
<button>切换图片</button><br>
<img src=\"https://www.baidu.com/img/baidu_jgylogo3.gif\" alt=\"\">
</body>
< >
$(function(){
var btn=document.getElementsByTagName(\"button\")[0];
btn. =function(){
// 获取文本框的输入的内容
var input=document.getElementsByTagName(\"input\")[0];
var text=input.value;
// 修改img中str属性节点的值
// $(\"img\").attr(\"src\",text);
// 在这里由于返回值不是true和false所以应该使用attr
$(\"img\").prop(\"src\",text);
}
});
</ >
</html>
<!DOCTYPE html>
<html>
<head>
< charset=\"utf-8\" />
< >DEMO</ >
< src=\"js/jquery.min.js\"></ >
<style>
*{
margin: 0;
padding: 0;
}
.class1{
width: 50px;
height: 50px;
background: red;
}
.class2{
border: 5px solid green;
}
</style>
</head>
<body>
<button>添加</button>
<button>删除</button>
<button>切换</button>
<div></div>
</body>
< >
$(function(){
var btn=document.getElementsByTagName(\"button\");
// 添加一个类.addClass如果要添加多个类的话就用空格隔开
btn[0]. =function(){
$(\"div\").addClass(\"class1 class2\");
}
// 删除一个类.removeClass如果要删除多个类的话就用空格隔开
btn[1]. =function(){
$(\"div\").removeClass(\"class1 class2\");
}
// 切换类的话toggleClass如果元素中有该类就删除,没有就添加
btn[2]. =function(){
$(\"div\").toggleClass(\"class1 class2\");
}
});
</ >
</html>
<!DOCTYPE html>
<html>
<head>
< charset=\"utf-8\" />
< >DEMO</ >
< src=\"js/jquery.min.js\"></ >
<style>
*{
margin: 0;
padding: 0;
}
div{
width:100px;
height: 100px;
border: 2px solid red;
}
</style>
</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>
< >
$(function(){
var btn=document.getElementsByTagName(\"button\");
// 设置HTMl内容和获取HTML内容,设置里面有内容,获取()里面没有内容
btn[0]. =function(){
$(\"div\").html(\"<p>这是一个段落<span>这是一个span</span></p>\");
}
btn[1]. =function(){
console.log($(\"div\").html());
}
// 设置和获取文本内容
btn[2]. =function(){
$(\"div\").text(\"<p>这是一个段落<span>这是一个span</span></p>\");
}
btn[3]. =function(){
console.log($(\"div\").text());
}
// 设置和获取文本框的内容
btn[4]. =function(){
$(\"input\").val(\"请输入内容\");
}
btn[5]. =function(){
console.log($(\"input\").val());
}
});
</ >
</html>
<!DOCTYPE html>
<html>
<head>
< charset=\"utf-8\" />
< >DEMO</ >
< src=\"js/jquery.min.js\"></ >
</head>
<body>
<div></div>
</body>
< >
$(function(){
// 设置CSS样式的三种方法,
/* $(\"div\").css(\"width\",\"100px\");
$(\"div\").css(\"height\",\"100px\");
$(\"div\").css(\"background\",\"red\");
*/
// $(\"div\").css(\"width\",\"100px\").css(\"height\",\"100px\").css(\"background\",\"red\");
$(\"div\").css({
width:\"100px\",
height:\"150px\",
background:\"blue\"
});
// 获取css样式中的属性
console.log($(\"div\").css(\"background\"));
});
</ >
</html>
继续阅读与本文标签相同的文章
-
千元机vivo Z5性能测试，妹子足够用
2026-05-18栏目： 教程
-
【从入门到放弃-ZooKeeper】ZooKeeper入门
2026-05-18栏目： 教程
-
105道BAT最新Java面试题（MySQL+Redis+nginx+ookeeper+MongoDB）
2026-05-18栏目： 教程
-
增值税发票管理系统2.0版即将上线啦
2026-05-18栏目： 教程
-
楼上请让路 RoarCTF2019 writeup
2026-05-18栏目： 教程