JS+ajax格式

 

0.1*js模板字符串

注意使用反引号 ` `

        const name = '小缘'
        const age = 14
        console.info(`大家好，我叫${name}，今年${age}岁了`)
        // 等价于
        console.info('大家好，我叫' + name + '，今年' + age + '岁了')

0.2*随机数函数

        //取随机数
        function getRandom(N,M){
            return Math.floor(Math.random() * (M - N + 1)) + N
        }

 0.3*在 jQuery 中，可以使用 $.ajax() 方法来发送 Ajax 请求。以下是一个简单的 Ajax 请求的示例：

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  dataType: 'json',
  success: function(data) {
    // 处理获取到的数据
  },
  error: function() {
    console.error('请求失败');
  }
});

0.4* 间歇函数

在 JavaScript 中，可以使用间歇函数（Interval）来定时执行某个函数。间歇函数会在指定的时间间隔内重复执行指定的函数，直到被取消或页面被卸载。

// 每隔 1 秒钟输出一次当前时间
const intervalId = setInterval(function() {
  const now = new Date();
  console.log(now.toLocaleTimeString());
}, 1000);

 setInterval() 方法会返回一个整数值，表示间歇函数的 ID。我们可以使用这个 ID 来取消间歇函数的执行，如下所示：

// 取消间歇函数的执行
clearInterval(intervalId);

 除了 setInterval() 方法之外，还可以使用 setTimeout() 方法来创建一个定时器，它会在指定的时间后执行一次指定的函数。以下是使用 setTimeout() 方法创建定时器的示例：

// 5 秒钟后输出一次当前时间
setTimeout(function() {
  const now = new Date();
  console.log(now.toLocaleTimeString());
}, 5000);

0.5* window对象

在 JavaScript 中，window 是一个全局对象，它代表了浏览器窗口或框架。在浏览器中，每个打开的窗口或框架都有一个对应的 window 对象。

以下是一些常见的 window 对象的属性和方法：

• window.alert()：显示一个带有一条消息和一个“确定”按钮的警告框。
• window.prompt()：显示一个带有一条消息、一个文本框和一个“确定”按钮的对话框，用于提示用户输入一些文本。
• window.confirm()：显示一个带有一条消息、一个“确定”按钮和一个“取消”按钮的对话框，用于提示用户确认或取消一个操作。
• window.open()：打开一个新的浏览器窗口或标签页。
• window.close()：关闭当前浏览器窗口或标签页。
• window.location：表示当前窗口的 URL。
• window.document：表示当前窗口的文档对象。
• window.setTimeout()：在指定的时间后执行指定的函数。
• window.setInterval()：每隔指定的时间执行指定的函数。
• window.clearTimeout()：取消由 setTimeout() 方法设置的定时器。
• window.clearInterval()：取消由 setInterval() 方法设置的间歇函数。

一、获取DOM元素

1.1.根据CSS选择器来获取DOM元素

document.querySelector('css选择器')

参数为一个或多个有效的CSS选择器（是字符串 要带 ‘ ’ ）；

    例如：

document.querySelector('ul li')
document.querySelector('.nav')

1.2其他获取DOM元素的方法

        // 根据id获取第一个元素
        document.getElementById('nav')
        // 根据 标签 获取一类元素  获取页面的所有div
        document.getElementsByTagName('div')
        // 根据 类名 获取元素 获取页面所有类名为btn的
        document.getElementsByClassName('btn')

 

二、操作元素内容和样式

2.1.1元素.innerText属性

 显示纯文本，不解析标签

        <div class="info">我是对象</div>

        const info = document.querySelector('.info')
        console.log(info.innerText) //获取文字内容
        info.innerText = '我是盒子'    //修改文字内容
        info.innerText = '<strong>我是盒子</strong>'   //不能解析标签

2.1.2元素.innerHTML属性

// 获取元素的 HTML 内容
const html = document.getElementById('myDiv').innerHTML;

// 设置元素的 HTML 内容
document.getElementById('myDiv').innerHTML = '<p>Hello, world!</p>';

 会解析标签

2.2.1  element.style.property = value：设置元素的内联样式，其中 property 是 CSS 属性名，value 是属性值。

const element = document.getElementById('my-element');
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';

2.2.2  element.classList.add(className)：向元素添加一个 CSS 类名。

const element = document.getElementById('my-element');
element.classList.add('active');

2.2.3   element.classList.remove(className)：从元素中删除一个 CSS 类名。

const element = document.getElementById('my-element');
element.classList.remove('active');

 2.2.4  element.classList.toggle(className)：如果元素中存在指定的 CSS 类名，则删除它；否则，向元素添加它。

const element = document.getElementById('my-element');
element.classList.toggle('active');

2.2.5   element.style.cssText：设置元素的内联样式，可以一次性设置多个属性。

const element = document.getElementById('my-element');
element.style.cssText = 'color: red; background-color: #f0f0f0;';

 

3.事件监听

元素对象.addEventListener('事件类型', 要执行的函数)

         注意：事件类型要加引号 

在 JavaScript 中，可以使用事件监听器来监听鼠标事件。以下是一些常见的鼠标事件：

• click：当鼠标单击元素时触发。
• dblclick：当鼠标双击元素时触发。
• mousedown：当鼠标按下元素时触发。
• mouseup：当鼠标释放元素时触发。
• mousemove：当鼠标在元素上移动时触发。
• mouseover：当鼠标移动到元素上方时触发。
• mouseout：当鼠标移出元素时触发。

在 JavaScript 中，可以使用事件监听器来监听文本事件。以下是一些常见的文本事件：

• input：当文本框的值发生改变时触发。
• change：当文本框的值发生改变并且失去焦点时触发。
• focus：当文本框获得焦点时触发。
• blur：当文本框失去焦点时触发。

3.1鼠标点击后关闭广告

// 获取广告元素
const ad = document.getElementById('ad');

// 监听鼠标点击事件
document.addEventListener('click', function(event) {
  // 判断点击的元素是否为广告元素或广告元素的子元素
  if (event.target === ad || ad.contains(event.target)) {
    // 关闭广告
    ad.style.display = 'none';
  }
});

const ad = document.getElementById('ad'); // 替换为广告DOM元素的ID

ad.addEventListener('click', function() {
  ad.style.display = 'none'; // 隐藏广告
});