文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

jquery方法的属性是什么

2023-06-25 13:54

关注

这期内容当中小编将会给大家带来有关jquery方法的属性是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

1.jquery简介

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种

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

2.2 关系选择器4种

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

2.3基本过滤选择器8种

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

2.4内容过滤选择器4种

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

2.5可见性过滤选择器2种

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

2.6属性过滤选择器8种

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

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

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

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

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

2.9表单选择器(11种)

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

3.jQuery中的DOM操作

3.1文本操作

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

3.2值操作

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

3.3属性操作

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

3.4类操作

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

3.5样式操作

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

4.节点操作

4.1遍历节点

 //遍历节点        $("#box").children();//获取子节点        $("#box").children("div");//获取div子节点        $("#box").prev();//找到上面紧邻的一个兄弟        $("#box").prevAll();//找到上面紧邻的所有兄弟        $("#box").prevAll("div");//找到上面紧邻的所有div兄弟        $("#box").next();//找到下面紧邻的一个兄弟        $("#box").nextAll();//找到下面紧邻的所有兄弟        $("#box").nextAll("div");//找到下面紧邻的所有div兄弟        $("#box").parent();//找到父节点

4.2过滤节点

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

4.3创建、插入、删除

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

5.jquery事件

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

jquery方法的属性是什么

上述就是小编为大家分享的jquery方法的属性是什么了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯