$()的四种类型参数的应用场景实例演示;以及jq转js的方法
16lz
2021-04-28
$()的四种类型参数
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>
jquery的增删改查的方法
1.增加元素
- append(),prepend(),after(),before(),insertBefore（）,insertAfter(),appendTo()，prependTo()
- 删除元素
- remove()
3.修改替换元素 - replaceWith(),replaceAll()
4.查找元素
-$()不同之处
- append(),prepend()在父元素上调用，表示在尾部.头部添加子元素
- appendTo()，prependTo()在子元素上调用，表示在尾.头部添加子元素
- after(),before()在任意指定的位置添加元素
- insertAfter(),insertBefore()不是添加子元素，而是添加兄弟节点.
5.replaceAll:新节点操作,replaceWith()原来的元素上的操作<!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>
jquer转为js的原因
- 因为jquery的局限性，很多时候需要将其转化为js。$()返回的是一个jquery集合，但是集合中的每一个是一个js对象，不能使用jquery的方法来为集合中的子元素设置属性。
实例演示：
<!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>
jquery attr()用法
- attr():获取元素的属性值
- attr(name):一个值代表获取
- attr(name,value):两个值代表获取并且重新设置
- removeAttr(name):删除属性
更多相关文章
- 一篇文章带你初步了解—CSS特指度
- css详解position五种属性用法及其含义
- css盒模型以及如何计算盒子的宽度
- 今天聊点干货—关于CSS样式来源
- 记录一次体体现前端工具仔综合实力的实际操作
- 有趣的css—隐藏元素的7种思路
- 210406 类数组 获取遍历DOM元素 向元素添加文本 获取元素的自定
- PHP第一课
- CSS的基本语法/选择器优先级/实例演示前端组件样式模块化原理与