分类 jquery 下的文章

JQuery页面加载，写入文本，对象转换，隐藏显示，基本选择器，层级选择器，基本过滤选择器，表单选择器，class操作，属性操作

2024-08-21




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 页面加载完成后执行
        $(document).ready(function() {
            // 写入文本到id为"test"的元素
            $("#test").text("Hello, World!");
 
            // 将一个对象转换为JSON字符串
            var obj = { name: "John", age: 31, city: "New York" };
            var jsonString = JSON.stringify(obj);
            $("#json").text(jsonString);
 
            // 点击按钮时隐藏id为"hide"的元素
            $("#hide").click(function() {
                $(this).hide();
            });
 
            // 基本选择器示例
            $("#btn1").click(function() {
                $(".class1").css("color", "red");
            });
 
            // 层级选择器示例
            $("#btn2").click(function() {
                $("div > p").css("color", "blue");
            });
 
            // 基本过滤选择器示例
            $("#btn3").click(function() {
                $("div:first").css("color", "green");
            });
        });
    </script>
</head>
<body>
    <div id="test">测试文本</div>
    <div id="json"></div>
    <button id="hide">隐藏</button>
    <button id="btn1">改变class1的颜色</button>
    <button id="btn2">改变div直接子元素p的颜色</button>
    <button id="btn3">改变第一个div的颜色</button>
    <div>
        <p class="class1">段落1</p>
        <p>段落2</p>
    </div>
    <div>
        <p class="class1">段落3</p>
        <p>段落4</p>
    </div>
</body>
</html>

这段代码展示了如何使用jQuery来完成一些基本的DOM操作，包括页面加载时的文本写入、对象转换为JSON字符串、按钮点击时的元素隐藏、基本选择器、层级选择器和基本过滤选择器的使用。

System

2024-08-21

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery DateTimePicker Example</title>
    <link rel="stylesheet" href="jquery.datetimepicker.css">
    <script src="jquery.js"></script>
    <script src="jquery.datetimepicker.js"></script>
    <script>
        $(function(){
            $('#datetimepicker').datetimepicker({
                format: 'Y-m-d H:i',
                timepicker: true,
                step: 30
            });
        });
    </script>
</head>
<body>
    <input type="text" id="datetimepicker" />
</body>
</html>

这个例子展示了如何在一个HTML页面中集成jQuery DateTimePicker插件。首先，在<head>标签中包含了必要的样式表和JavaScript文件。然后，在<body>中添加了一个<input>元素，并为其指定了一个ID。最后，在页面加载完成后，通过jQuery DateTimePicker的初始化代码来设置日期时间选择器。这个例子设置了日期和时间的格式、启用时间选择功能以及时间的步进为30分钟。

- 阅读更多 -

【前端Vue3】——JQuery知识点总结（超详细）

System

2024-08-21

所有,jquery

在Vue 3中，JQuery通常不推荐使用，因为Vue 3已经将注意力转移到了Composition API上，而JQuery是基于DOM操作的命令式编程范式，与Vue的声明式编程方法有所冲突。

然而，如果你之前的项目依赖于JQuery，并且你需要在Vue 3项目中使用JQuery，你可以按照以下步骤进行：

安装jQuery：




npm install jquery

在Vue组件中引入jQuery并使用：




import { onMounted } from 'vue';
import $ from 'jquery';
 
export default {
  setup() {
    onMounted(() => {
      // 使用jQuery操作DOM
      $('#some-element').hide();
    });
  }
};

请注意，在Vue 3中，建议尽可能避免直接操作DOM，而是使用Vue的响应式系统和模板语法。如果你需要进行DOM操作，请考虑使用Vue的生命周期钩子和Composition API的ref来获取DOM元素的引用。

例如，使用Composition API替代JQuery的隐藏操作：




import { onMounted, ref } from 'vue';
 
export default {
  setup() {
    const someElement = ref(null);
 
    onMounted(() => {
      // 使用Vue的响应式引用来操作元素
      someElement.value.style.display = 'none';
    });
 
    return { someElement };
  }
};

在模板中使用该引用：




<template>
  <div ref="someElement">Some content</div>
</template>

总结，尽管jQuery是历史遗留问题，但在Vue 3中应该尽可能避免使用它，并利用Vue的响应式系统和Composition API来编写更现代、更符合Vue哲学的代码。

- 阅读更多 -

jsp中用jquery给某个input框赋值

System

2024-08-21

所有,jquery

在JSP中使用jQuery给某个input框赋值非常简单。首先确保你已经在JSP中包含了jQuery库。然后，你可以使用jQuery选择器来选中你想要赋值的input元素，并使用val()方法设置它的值。

以下是一个简单的例子：

假设你的input元素在JSP中看起来像这样：




<input type="text" id="myInput" />

你可以使用以下jQuery代码来给这个input赋值：




$(document).ready(function() {
    $('#myInput').val('这是赋给input的值');
});

确保这段jQuery代码在文档加载完毕之后执行，这样可以确保当jQuery尝试选择这个input元素时，它已经存在于DOM中了。

如果你想在某个事件触发时给input赋值，你可以将代码放在事件处理函数中：




$(document).ready(function() {
    $('#someButton').click(function() {
        $('#myInput').val('按钮被点击后赋给input的值');
    });
});

在这个例子中，当id为someButton的按钮被点击时，input框的值会被设置。

- 阅读更多 -

前端主流框架-JQuery

System

2024-08-21

所有,jquery

JQuery是一种快速、简洁的JavaScript库，它简化了HTML文档与JavaScript代码之间的操作和事件处理。它也包含了一些有用的工具，比如AJAX和动画。

以下是一些使用JQuery的常见示例：

选择元素：




$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

在上面的例子中，当用户点击段落（<p>元素）时，JQuery的$(this).hide()方法会隐藏被点击的元素。

创建动画：




$(document).ready(function(){
  $("button").click(function(){
    $("p").animate({height: '100px', width: '200px'});
  });
});

在这个例子中，当用户点击按钮时，JQuery的$("p").animate()方法会使段落的高度和宽度变为100px和200px。

AJAX请求：




$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url: "demo_test.txt", success: function(result){
      $("div").html(result);
    }});
  });
});

在这个例子中，当用户点击按钮时，JQuery的$.ajax()方法会向服务器请求文本文件，并在请求成功后将返回的内容放入<div>元素中。

事件监听：




$(document).ready(function(){
  $("#myId").on("click", function(){
    alert("Element clicked!");
  });
});

在这个例子中，当id为"myId"的元素被点击时，JQuery的.on()方法会触发一个警告框。

属性操作：




$(document).ready(function(){
  $("#myId").attr("href", "http://www.google.com");
});

在这个例子中，JQuery的.attr()方法会将id为"myId"的元素的href属性设置为"http://www.google.com"。

CSS操作：




$(document).ready(function(){
  $("p").css("background-color", "yellow");
});

在这个例子中，JQuery的.css()方法会将所有<p>元素的背景颜色设置为黄色。

注意：虽然JQuery仍然是一种广泛使用的工具，但它并没有被包含在所有现代浏览器中。因此，在使用JQuery之前，你可能需要先引入一个JQuery库。此外，随着JavaScript和前端框架（如React, Vue, Angular）的发展，JQuery的使用已经逐渐减少。

- 阅读更多 -

jQuery实现省、市二级联动

System

2024-08-19

所有,jquery

以下是一个使用jQuery实现省、市二级联动的简单示例。假设我们有两个下拉列表，分别用于选择省份和城市，并且我们有两个JSON对象provinces和cities来分别存储省份和城市的数据。

HTML部分：




<select id="province-select">
  <option value="">选择省份</option>
</select>
 
<select id="city-select">
  <option value="">选择城市</option>
</select>

JavaScript部分（jQuery和JSON数据）：




// 假设的省份和城市数据
var provinces = [
  { name: '广东', cities: ['广州', '深圳', '珠海'] },
  { name: '四川', cities: ['成都', '乐山', '德阳'] }
];
 
var cities = {
  '广东': ['广州', '深圳', '珠海'],
  '四川': ['成都', '乐山', '德阳']
};
 
$(document).ready(function() {
  // 填充省份下拉列表
  for (var i = 0; i < provinces.length; i++) {
    $('#province-select').append($('<option>', {
      value: provinces[i].name,
      text: provinces[i].name
    }));
  }
 
  // 省份下拉列表变化时，更新城市下拉列表
  $('#province-select').change(function() {
    var province = $(this).val();
    var cityOptions = $('#city-select');
    cityOptions.empty(); // 清空城市下拉列表
    cityOptions.append($('<option>', {
      value: '',
      text: '选择城市'
    }));
 
    if (province) {
      cities[province].forEach(function(city) {
        cityOptions.append($('<option>', {
          value: city,
          text: city
        }));
      });
    }
  });
});

这段代码首先在文档加载完成时，将省份数据填充到省份下拉列表中。然后，当省份下拉列表的值发生变化时，会更新城市下拉列表，只显示与选定省份相关的城市。这里使用了JSON对象cities来存储省份到城市列表的映射，这样可以直接通过省份作为键来访问相关的城市数组。

- 阅读更多 -

学习jQuery之旅：构建自己的小型库——LearnQuery

System

2024-08-19

所有,jquery




// 定义LearnQuery构造函数
function LearnQuery(selector) {
    var elements = document.querySelectorAll(selector);
    this.elements = Array.prototype.slice.call(elements);
}
 
// 为LearnQuery对象添加原型方法
LearnQuery.prototype = {
    constructor: LearnQuery,
 
    addClass: function(className) {
        this.elements.forEach(function(element) {
            element.classList.add(className);
        });
        return this;
    },
 
    removeClass: function(className) {
        this.elements.forEach(function(element) {
            element.classList.remove(className);
        });
        return this;
    },
 
    toggleClass: function(className) {
        this.elements.forEach(function(element) {
            element.classList.toggle(className);
        });
        return this;
    },
 
    on: function(event, handler) {
        this.elements.forEach(function(element) {
            element.addEventListener(event, handler);
        });
        return this;
    },
 
    // 更多方法...
};
 
// 使用LearnQuery库
var $q = new LearnQuery('.my-elements');
$q.addClass('active');

这段代码定义了一个简单的LearnQuery库，它模仿了jQuery的一些基本功能。它允许你通过传入一个CSS选择器来选择元素，并提供了添加、删除和切换类的方法，以及事件监听的功能。这个示例展示了如何开始构建自己的轻量级JavaScript库。

- 阅读更多 -

js、jquery获取元素方法总结

System

2024-08-19

所有,jquery

在JavaScript和jQuery中，获取DOM元素可以通过多种方法实现。以下是一些常用的方法：

通过ID获取元素：




var element = document.getElementById('elementId');

或者使用jQuery：




var $element = $('#elementId');

通过类名获取元素：




var elements = document.getElementsByClassName('className');

或者使用jQuery：




var $elements = $('.className');

通过标签名获取元素：




var elements = document.getElementsByTagName('tagName');

或者使用jQuery：




var $elements = $('tagName');

通过CSS选择器获取元素：




var elements = document.querySelectorAll('.className');

或者使用jQuery：




var $elements = $('.className');

通过特定属性获取元素：




var elements = document.querySelectorAll('[attributeName="value"]');

或者使用jQuery：




var $elements = $('[attributeName="value"]');

直接获取body和html元素：




var body = document.body;
var html = document.documentElement;

或者使用jQuery：




var $body = $('body');
var $html = $('html');

通过子元素获取：




var child = parentElement.children[0];

或者使用jQuery：




var $child = $('#parentElementId').children();

通过父元素获取：




var parent = childElement.parentNode;

或者使用jQuery：




var $parent = $('#childElementId').parent();

通过兄弟元素获取：




var nextSibling = element.nextElementSibling;
var previousSibling = element.previousElementSibling;

或者使用jQuery：




var $nextSibling = $('#elementId').next();
var $previousSibling = $('#elementId').prev();

通过选择文档中的所有元素：




var allElements = document.getElementsByTagName('*');

或者使用jQuery：




var $allElements = $('*');

以上方法可以获取页面中的元素，并可以通过jQuery提供的丰富API进行进一步的操作，如事件绑定、样式修改、内容修改等。

- 阅读更多 -

数字滚动利用Jquery.js

System

2024-08-19

所有,jquery

要实现一个数字滚动效果，你可以使用jQuery的animate方法来更新数字，并使用setInterval来定时执行这个更新。以下是一个简单的实例代码：

HTML部分：




<div id="number-display">0</div>

CSS部分（可选，仅用于美观）：




#number-display {
  font-size: 48px;
  font-weight: bold;
}

JavaScript部分（使用jQuery）：




$(document).ready(function(){
  var number = 0;
 
  function updateNumber() {
    number += 1; // 或者根据需要更改更新逻辑
    $('#number-display').text(number);
  }
 
  setInterval(updateNumber, 1000); // 每秒更新一次数字
});

确保在你的HTML文件中包含了jQuery库：




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

这段代码会在ID为number-display的元素中显示一个每秒增加1的数字。你可以根据需要调整更新逻辑和初始数字。

- 阅读更多 -

最新Jquery中$，前端开发两年

System

2024-08-19

所有,jquery

您的问题似乎是在询问如何使用最新版本的jQuery进行前端开发，并且您提到有两年的经验。jQuery是一个非常受欢迎的JavaScript库，用于简化HTML文档的遍历、事件处理、动画等操作。以下是一些使用最新版本的jQuery进行前端开发的基本示例。

选择元素:




$(document).ready(function() {
    $('#elementId').text('Hello, World!'); // 改变元素的文本
});

绑定事件:




$(document).ready(function() {
    $('#buttonId').click(function() {
        alert('Button clicked!');
    });
});

AJAX请求:




$.ajax({
    url: 'your-api-endpoint',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log('Data received:', data);
    },
    error: function(error) {
        console.error('Error:', error);
    }
});

链式调用:




$(document).ready(function() {
    $('#elementId').css('color', 'red').hide().fadeIn(1000);
});

使用jQuery插件:




$(document).ready(function() {
    $('#myTable').dataTable(); // 假设你使用了dataTable插件
});

确保在使用任何jQuery代码之前，你已经在HTML文档中包含了最新版本的jQuery库，例如:




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

这些示例展示了如何使用jQuery选择元素、绑定事件、执行AJAX请求、进行链式调用以及使用插件。在实际开发中，你可以根据需要使用jQuery的其他功能，如DOM操作、动画、AJAX、Utilities等。

- 阅读更多 -