经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
详解jquery方法属性
来源:jb51  时间:2021/11/9 17:51:37  对本文有异议

1.jquery简介

jquery是什么,作用是什么?

  • jquery用来简化js操作DOM元素
  • jquery不能用DOM的方法,DOM不能用jquery的方法

各种选择器的使用特征:

基本选择器5种:$(".#*,空格");

关系选择器4种:$(“空格>+~”)

基本过滤选择器8种:$(":first/:last/:even/:odd/eq(index)/:gt(index)/:lt(index)/:not(selector)")

内容过滤选择器4种:$(":contains(text)/:empty/:has(selector)/:parent")

可见性过滤选择器2种:$(":hidden/:visible")

属性选择器8种: ( " = = [ a t t r i b u t e ] [ a t t r i b u t e = v a l u e ] [ a t t r i b u t e ! = v a l u e ] [ a t t r i b u t e = v a l u e ] [ a t t r i b u t e ("==[attribute][attribute=value][attribute!=value][attribute^=value]、[attribute ("==[attribute][attribute=value][attribute!=value][attribute=value][attribute=value][attribute*=value][attributeFilter1][attrbuteFilter2]==")

子元素过滤选择器(4种)$(":nth-child(index/even/odd):first-child:last-child:only-child")

表单属性过滤选择器(4种)${":enabled/:disabled/:checked/:selected"}

表单选择器(11种)$(":input/:text/:password/:radio/:checkbox/:submit/:image/:reset/:button/:file/:hidden")

2.jquery选择器

2.1基本选择器5种

  1. // 基本选择器5种
  2. $(".div");//类选择器
  3. $("div");//标签选择器
  4. $("#box");//id选择器
  5. $("*");//通配符选择器
  6. $("div,p,img");//合并选择器

2.2 关系选择器4种

  1. //关系选择器4种
  2. $("div p");//后代选择器
  3. $("div>p");//子代选择器
  4. $("div+p");//直接兄弟选择器
  5. $("div~p");//简洁兄弟选择器

2.3基本过滤选择器8种

  1. // 基本过滤选择器8种
  2. $(":first");//第一个元素
  3. $(":last");//最后一个元素
  4. $(":not(selector)");//把selector排除在外
  5. $(":even");//挑选偶数行
  6. $(":odd");//挑选奇数行
  7. $(":eq(index)");//下标等于index的元素
  8. $(":gt(index)");//下标大于index的元素
  9. $(":lt(index)");//下标小于index的元素

2.4内容过滤选择器4种

  1. // 内容过滤选择器4种
  2. $(":contains(text)");//匹配包含给定文本的元素
  3. $(":empty");//匹配所有不包含子元素或文本的空元素
  4. $(":has(selector)");//匹配含有选择器所匹配的元素
  5. $(":parent");//匹配含有子元素或者文本的元素

2.5可见性过滤选择器2种

  1. // 可见性过滤选择器2种
  2. $(":hidden");//匹配所有不可见元素,或type为hidden元素
  3. $(":visible");//p匹配所有的可见元素

2.6属性过滤选择器8种

  1. // 属性过滤选择器8种
  2. $("[attribute]");//匹配具有attribute属性的元素
  3. $("[attribute=value]");//匹配属性值等于value的元素
  4. $("[attribute!=value]");//匹配属性值不等于value的元素
  5. $("[attribute^=value]");//匹配属性值以某些值开始的元素
  6. $("[attribute$=value]");//匹配属性值某些值结尾的元素
  7. $("[attribute*=value]");//匹配属性值以包含某些值的元素
  8. $("[attributeFilter1][attrbuteFilter2]");//复合属性过滤选择器,需要同时满足多个条件时使用

2.7子元素过滤选择器(4种)

  1. //子元素过滤选择器(4种)
  2. $(":nth-child(index/even/odd)")//选取每个父元素下的第index个子元素
  3. $(":first-child");//选取每个父元素的第一个子元素
  4. $(":last-child");//选取每个父元素的最后一个子元素
  5. $(":only-child");//如果某个元素是它父元素中唯一的子元素子元素,那么将会被匹配

2.8表单属性过滤选择器(4种)

  1. //表单属性过滤选择器(4种)
  2. $(":enabled");//选取所有可用元素
  3. $(":disabled");//选取所有不可用元素
  4. $(":checked");//选取所有被选中的元素
  5. $(":selected");//选取所有被选中的元素

2.9表单选择器(11种)

  1. // 表单选择器(11种)
  2. $(":input");//选择所有input/textarrea/select/button元素
  3. $(":text");//选取所有的单行文本框
  4. $(":password");//选取所有的密码框
  5. $(":radio");//选取所有的单选框
  6. $(":checkbox");//选取所有的复选框
  7. $(":submit");//选取所有的提交按钮
  8. $(":image");//选取所有的图像按钮
  9. $(":reset");//选取所有的重置按钮
  10. $(":button");//选取所有的按钮
  11. $(":file");//选取所有的上传域
  12. $(":hidden");//选取所有不可见的元素

3.jQuery中的DOM操作

3.1文本操作

  1. // 文本操作
  2. $("p").html();//相当于DOM中p.innerHtml;
  3. $("p").text();//相当于DOM中p.innerText;

3.2值操作

  1. // 值操作
  2. $("input:eq(5)").val();//相当于DOM中input.value;
  3. $("input:eq(6)").val("aaa");//设置属性值

3.3属性操作

  1. // 属性操作
  2. $("#box").attr('name');//获取name属性
  3. $("#box").attr('name',"aaa");//添加name属性和值
  4. $("#box").removeAttr('name');//删除name属性
  5. $("#box").prop('checked');//获取单属性时,用prop获取的是false和true

3.4类操作

  1. // 类操作
  2. $("#box").attr("class","");//获取和设置
  3. $("#box").addClass("class","");//追加类名
  4. $("#box").removeClass("class","");//移除类名
  5. $("#box").removeClass();//移除所有类名
  6. $("#box").toggleClass("main");//切换main类名
  7. $("#box").hasClass("main");//是否有某个类名

3.5样式操作

  1. //样式操作
  2. $("#box").css("color");//读取css样式值
  3. $("#box").css({"propertyname":"value","propertyname":"value"});//同时设置多个样式

4.节点操作

4.1遍历节点

  1. //遍历节点
  2. $("#box").children();//获取子节点
  3. $("#box").children("div");//获取div子节点
  4. $("#box").prev();//找到上面紧邻的一个兄弟
  5. $("#box").prevAll();//找到上面紧邻的所有兄弟
  6. $("#box").prevAll("div");//找到上面紧邻的所有div兄弟
  7. $("#box").next();//找到下面紧邻的一个兄弟
  8. $("#box").nextAll();//找到下面紧邻的所有兄弟
  9. $("#box").nextAll("div");//找到下面紧邻的所有div兄弟
  10. $("#box").parent();//找到父节点

4.2过滤节点

  1. //过滤节点
  2. $("ul").find(".a");//查找
  3. $("ul li").filter(".a");//过滤

4.3创建、插入、删除

  1. // 创建、插入、删除
  2. var lis=$("<li title='aaa'>aaa</li>");//创建
  3. //内部添加
  4. parent.append(lis);//在父盒子尾部添加
  5. parent.prepend(lis);//在父盒子头部添加
  6. // 外部添加
  7. box.after(lis);//在box后面加
  8. box.before(lis);//在box前面加
  9. //删除DOM元素
  10. $("ul").remove();//完全删除,ul,li都删除
  11. $("ul").empty();//只是清空ul的内容,ul还存在
  12. $("li").remove(".one");//删除li中class="one"的

5.jquery事件

  1. // jquery事件
  2. // 与js的区别
  3. // window.onload与$(document).ready()
  4. //区别一:前者页面完全加载后执行,后者在DOM完成加载后就执行,后者优先前者执行
  5. //区别二:前者多次出现时,最后的会覆盖前面的,后者多次出现时,他们会合并
  6. //区别三:有无简写:window没有简写,document有简写
  7. //简写:$().ready(function(){...})
  8. // $(function(){....})
  9. //事件绑定:$(selector).on(事件类型,回调函数)
  10. $("ul li").on("click",function(){alert(1);});
  11. // jquery 和 ajax
  12. // get方法
  13. $.get(url,data,success(response,status,xhr),dataType);
  14. // post方法
  15. $.post(url,data,success(data, textStatus, jqXHR),dataType);

image-20211030195950325

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注w3xue的更多内容!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号