Java-1116

news/2025/2/12 11:05:45/

JQuery基础

  1. 概念：一个javaScript框架，简化js开发。

  2. 快速入门：

    1. 步骤：

      1. 下载jQuery

        1. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

      2. JQuery文件里面，js文件和min.js文件区别：

        1. xxx.js : 开发版本。给程序员看的，有良好的缩紧
        2. xxx.min.js：生产版本。程序中使用，没有缩紧，体积小一下。程序加载更快

      3. 导入文件：导入min.js文件

      4. 使用JQuery：

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

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

  4. 基本语法学习

    1. 事件绑定：

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

    2. 入口函数：

      // 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())可以定义多次*/

    3. 样式：

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

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

    1. 基本选择器：

      1. 标签选择器（元素选择器）

        1. 语法：$(“html标签名”) 获得所有匹配标签名称的元素

      2. id选择器

        1. 语法：$(“#id的属性值”) 获得与指定id属性值匹配的元素

      3. 类选择器

        1. 语法：$(“.class的属性值”) 获得与指定的class属性值匹配元素

      4. 并集选择器

        1. 语法：$(“选择器1,选择器2”) 获得多个选择器选中的所有元素

        2. //	例子
$("span,#two").css("background-color","pink")

    2. 层级选择器：

      1. 后代选择器（包括所有后代，子元素、孙元素、曾孙元素）
        1. 语法：$(“A B”) 选择A元素内部的所有B元素
      2. 子选择器（仅仅包括子元素，不包括孙元素以及更小的元素）
        1. 语法：$(“A > B”) 选择A元素内部的所有B子元素

    3. 属性选择器

      1. 属性名称选择器

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

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

      2. 属性选择器

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

        2. //	选择有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")

      3. 复合属性选择器

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

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

    4. 过滤选择器

      1. 首元素选择器：

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

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

      2. 尾元素选择器：

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

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

      3. 非元素选择器：

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

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

      4. 偶数选择器：

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

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

      5. 奇数选择器：

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

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

      6. 等于索引选择器：

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

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

      7. 大于索引选择器：

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

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

      8. 小于索引选择器：

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

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

      9. 标题选择器：

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

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

    5. 表单过滤选择器

      1. 可用元素选择器

        1. 语法：enabled 获得可用元素

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

      2. 不可用元素选择器

        1. 语法：disabled 获得不可用元素

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

      3. 选中选择器

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

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

      4. 选中选择器

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

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

  6. DOM操作

    1. 内容操作：

      1. html( ):获取/设置元素的标签体内容

        1. //	获取
var html = $("#mydiv").html()
//	设置
$("#mydiv").html("aaa")

      2. text( ) :获取/设置元素的标签体纯文本内容

        1. //	获取
var text = $("#mydiv").text()
//	设置
$("#mydiv").text("bbb")

      3. val( )：获取/设置元素的value属性值

        1. //	获取值
var value = $("#myinput").val()
//	设置值
$("#myinput").val("李四")

    2. 属性操作：

      1. 通用属性操作：

        1. attr() : 获取/设置元素的属性

          1. //	获取北京节点的name属性值，
var name = $("#bj").attr("name")
//	设置值和新增值
$("#hz").attr("name","hangzhou")

        2. removeAttr()：删除属性

          1. $("hz").removeAttr("name")

        3. prop( )：获取/设置元素属性值

          1. var checked = $("#hobby").prop("checked")

        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")

      3. 增删改查操作：

        1. append():父元素将子元素追加到末尾
          1. 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾
        2. prepend():父元素将子元素追加到开头
          1. 对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头

http://www.ppmy.cn/news/409630.html

相关文章

很开心，我的 NOKIA 1116。

很开心，我的 NOKIA 1116。

阅读更多...
解决you-get下载速度慢 B站 bilibili

解决you-get下载速度慢 B站 bilibili

安装you-get 安装FFmpeg后速度飞快 参考 https://blog.csdn.net/weixin_42438100/article/details/113177928 https://jingyan.baidu.com/article/3c48dd3473177da00ae3587f.html
阅读更多...
B站访问慢的原因

B站访问慢的原因

1. 原因 因为 勾选了 使用下面的 DNS 服务器地址 2. 解决方法 选择 自动获得 DNS 服务器地址, 并 确定
阅读更多...
撸了一个高仿 B站！

撸了一个高仿 B站！

推荐一款开源的高仿 B站 移动端&#xff0c;该项目可以用于 React 技术栈的学习项目。前端使用的核心技术栈基于 React&#xff0c;后端服务使用 Express。 开源地址&#xff1a;https://github.com/dxx/react-bilibili 系统截屏 系统功能包括首页&#xff0c;信息流&#xff0…
阅读更多...
bilibili外链链接到网页

bilibili外链链接到网页

获取Bilibili视频直链并挂载至网站 - 腾讯云开发者社区-腾讯云 (tencent.com) 注意src后面的链接手动添加"https:" <iframe class"iframe_video" src"https://player.bilibili.com/player.html?aid455956933&cid199198887&page1" …
阅读更多...
bilibili视频av号的查找

bilibili视频av号的查找

今天找了一个爬b站评论的代码&#xff0c;代码涉及到av号&#xff0c;我去b站视频底下翻了翻&#xff0c;发现原来的av号已经被改成了bv号。 下面就讲一个特别简单的找bv号的方法。 准备&#xff1a;网页版哔哩哔哩、眼睛、手&#xff08;甚至不用脑子&#xff09;。 第一步…
阅读更多...
网站引入b站视频的方法

网站引入b站视频的方法

当我们做网站时需要引入B站视频&#xff0c;该怎么办呢&#xff0c;其实B站已经给我们提供了引入代码&#xff0c;把下方代码中的地址替换成你想要引入的视频地址即可 <fieldset><iframe src"//player.bilibili.com/player.html?aid753941281&bvidBV1Zk4y12…
阅读更多...
爬取B站多P视频

爬取B站多P视频

import requests from parsel import Selector import json, os, timeclass GetBv():def __init__(self, bvid, page1):bvid:视频号 eg:BV1hE411N7q2&#xff0c;strpage: P几的视频&#xff0c;默认为1 intself.bvid bvidself.page pageself.pg_dic, self.file_name, self.a…
阅读更多...
最新文章

Copyright @ 2022~2023