jq概念笔记

置顶林中明月间。

已于 2023-03-10 16:30:45 修改

阅读量543

点赞数

分类专栏： JQuery 文章标签： javascript 前端 html

于 2018-04-10 16:01:18 首次发布

本文链接：https://blog.csdn.net/a772116804/article/details/79881687

版权

JQuery 专栏收录该内容

61 篇文章 5 订阅

订阅专栏

只能输入纯数字的输入框:<input type="text" name="" οninput="value=value.replace(/[^\d]/g,'')"> //放心使用很强大

vue 只能输入纯数字的输入框

@keyup="inputChange"
inputChange() { //输入框值改变
this.pageIndex = this.pageIndex.replace(/[^\d]/g, '')
}

jQuery中$()可以有两个参数

var $box = $('div.work_content');
var $txt = $('div.model-select-text',$box);

JQuery 获得绝对, 相对位置的坐标方法
    绝对：
    var X = $('#obj').offset().top;
    var Y = $('#obj').offset().left;

   获取相对(父元素)位置:
   var X = $('#obj').position().top;
   var Y = $('#obj').position().left; 

$("#div_id").height();
// 获得的是该div本身的高度, (不包含padding,margin,border)
$("#div_id").outerHeight();
// 包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度)
$("#div_id").outerHeight(true);
// 包含该div本身的高度, 以及padding,border,margin上下的总高度

jQuery页面加载后执行的事件(3种方式)
1 $(function () {});

2 $(document).ready(function () {});

3 window.onload = function () {};

jq获取 input type为password的value值

var password = $('input[name="password"]').val();

$() 获取到的都是一个集合

$('li') => ['li','li','li']

prop：能够获取与处理html元素中的固有属性，
attr：能够获取html元素中的自定义属性

prop：对于HTML元素本身就带有的固有属性:“id、class、style、title、ref、target..."

attr：对于HTML元素我们自己自定义属性(data-*)、使用attr方法: <p data-id = "1"></p>

attr('title') 为获取(title可以换成class、id等)

$('div').attr('title','456');//为赋值

$("xxx").prop作用等同于 attr,有的地方使用比attr好

$("[name=checkItem]:checkbox").prop("checked",true);

使用的是 prop() 方法来设置复选框的属性值，而不使用 attr() 方法，这是因为如果使用 attr() 方法会存在浏览器的兼容问题。

对于自定义的属性，attr可以获取，prop则为undefined，

<a action='Action' href="http://www.baidu.com">点我跳转</a>
console.log($('a').attr('action'))//Action
console.log($('a').prop('action'))//undefined

对于具有true与false的属性，例如checked,selected或者disabled时则使用prop()

/ /读取标签定义属性 data-[key] = [value]

<span id="span" data-name="js">js</span>

//读取标签定义属性的值

$("#id").data("key");

$("#span").data("name"); //js

// 设置标签定义属性的值

$("#id").data("key", "value");

$("#span").data("name"，“jq”);//jq

scrollTop()获取滚动距离

$('div').next().css('background','red').end().css('color','blue');// 链式操作 end()后面css的操作对应的是div,,前面的css是针对div的下一个兄弟节点

$('div').next().css('background','red').addBack().css('color','blue');// 链式操作 addBack()后面css的操作对应的是div,,并且div的下一个兄弟节点也加上和div相同的css操作且也有前面的css

//json形式设置
$('#div1').css({width:'200px',height:'100px',background:'red'}) 中间只能用逗号隔开
$('#div1').on({click:function(){alert(1)},mouseover:function(){alert(2)}});

Jquery的parent和parents(找到某一特定的祖先元素)

上找父母（parents）下找孩子（children）中间找兄弟（siblings）、next

删除祖父级元素：$(this).parents().find('#table').remove();

jq克隆元素加事件：$('#table').clone(true)

$('#.父级元素').find('.className、标签');

//index 索引:当前元素在所有兄弟节点中的位置从0开始

$('div').addClass('box3 box4');添加class

width = width

innerwidth() = width+padding 不加margin

outerwidth() = width+padding+border 不加margin

//$('img').trigger('scrollDown');//自定义事件通过主动触发的trigger来调用的，自定义事件是在系统事件的基础上进行二次封装

如果

outerWidth(true)这样就加margin

$('input[value*="3"]').css('background','red');

$('div[style*="red"]').css('background','');

input[value^="11"] // ^= 11开头
input[value$="11"] // $= 11结尾
input[value*="11"] // *= 只要有包含11的

<div style="width:100px" a="123">123</div>
$('div[a="123"]').click(function(){})
$('div[style="width:100px"]').click(function(){}) //属性选择器

好的鼠标事件写法:

$('div').on('click',function(){
		alert('123');
		$('div').off('加取消的事件');
	});

鼠标移入移出事件：

$(function(){
　　$("#div").hover(function(){
　　　　$(".div2").slideDown();
　　},function(){
　　$(".div2").slideUp();
  })
});

 $(function(){  
                $('#id').on({  
                    mouseover : function(){  
                        $(this).wrap("<h1>") ;  
                    } ,  
                    mouseout : function(){  
                        $(this).unwrap() ;  
                    }   
                }) ;  
            }) ;

$('#div1').find('div').eq($(this).index()).show();

eq($(this).index())//对应当前点击的下标表示

//ev:event 对象

jq设置未知元素垂直居中页面

<script type="text/javascript">
    //居中
      $login.css('left',($(window).width()-$login.outerWidth())/2);
      $login.css('top',($(window).height() - $login.outerHeight())/2);

    //内容跟随导航条滚动
    var timer;
    $(window).scroll(function(){
     clearTimeout(timer);
        timer = setTimeout(function () { //解决滚动抖动问题
             $login.css('top',($(window).height() -         
             $login.outerHeight())/2+$(document).scrollTop());
        },50)
     
    })
  </script>

//js
/*鼠标坐标方法:clientX(相对于可视区) Y;
keycode:键盘键值
*/
//jq
/*鼠标坐标方法:ev.pageX(相对于文档的) Y;
ev.which:键盘键值
ev.preventDefault()阻止默认事件
ev.stopPropagation()阻止冒泡操作只能阻止祖先节点，不能阻止自身。

ev.stopImmediatePropagation();既可以阻止自身也可以阻止祖先冒泡。
return false;阻止默认事件+阻止冒泡操作一句搞定
*/
//one() 只执行一次

<script type="text/javascript">
  /*$('input').on('focus',function(){
    alert(1);
  });*/
  $('input').focus();//获取焦点
  $('input').blur();//失去焦点
  $('div').on('focusin',function(){
    alert(1);
  });//支持冒泡、获取焦点

 // 监听焦点事件,能返回
  $('.one').focus(function(){
  console.log("获取到焦点!")
  })
// 失去焦点事件 blur 能返回
  $('.one').blur(function(){
   console.log("失去焦点了?")
})
  $('input').focusout();//支持冒泡、失去焦点
  </script>

detach():跟remove方法一样，只不过会保留删除这个元素的操作行为(如点击).

<div>div</div>
 <span>span</span>
  <script type="text/javascript">
    $('div').replaceWith($('span')); //div被span替换
    $('div').replaceAll($('span'));//div替换span
  </script>

/ get():把jq转成原生js
// outerWidth():获取不到隐藏元素的值

clone():可以接受一个参数，作用可以复制之前的操作行为

//$('#div1').clone(true).appendTo($('span'));//true加上克隆行为

//$('span').wrap('<div>');div包裹span
// wrap():这里表示给每个span元素外面包裹一个div标签（单独包裹）(前面的是被包裹元素)
//$('span').wrapAll('<div>');用一个div包裹住所有的span(前面的是被包裹元素)
//$('span').wrapInner('<div>'):内部包裹，每个span里面包裹一个div

//$('span').unwrap():删除包裹：删除父级(不包括body)

//$('span').unwrap('div');

$.proxy() 改变this指向
<script type="text/javascript">
  function show(){
    alert(this);//window
  }
  show.call(document)//document
  
  function show(a,b){
    alert(a);
    alert(b);
    alert(this);
  }
  $.proxy(show,document)();//调用
  $.proxy(show,document)(3,4);//调用 赋值
  </script>

全局变量接收局部变量的值

    // var colors;//定义一个全局变量
    // $('span').click(function(){
    //   var yanse = $(this).text();
    //   console.log(color)
    //   colors = yanse;//被赋值的写在左边
    // })

    //快捷的
     var colors = '';
     $('span').click(function(){
       colors = $(this).text();//给全局的变量赋值
       console.log(color);
     })
    
    $('div').css('background',colors);//一个变量直接写

    // html+='<a href="#"><span>'+bianliang+'</span></a>';//拼接:外面,里面符号一致加号颜色变红。

$('li').slice(1,4).css('background','red'); 2,3,4个变红了筛选

//serialize:输出序列化表单值
// console.log($('form').serialize()) //string:a=1&b=2&c=3 串联一起(字符串形式)
// console.log($('form').serializeArray()) (数组形式)
// [
{name:'a',value:'1'},
{name:'b',value:'2'},
{name:'c',value:'3'},

]

</form>

运动

// animate():第一个参数：{width:200} 运动的值和属性
// 第二个-时间：默认400ms{},1000
//第三个-运动形式-两种：1.默认：swing(慢快慢) 2.linear(匀速)
//第四个-回调函数
//$(this).animate({width:300,height:300},2000,'linear',function(){alert(123)});

//stop():默认阻止当前运动，不阻止所有，stop(true) 阻止后续所有运动，stop(true,true) 当前运动立马完成 = finish()立即完成运动。

$('div').next().css('background','red').end().css('color','blue');end()返回上一级就是操作$('div')了,可以调用多次

$('div').next().css('background','red').addBack().css('color','blue');不仅操作上一级，还操作了当前的

$('#div1').offset().top //left offset()的距离值都是相对于整个页面的

$('#div2').position().left//父级元素css加定位他不认margin值

//delay(1000):延迟(时间)

//事件委托
/*$('ul').delegate('li','click',function(){
this.style.background = 'red';
});*/
//阻止事件委托 $('ul').undelegate();

//$('#div1').trigger('click');(打开页面)主动触发点击效果

scrollTop() ==$(document).height()-$(window).height();

<script type="text/javascript">
	var jq = $.noConflict();//解决jq版本冲突,jq可换任意名字
	//在源码中 $=jQuery
	jq(function(){
		alert(123);
	})
</script>

jq:回调

<script type="text/javascript">
 var cb = $.Callbacks();
 var cb = $.Callbacks('once');//指出发一次fire操作
 var cb = $.Callbacks('memory');//有记忆功能，后添加的函数也能执行
 var cb = $.Callbacks('unique');//去重复
 var cb = $.Callbacks('stopOnFalse');//函数中有return false,跳出整个集合操作
 function a(){
 	alert(1);
 }
 (function(){
 	function b(){
 		alert(2)
 	}
 	cb.add(a);
 	cb.add(b);
 })();
 cb.fire();//触发
</script>

<script type="text/javascript">
var dfd = $.Deferred();//延迟对象
	setTimeout(function(){
		alert(1);
		dfd.resolve();// reject
	},1000);
	dfd.done(function(){//done 成功 fail
		alert(2)
	})
</script>

var str = '{"name":"hello"}';

alert($.parseJSON(str).name);//JSON

var aDiv = document.getElementsByTagName('div');//类数组
$.makeArray(aDiv).push();//转为正真的数组