Java-1116

JQuery基础

概念：一个javaScript框架，简化js开发。
快速入门：
1. 步骤：
  1. 下载jQuery
    1. ```
    <script src="https://code.jquery.com/jquery-3.3.1.min.js">script>
    1
```
2. JQuery文件里面，js文件和min.js文件区别：
  1. xxx.js : 开发版本。给程序员看的，有良好的缩紧
  2. xxx.min.js：生产版本。程序中使用，没有缩紧，体积小一下。程序加载更快
3. 导入文件：导入min.js文件
4. 使用JQuery：
```
  var div1 = $("#div1");
  alert(div1.html());
  1
  2
```

JQuer对象和JS对象区别与转换

// 1.通过js方式获取名称叫div的所有html对象
   var divs = document.getElementsByTagName("div")
   alert(divs)  // 可以当作数组来使用
   //   对divs中所有div 让其标签体内容变为"aaa"
   for(var i = 0; i < divs.length;i++){
       divs[i].innerHTML = "aaa"
   }
   

   // 2.jq方式获取
   var $divs = $("div");  // 也可以当作数组使用
    alert($divs)
   //   对divs中所有div 让其标签体内容变为"bbb"
   $divs.html("bbb");
1
2
3
4
5
6
7
8
9
10
11
12
13
14

结论：
1. JQuery对象操作更简单，
2. JQ和JS对象方法不通用
3. 两者需要相互转换
JS对象转JQ对象： $(js对象)
JQ对象转JS对象：jq对象[索引] 或者 jq对象.get(索引) 索引是因为$(“div”)获取的是数组

基本语法学习

事件绑定：

 //	入口函数 jquery操作的事件绑定
 $("#b1").click(function (){
      //  给b1添加事件
       lert("abc")
  })
1
2
3
4
5

入口函数：

// dom 入口函数
        window.onload = function (){
            $("#b1").click(function (){
                //  给b1添加事件
                alert("abc")
            })
        }

        //  jquery的入口函数（dom文档加载完成之后执行该函数中的代码）
        $(function (){
            $("#b1").click(function (){
                         //  给b1添加事件
                         alert("abc")
                     })
       })
/**
  * window.onload 和 $(function(){})区别
  * window.onload只能定义一次，因为其本质是一个函数对象，再次定义等于再次赋值，会覆盖之前
  * $(function())可以定义多次
  */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

样式：

$(function (){
    $("#div1").css("background-color","red")
    $("#div2").css("backgroundColor","pink")
})
1
2
3
4

选择器：筛选具有相似特征的元素（标签）

基本选择器：
1. 标签选择器（元素选择器）
  1. 语法：$(“html标签名”) 获得所有匹配标签名称的元素
2. id选择器
  1. 语法：$(“#id的属性值”) 获得与指定id属性值匹配的元素
3. 类选择器
  1. 语法：$(“.class的属性值”) 获得与指定的class属性值匹配元素
4. 并集选择器
  1. 语法：$(“选择器1,选择器2”) 获得多个选择器选中的所有元素
  2. ```
  //	例子
  $("span,#two").css("background-color","pink")
  1
  2
```
层级选择器：
1. 后代选择器（包括所有后代，子元素、孙元素、曾孙元素）
  1. 语法：$(“A B”) 选择A元素内部的所有B元素
2. 子选择器（仅仅包括子元素，不包括孙元素以及更小的元素）
  1. 语法：$(“A > B”) 选择A元素内部的所有B子元素

属性选择器

属性名称选择器

语法：$(“A[属性名]”) 包含指定属性的选择器

// 	选择有title属性的div元素背景设为粉红
$("div[title]").css("background-color","pink")
1
2

属性选择器

语法：$(“A[属性名=‘‘值’’]”) 包含指定属性等于指定值的选择器

//	选择有title属性并且值等于test的div背景设置为粉红
$("div[title = 'test']").css("background-color","pink")

//	选择没有title属性或者值不等于test的div元素背景设置为粉红
$("div[title != 'test'][]").css("background-color","pink")

//	选择title属性值以te开始的div元素背景设置为粉红
$("div[title ^= 'te']").css("background-color","pink")

//	选择title属性值以est结束的div元素背景设置为粉红
$("div[title $= 'est']").css("background-color","pink")

//	选择title属性值包含es值的div元素背景设置为粉红
$("div[title *= 'es']").css("background-color","pink")
1
2
3
4
5
6
7
8
9
10
11
12
13
14

复合属性选择器

语法：$(“A[属性名=‘值’] [ ]…”)包含多个属性条件的选择器

//	选取有属性id，并且属性值title值含有es的div元素背景设置为粉红
$("div[id][title*='es']").css("background-color","pink")
1
2

过滤选择器

首元素选择器：

语法：A:first 获得选择的元素中的第一个元素

//	改变第一个div的背景色为粉红
$("div:first").css("background-color","pink")
1
2

尾元素选择器：

语法：A:last 获得选择的元素中的最后一个

//	改变最后一个div的背景色为粉红
$("div:last").css("background-color","pink")
1
2

非元素选择器：

语法：A:not（selector）不包括指定内容的元素

//	改变class不为one的div的背景色为粉红
$("div:not(.one)").css("background-color","pink")
1
2

偶数选择器：

语法：A:even 偶数，从0 开始计数

//	改变索引值为偶数的div元素背景色为粉红
$("div:even").css("background-color","pink")
1
2

奇数选择器：

语法：A:odd 奇数，从0开始计数

//	改变索引值为奇数数的div元素背景色为粉红
$("div:odd").css("background-color","pink")
1
2

等于索引选择器：

语法： A:eq(index) ，指定索引元素

//	改变索引值等于3 的元素背景色为粉红
$("div:eq(3)").css("background-color","pink")
1
2

大于索引选择器：

语法：A:gt(index)，大于指定索引元素

//	改变索引值等于3 的元素背景色为粉红
$("div:gt(3)").css("background-color","pink")	
1
2

小于索引选择器：

语法：A:lt(index) , 小于指定索引的元素

//	改变索引值等于3 的元素背景色为粉红
$("div:lt(3)").css("background-color","pink")
1
2

标题选择器：

语法： :header 获得标题元素，固定写法

//	改变所有标题元素背景色为粉红色
$(":header").css("background-color","pink")
1
2

表单过滤选择器

可用元素选择器

语法：enabled 获得可用元素

//	利用JQuery对象的val（）方法改变表单内可用的元素值
$("input[type=text]:enabled").val("aaa")
1
2

不可用元素选择器

语法：disabled 获得不可用元素

//	利用JQuery对象的val（）方法改变表单内不可用的元素值
$("input[type=text]:disabled").val("aaa")
1
2

选中选择器

语法：checked 获得单选/复选框选中的元素

//	利用JQuery对象的length()获取复选框选中的个数
$("input[typr=checkbox]:checked").length()
1
2

选中选择器

语法：selected 获得下拉框选中的元素

//	利用JQuery对象的length()获取下拉框选中的个数
$("select > option:selected").length
//	注意：这里不是获取下拉列表的选中个数，而是获取其子元素option的选中个数
1
2
3

DOM操作
1. 内容操作：
  1. html( ):获取/设置元素的标签体内容
    1. ```
    //	获取
    var html = $("#mydiv").html()
    //	设置
    $("#mydiv").html("aaa")
    1
    2
    3
    4
```
2. text( ) :获取/设置元素的标签体纯文本内容
  1. ```
  //	获取
  var text = $("#mydiv").text()
  //	设置
  $("#mydiv").text("bbb")
  1
  2
  3
  4
```
  3. val( )：获取/设置元素的value属性值
    1. ```
    //	获取值
    var value = $("#myinput").val()
    //	设置值
    $("#myinput").val("李四")
    1
    2
    3
    4
```
2. 属性操作：
  1. 通用属性操作：
    1. attr() : 获取/设置元素的属性
      1. // 获取北京节点的name属性值， var name = $("#bj").attr("name") // 设置值和新增值 $("#hz").attr("name","hangzhou")
        1
        2
        3
        4
    2. removeAttr()：删除属性
      1. $("hz").removeAttr("name")
        1
    3. prop( )：获取/设置元素属性值
      1. var checked = $("#hobby").prop("checked")
        1
    4. removeProp( )：删除属性
    5. attr和prop区别：
      1. 如果操作的是元素的固有属性（非自定义属性），则建议使用prop
      2. 如果操作是自定义属性，建议使用attr
  2. 对class类属性操作：
    1. addClass( ) : 添加class属性值
    2. removeClass( ) ：删除class属性值
    3. toggleClass( ) : 切换class属性值
      1. toggleClass(“one”) : 判断如果元素对象上存在class=“one”则将属性值one删除掉。如果元素对象上不存在class等于one则添加。简单说：有就变成没有，没有就变成有。
    4. ```
    //	二者等价	，添加类属性
    $("#one").prop("class","second")
    
    $("#one").addClass("second")
    
    $("#one").removeClass("second")
    
    $("#one").toggleClass("second")
    1
    2
    3
    4
    5
    6
    7
    8
```
3. 增删改查操作：
  1. append():父元素将子元素追加到末尾
    1. 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾
  2. prepend():父元素将子元素追加到开头
    1. 对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头

相关阅读:
冒泡排序代码
 Folium 笔记：MarkerCluster
佳易王会员管理系统软件如何下载，基本功能有哪些
 Dart笔记：stream_channel 包用法
 elementui的table组件如何显示图片
 AI图像合成技术如何用于数字营销和创意领域？
常用编码格式整理
 FPGA-结合协议时序实现UART收发器（一）：UART协议、架构规划、框图
 用户登录和退出，以及访问请求的token校验
 k8s---特殊操作（修改hostname）
原文地址：https://blog.csdn.net/lannister_awalys_pay/article/details/127907771