收藏
天蓬老师批改状态：合格
老师批语：
1.当函数用，创建jquery对象
2.函数也是对象，所以可以当成对象来用可以获取属性值
3.$(“选择器,”上下文”)：获取dom元素,$()将原始的js转化为jquery，简称jquery包装器
4.$(“回调”).dom树一旦创建完成，就会执行这个回调
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jquery</title>//引入jq<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><body><script>//$(html文本):创建dom元素不用想js那样创建dom元素。$("<h1>我是h1</h1>").css("color","green").appendTo("body");</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jquery</title>//引入jq<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><body><script>let fn=(email,name)=>{console.log(this.email);console.log(this.name)};fn.email="amdind@qq.com";fn.name="小米";</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jquery</title>//引入jq<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><body><ul class="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li><li class="item">item6</li><li class="item">item7</li></ul><script>$(".list item").css("background-color","green");</script></body></html>``````html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jquery</title>//引入jq<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><body><p>握手</p><script>$(function(){$("body p").css("background-color","red");});// 箭头函数简化$(()=>($("body").css("background-color","red")));</script></body></html>
1.增加元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><!-- 内联样式 --><style type="text/css">.user{font-size: 1em;color:pink;}</style><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><body><!-- 行内样式 --><h1 class="user">用户界面</h1><p>p</p><div class="form"><form action="php.cn" id="login" name="login" method="post" style="width:100px;"><lable for="email">Email</lable><input type="email" name="email" id="email" value="email" autofocus placeholder="email" /><lable for="password">密码</lable><input type="password" name="password" value="12333" id="password" autofocus /><div><lable for="male">性别</lable>男:<input type="radio" name="male" id="male" value="1" /><lable for="female"></lable>女:<input type="radio" name="female" id="female" value="2" checked /></div><button return false>登陆</button></form></div><script type="text/javascript">//find()是找到指定的元素。$(".form").append("<p>我是添加到表单后面的p元素 </p>").find(":last").addClass("user").css("background","red");$(".form").prepend("<p>我是添加到表单前面的p元素</p>").find(":first").addClass("user").css("background","red");$("<p>我是添加到表单后面的p元素</p>").css("color","red").appendTo($(".form"));$("<p>我是添加到表单前面的p元素</p>").css("color","red").prependTo($(".form"));$("<h1>商品列表</h1>").insertAfter(".form");$("<h3>我是h3</h3>").insertBefore(".form");$(".user").replaceWith("<h2>用户登陆界面</h2>")$("<h2>用户登陆界面w</h2>").replaceAll($(".user"));$(".list .item").remove(".item:nth-of-type(2)");</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jquery</title>//引入jq<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><body><p>握手</p><ul class="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li><li class="item">item6</li><li class="item">item7</li></ul><script type="text/javascript">//如果只想复制一个原有的元素而不希望是移动则用clone()$(".list .item").last().clone().appendTo(".list");$(".list .item").first().clone().prependTo(".list");//remove():在被删除的元素上操作$(".list .item").last().remove();$(".list .item").remove(".item:nth-of-type(2)");//eq(从0开始计数)，next():下一个兄弟节点,prev()前一个兄弟节点。$(".list .item").eq(3).after('<li class="item">new-li</li>').next().css("color","red");$(".list .item").eq(3).before('<li class="item">new-li</li>').prev().css("color","red");</script>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jquery</title>//引入jq<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><body><ul class="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li><li class="item">item6</li><li class="item">item7</li></ul><script type="text/javascript">$(".list .item")[0].style.background="pink";//可以修改第一个li的背景色$(".list .item")[0].css("background-color","red");//无法修改第一个li的背景色// get(参数)方法是jquery的封装方法，参数从0开始计算。$(".list .item").get(0).style.background="red";//为整一个ul设置边框。$(".list")[0].style.border="1px solid";//正确$(".list").style.border="1px solid";//错误用法</script>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
