至尊技术网 - jQuery

JQuery长按事件

悠悠楠杉 — Sat, 21 May 2022 15:44:00 +0800

$(".text").on({
    touchstart: function(e) {
        var oSpan = e.currentTarget.lastElementChild
            // 长按事件触发
        timeOutEvent = setTimeout(function() {
            timeOutEvent = 0;
            console.log('你长按了');
        }, 500);
    },
    touchmove: function() {
        clearTimeout(timeOutEvent);
        timeOutEvent = 0;
    },
    touchend: function() {
        clearTimeout(timeOutEvent);
        if (timeOutEvent != 0) {
            console.log('你点击了');

        }
        return false;
    }
})

jQuery ajax如何同步请求

悠悠楠杉 — Fri, 30 Jul 2021 14:01:00 +0800

由于$.post() 和 $.get() 默认是异步请求，如果需要同步请求，则可以进行如下使用：

在$.post()前把ajax设置为同步：$.ajaxSettings.async = false;
在$.post()后把ajax改回为异步：$.ajaxSettings.async = true;

如：

$.ajaxSettings.async = false;
$.post("/finance/getLastTimeCard", data, function(result) {
    // 请求处理
},"json");
$.ajaxSettings.async = true;

$.ajax设置同步，加个async: false就可以了

$.ajax({
    type:"post",
    url:"login.php",
    data:{name:"name",password:"password"},
    datatype: "json",
    async: false,
    success:function(data){
    }
});

ajax请求数据，并怎么将数据赋值给全局变量

因为ajax本身是异步执行的，导致内部定义的任何变量外部无法调用，解决方式为在ajax中添加async: false属性，变异步为同步，这样就可以使success方法中定义的全局变量在ajax外调用啦。

判断页面中是否引用jQuery或者其他的

悠悠楠杉 — Sat, 05 Jun 2021 17:53:01 +0800

必须是放在jQuery后面才能判断！

第一种：

第二种：

jQuery获取上级、同级、下级元素

悠悠楠杉 — Wed, 19 May 2021 14:27:05 +0800

jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素

jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点

jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个

jQuery对象返回，children()则只会返回节点

jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点

jQuery.prevAll()，返回所有之前的兄弟节点

jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点

jQuery.nextAll()，返回所有之后的兄弟节点

jQuery.siblings(),返回兄弟姐妹节点，不分前后

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从p元素开始找,等同于$("p span")

使用jQuery播放/暂停 HTML5视频

悠悠楠杉 — Fri, 14 May 2021 11:11:00 +0800

js中的play()是不行的，play并不是jQuery的函数，而是DOM元素的函数

播放

$('video').trigger('play');

暂停

$('video').trigger('pause');

点击视频播放和暂停

$('video').click(function() {
          if ($(this).hasClass('pause')) {
            $("video").trigger("play");
            $(this).removeClass('pause'); 
            $(this ).addClass('play'); 
          } else {
            $("video").trigger("pause"); 
            $(this ).removeClass('play'); 
            $(this ).addClass('pause'); 
          } 
        })

jQuery实现页面到滚动到指定位置执行某些操作

悠悠楠杉 — Fri, 14 May 2021 11:00:00 +0800

如果页面滚动到class名为group-pic的元素的位置时开始加载

$(function(){
    var a,b,c;
    a = $(window).height();    //浏览器窗口高度
    var group = $(".group-pic");
    $(window).scroll(function(){
        b = $(this).scrollTop();   //页面滚动的高度
        c = group.offset().top;    //元素距离文档（document）顶部的高度
        if(a+b>c){
            
        }else{
            
        }
    });
});

点击按钮页面滚动后，按钮始终在下方

var height = $(document).height() - $(window).height();
if(!($(document).scrollTop() >= height)){
    var h = $(document).height() - ($(document).height() - $('.btn').offset().top + $(window).height() - $('.btn').height());
    $('body,html').animate({ 
        scrollTop: h
    },500);
}

一些获宽高度的属性：

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

1.offsetTop : 当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

2.offsetLeft : 当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth : 当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight : 与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

JQuery获取append后的动态元素

悠悠楠杉 — Thu, 24 Dec 2020 15:17:00 +0800

jquery 1.7之前用

$('.btn').live('click', function() {
    alert('获取到了');
});

jquery 1.7+之后用on代替live,on()方法在被选元素及子元素上添加一个或多个事件处理程序

$('body').on('click', '.btn', function() {
    alert('获取到了');
});

PHP利用TXT文本存储数据

悠悠楠杉 — Sat, 05 Dec 2020 17:11:00 +0800

1.php

 '200', 'msg' => '提交成功'));
    } else {
        echo json_encode(array('code' => '400', 'msg' => '提交失败'));
    }
} else {
    if (isset($_GET['te']) && $_GET['te'] == 'hq') {
        //获取内容
        $str = file_get_contents($wj);
        $arr = explode("\n", $str); //把换行转换成数组
        // print_r($arr);
        echo json_encode($arr);
    } else {
        echo json_encode(array('code' => '400', 'msg' => '获取失败'));
    }
}

1.html





    
    
    PHP利用txt文本存储数据

PHP连接数据库，通过接受post请求实现增删改查

悠悠楠杉 — Wed, 18 Nov 2020 15:00:00 +0800

1.html文件：




    
    
    PHP连接数据库实现增删改查



    
    
    
    
    
    
    

提示：添加可以填3个，删除只填代号，修改可以填科目和节数然后需要改哪个填代号，查询填科目和节数。

1.php文件：

 '200','msg' => '添加成功'));
    }else{
        return json_encode(array('code' => '400','msg' => '添加失败'));
    }
}

//删除
function shanChu(){
    $conn = $GLOBALS['conn'];
    $c_id = $GLOBALS['c_id'];
    $sql = "delete from course where c_id='$c_id'";//删除
    $result = mysqli_query($conn,$sql);
    if($result){
        return json_encode(array('code' => '200','msg' => '删除成功'));
    }else{
        return json_encode(array('code' => '400','msg' => '删除失败'));
    }
}

//修改
function xiuGai(){
    $conn = $GLOBALS['conn'];
    $c_id = $GLOBALS['c_id'];
    $c_name = $GLOBALS['c_name'];
    $t_id = $GLOBALS['t_id'];
    if($c_name != ''){
        $s = "c_name='$c_name'";
    }else if($t_id != ''){
        $s = "t_id='$t_id'";
    }else if($c_name != '' && $t_id != ''){
        $s = "c_name='$c_name',t_id='$t_id'";
    }
    $sql = "update course set $s where c_id='$c_id'";//修改
    $result = mysqli_query($conn,$sql);
    if($result){
        return json_encode(array('code' => '200','msg' => '修改成功'));
    }else{
        return json_encode(array('code' => '400','msg' => '修改失败'));
    }
}

//查找
function chaZhao(){
    $conn = $GLOBALS['conn'];
    $c_id = $GLOBALS['c_id'];
    $c_name = $GLOBALS['c_name'];
    $t_id = $GLOBALS['t_id'];
    if($c_name != ''){
        $s = "c_name='$c_name'";
    }else if($t_id != ''){
        $s = "t_id='$t_id'";
    }else if($c_name != '' && $t_id != ''){
        $s = "c_name='$c_name' and t_id='$t_id'";
    }
    $sql = "select * from course where $s";//查找
    $result = mysqli_query($conn,$sql);
    $arr = array();//建一个空数组
    $arr[] = array('code' => '200','msg' => '查找成功');//赋值到空数组里
    while ($row = mysqli_fetch_assoc($result)) {//通过while循环获取
        $arr[] = $row;
    }
    if($result){
        return json_encode($arr);
    }else{
        return json_encode(array('code' => '400','msg' => '查找失败'));
    }
}

//所有内容
function synr(){
    $conn = $GLOBALS['conn'];
    $sql = 'select * from course';
    $result = mysqli_query($conn,$sql);
    $arr = array();
    $arr[] = array('code' => '200','msg' => '获取成功');
    while ($row = mysqli_fetch_assoc($result)) {//通过while循环获取
        $arr[] = $row;
    }
    // print_r($arr);
    if($result){
        return json_encode($arr);
    }else{
        return json_encode(array('code' => '400','msg' => '获取失败'));
    }
}

//转换成数组
// $result = mysqli_query($conn,$sql);//对数据库执行一次查询
// $row = mysqli_fetch_array($result,MYSQLI_ASSOC);//函数从结果集中取得一行作为关联数组，或数字数组。 MYSQLI_ASSOC,MYSQLI_NUM,MYSQLI_BOTH（默认）
// print_r($row);
//mysqli_fetch_assoc($result);//关联数组
//mysqli_fetch_row($result);//数字数组

//错误提示
function bc(){
return json_encode(array('code' => '400', 'msg' => '操作失败'));
}

$a = isset($_POST['a']) ? trim($_POST['a']) : '';
switch ($a){
    case "tianJia": // 添加
        echo tianJia();
        break;
    case "shanChu": // 删除
        echo shanChu();
        break;
    case "xiuGai": // 修改
        echo xiuGai();
        break;    
    case "chaZhao": // 查找
        echo chaZhao();
        break;
    case "synr":
        echo synr();
        break;
    default:
        echo bc();
        mysqli_close($conn);//关闭先前打开的数据库连接
}        
?>

数据库表下载地址：https://zhizun.lanzoux.com/iuicqiiigxi

JQuery添加兄弟节点、相邻元素

悠悠楠杉 — Fri, 09 Oct 2020 15:15:00 +0800

1、在每个匹配的元素之后插入内容。

$("p").after("Hello");

2、在每个匹配的元素之前插入内容。

$("p").before("Hello");

3、把所有匹配的元素插入到另一个、指定的元素元素集合的后面

$("p").insertAfter("#foo");

4、把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

$("p").insertBefore("#foo");