JQuery学习（一）

迷南。 2024-04-17 06:03 62阅读 0赞

# 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 ###

### 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(){
    
    })

//方式二 
    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（）