JQuery学习（一）

最新推荐文章于 2022-05-13 20:34:50 发布

飞翔的山药蛋子

最新推荐文章于 2022-05-13 20:34:50 发布

阅读量140

点赞数

分类专栏： java晋升之路

本文链接：https://blog.csdn.net/luodong1501/article/details/100069311

版权

java晋升之路专栏收录该内容

28 篇文章 2 订阅

订阅专栏

jQuery

他是一个javaScript的框架，简化js的开发

优化了html操作（dmo）

原始的操作

<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>
</body>

<script>
    var div1 =  document.getElementById("div1");
    var div2 =  document.getElementById("div2");
    alter(div1.innerHtml)
    alter(div2.innerHtml)
</script>

代码有重复，提取公共的方法，

<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>
</body>

<script>
    var div1 =  $("div1");
    var div2 =  $("div2");
    alter(div1.innerHtml)
    alter(div2.innerHtml)
    
    
</script>

function.js文件

function $(id){
    var obj = Documnet.getElementById(id);
    return obj;
}

javaScript框架：本质就是一些js的文件，知识对其js的原生代码进行封装而已

1.js的快速入门

1.下载JQuery

2.导入JQuery

<script src="../js/vendor/jquery-3.4.1.min.js"></script>

3.使用

let div1 = $("#div1");
alert(div1.html())

2.Jquery和js对象区别转化

jq和js方法不可互相调用

需要进行互相转化

js--->jq $(js对象)

jq--->js

3.选择器

筛选具有相似特征的元素（标签）获取元素对象，进行控制对象

基本语法：

1.事件绑定

<div>
  <input type="button" value="点我" id="btn1">
</div>
<script>
  $("#btn1").click(function () {
      alert("abc")
  })
</script>

2.入口函数

$(function(){

})

  <script>
    $(function () {
        $("#btn1").click(function () {
            alert("abc");
        })
    })
  </script>

//方式二 
window.onload = function () {
       $("#btn1").click(function () {
           alert("abc");
       });
   }

window.onload 和$(function(){ }) 的区别

3.样式控制

获取对象，调用css方法，

分类

1.基本选择器

1.标签选择器

$("html标签名称") $("div")

2.id选择器

$("#id的属性值")

3.类选择器

$(".class的属性值")

4.并集选择器

$("选择器1，选择器2")

2.层级选择器

1.后代选择器

$("A B") 中间用空格隔开，儿子，孙子都选择

2.子选择器

$("A>B") 不包含孙子辈

3.属性选择器

1.属性名称选择器

   $(function () {
        $("dtn1").click(function () {
            $("div[title]").css("backgroundColor","pink")
            //选择div标签中含有title属性的 
        })
    })

2.属性选择器

 $(function () {
    $("dtn1").click(function () {
        $("div[title='test']").css("backgroundColor","pink")
        //选择div标签中含有title属性的 ,并且 title的值为test
        $("div[title!='test']").css("backgroundColor","pink")
        $("div[title^='test']").css("backgroundColor","pink")  //开头
        $("div[title$='st']").css("backgroundColor","pink")  //结尾
        $("div[title*='es']").css("backgroundColor","pink")  //包含
        $("div[title='test']").css("backgroundColor","pink")
    })
})

3.复合属性选择器

  $(function () {
        $("dtn1").click(function () {
            $("div[id][title*='es']").css("backgroundColor","pink")
            //属性有id，有title 并且title值包含es
        })
    })

4. 过滤选择器

1.首元素选择器

$(function () {
    $("btn1").click(function () {
        $("div:first").css("backgroundColor","pink")
    })
})

//修改div第一个

2.尾元素选择器


$(function () {
    $("btn1").click(function () {
        $("div:last").css("backgroundColor","pink")
    })
})
//修改div 最后一个

3.非元素选择器


$(function () {
    $("btn1").click(function () {
        $("div:not(.one)").css("backgroundColor","pink")
    })
})
//修改div中 class 不是one 的

4.偶数选择器


$(function () {
    $("btn1").click(function () {
        $("div:even").css("backgroundColor","pink")
    })
})
//修改div索引值为偶数的   从0开始

5.奇数选择器

$(function () {
    $("btn1").click(function () {
        $("div:odd").css("backgroundColor","pink")
    })
})
//修改div索引值为奇数的   从0开始

6.大于索引选择器

$(function () {
    $("btn1").click(function () {
        $("div:gt(3)").css("backgroundColor","pink")
    })
})
//div索引大于3

7.等于索引选择器

$(function () {
    $("btn1").click(function () {
        $("div:eq(3)").css("backgroundColor","pink")
    })
})
//div索引等于3

8.小于索引选择器

$(function () {
    $("btn1").click(function () {
        $("div:lt(3)").css("backgroundColor","pink")
    })
})
//div索引小于3

9.标题选择器

$(function () {
    $("btn1").click(function () {
        $(":header").css("backgroundColor","pink")
    })
})
//div索引小于3

5.表单过滤选择器

1.可用元素选择器

$(function () {
    $("input").click(function () {
        $("imput[type='text']:enabled").val("aaa");
    });
})
//修改inoput标签中type为text，并且可用的值为  aaa

2.不可用元素选择器

$(function () {
    $("input").click(function () {
        $("imput[type='text']:disabled").val("aaa");
    });
})
//修改inoput标签中type为text，并且不可用的值为  aaa

3.选中选择器

$(function () {
    $("input").click(function () {
      alter( $("imput[type='checkbox']:checked").length) ;
    });
})
//选中的

4.选中选择器（下拉）

$(function () {
    $("input").click(function () {
      alter( $("select>option:selected").length) ;
    });
})
//选中的

4.DOM操作

1.内容操作

1.html( )

获取/设置元素的标签内容

2.text( )

获取/设置元素标签纯文本的内容

3.val( )

获取/设置元素的value属性值

 <input id="myinput" type="text" name="username" value="张三" />
  <div id="mydiv">
    <p><a href="#" >标题</a> </p>
  </div>
 </div>

<script>
 $(function () {
      var value = $("#myinput").val();
     
     var html = $("#mydiv").html();
     
     var text = $("#mydiv").text();
  })
    
</script>

2.属性操作

1.通用属性

1. attr（）

获取/设置元素的属性

2.removeAttr（）

删除属性

3.prop（）

获取/设置元素的属性

4.removeProp（）

删除属性

2.对class属性操作

1. addClass（）

添加class

2.removeClass（）

删除calss

3.toggleClass（）

切换class

3.CRUD操作

飞翔的山药蛋子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习（一）

jQuery他是一个javaScript的框架，简化js的开发优化了html操作（dmo）原始的操作<body> <div id="div1">div1...</div> <div id="div2">div2...</div></body><script> var...
复制链接

扫一扫

专栏目录