【JQuery】基础

最新推荐文章于 2023-06-17 17:25:15 发布

原创最新推荐文章于 2023-06-17 17:25:15 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

JQuery 专栏收录该内容

1 篇文章

订阅专栏

event.pageX;event.pageY, function参数传入event，并返回当前鼠标的位置

$(document).mousemove(function(event){
    $("span").text("X: " + event.pageX + ", Y: " + event.pageY);
});

常用的事件：

select(): input 里面的文本被选中

$('input').select(function(){
    alert('selected!')
})


$('input').select();//导致文本内容被选中

trigger() 与 .triggerHandler()：两者都是触发事件，具体区别：

它不会引起事件（比如表单提交）的默认行为
.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡

$("input").trigger("select");

$("p").trigger("myPara", [参数1，参数2，参数n]);

on():在被选元素及子元素上添加一个或多个事件处理程序

https://www.runoob.com/jquery/event-on.html,on()替代了bind()

$('div').on(event, [childSelector], [data], function(){})

$('div').on('click',function(){})
添加多个事件$('div').on('click mouseover',function(){})
添加多个事件

$('div').on({
    click:function(){alert('click')},
    mouseover:function(){alert('mouseover')}
})

添加自定义事件----传递数组/字符串

array=['nmj','fxp']
$('button').click(function(){
    $('p').trigger('newEvent',array)  //触发p的newEvent事件
})

//事件的绑定
$('p').on('newEvent',function(e,ary){ //第一个参数必须是e
    console.log(ary[0])
    console.log(ary[1])
})

向函数通过e来传递参数----传递一个对象

function myfun(e){
    console.log(e.data.msg)
}
$(document).ready(function(){
    $('div').on('click',{msg:'nmj'},myfun)
})

向未来的元素添加事件（动态添加事件）

不用特意利用事件冒泡就可以动态添加事件：$(父元素).on('click',子元素,function(){})

https://www.runoob.com/try/try.php?filename=tryjquery_event_on_newel

移出事件用off:$('p').off(事件)
one(): 运行一次就自动移除

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

一般情况下，一个页面的相应加载顺序是：
域名解析——>加载html——>加载js和css——>加载图片等其他信息。

$(document).ready：后者是DOM加载完就执行代码（但是不包含图片等非文字媒体文件）

window.onload()：等到页面渲染完成执行，即等到所有资源（如：图片）都完全加载完成的时候才会执行.

他俩的区别：

除了上面那点，还有一个。ready()方法多次调用，传入的方法会串联追加执行；但是在JS中，windom.onload是后面的会覆盖前面的。

补充：JS的 DOMContentLoaded 与 OnLoad 事件

DOMContentLoaded : 页面(document)已经解析完成，页面中的dom元素已经可用。但是页面中引用的图片、subframe可能还没有加载完。

OnLoad：页面的所有资源都加载完毕（包括图片）。浏览器的载入进度在这时才停止。

function one(){
    alert("one");
}
function two(){
    alert("two");
}
$(document).ready(function(){
    one();
});
$(document).ready(function(){
    two();
});
输出：one two

function one(){
    alert("one");
}
function two(){
    alert("two");
}

window.onload = one;
window.onload = two;
输出：two

($function(){
    $('.btn').click(function(){
        $('p').hide();
    })
})

还有其他一些伪类选择器，最好背一下

$('[href]') //带有href属性的所有元素

$('a[href!='#']') //href!='#'的所有a元素

$(':button')//type=button的input  &&  <button>

jq事件

click(fun)、dblclick(fun)；

mouseenter(fun)(划入)、mouseleave(fun)(划出)；mousedown(fun)(划入+按下)、mouseup(fun)(鼠标松开)；

mouseover(fun)(当鼠标指针位于元素上方时触发)；mouseout(fun)(当鼠标指针离开被选元素时触发)

mouseover和mouseenter区别：mouseenter事件只作用于目标元素，而mouseover最用于目标元素及其子代元素；

hover(fun1,fun2)(mouseenter和mouseleave分别代表fun1和fun2)

focus()(获得焦点)、blur()(失去焦点)---->这俩货通常一起用

$('form').submit(fun);(提交) // $('button').submit();

$('.input').change(fun)(当表单的value改变时发生（仅适用于表单字段）)

$(window).resize();//当浏览器窗口发生变化时

$("div").scroll(fun); // 当div的滚动条发生滚动时

jq效果

1. hide()和show()---------display:none;用show()好用，visibility:hidden用show()不好用

.hide(speed,fun);---->fun时隐藏之后调用的函数;

.show(speen,fun);

.toggle(speed,fun);===show+hide

2. fadeIn() & fadeOut() & fadeToggle() ---->(speed,fun) 淡入淡出 css3 transition可实现，css用的多

.fadeTo(speed,opacity,fun)--->设定不透明度opacity:0~1

3. slideUp() & slideDown() & slideToggle() ---->(speed,fun) 向下滑动元素---------display:none;用show()好用，visibility:hidden用show()不好用

4. animate()--->jq动画--->一个元素形成一个动画元素 css3 animation可实现，css用的多

1.
$("div").animate({
      //css样式
      left:'250px',
      opacity:'0.5',
      height:'+=150px',
      width:'+=150px'
},speed,fun);

注意 ：paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right

2.
$("div").animate({
    height:'toggle' //"show"、"hide" 或 "toggle" 就和hide等一样的效果
  });

5.停止动画

$("div").stop(); 停止div当前animate，当前div的下一个animate继续进行

$("div").stop(true);停止div所有的animate

$("div").stop(true,true);停止div当前animate，并达到当前animate的最终效果；并不达到所有的animate的所有效果

jq DOM操作

text();html();val()

1. $('#test').text();---获得文本文字；.html()获得文本+html标签；.val()--获得表单值

2. 修改直接.text('i hava a pen');同html();val()

3. 回调：

$('#test').text(function(i,origText){
    return i+origText
})
回调函数的return是新的文本，函数体内必须要return；origText是原test的文本；i是当前元素的下标
同html、val

$('img').attr('src')；--获得属性值；

修改多个属性值

$('img').attr({
    'src':url,
    'height':'120px'
})

也有回调函数，同text()

添加html元素

append() - 在被选元素的结尾插入内容<p>append</p>

$('p').append(html代码)

prepend() - 在被选元素的开头插入内容

$('#test').prepend(html代码)

after() - 在被选元素之后插入内容<p></p>after代码

$('p').after(html代码)

before()

删除html元素

$("#div1").remove(); //删除div1

$("#div1").empty();  //清空div1

$('p').remove('.hh') //删除class为hh的p

修改css

.class1{}
.class2{}

$('div').addClass('class1');

$('div').removeClass('class1');

$('div').toggleClass('class1')

2. css()

获取css值
alert($('div').css('width'))

修改css,方式一
$('div').css('width','120px')

修改css，方式二(传入的是个对象)
$('div').css({
    'height':'100px',
    'width':'120px'
})

其他的一些方法：hasClass()、removeProp()、removeClass()、offset()

尺寸：

width()/height(): content

innerWidth():content + padding

outerWidth() : content + padding + border

outerWidth(): content + padding + border + margin

各种width，主要和window联系起来 https://www.cnblogs.com/yuanzhangya/p/10045014.html

当设置了box-sizing时：width()=width-padding-border

使用原生js .style.width取不到值时：

原因

元素没有设置宽度值
元素设置了宽度指，但是是内联或者外联样式表中，并非内嵌式的

( .style.width这种方法虽然取不到宽高值，但是可以通过这个方式来设置值 )

解决办法：

jquery的.width()，只有元素的width，不包括padding、border、margin
js的.offsetWidth，包括元素的width+padding+border

jq 对DOM遍历

1. 遍历祖先

span.parent(): 遍历他爸爸

span.parents('ul'): 遍历他所有祖先,并且祖先还得是ul

span.parentsUntil('div'): 遍历他所有祖先,直到这个祖先是div为止，并把div和span之间的祖先返回(不包括div)

2.遍历后代

$('div').children():返回div的所有儿子元素，孙子不返回

$('div').find('*') :返回div的所有后代（儿+孙）

3.兄弟

$('div').sliblins('span') div的所有兄弟元素，并且还得是span

.next() 下一个兄弟
.nextAll() 后面所有的兄弟
$('div').nextUntil('span') div和span之间所有的同为兄的的元素

prev()、prevAll()、prevUntil()同上面的next一摸一样，只不过变成了前...

4.过滤

$('div p').find()  找整个html中第一个"div"下的第一个p   反之.last()

$('p').eq(1) 在整个html中找第2个p

$("p").filter(".url"); 整个html中返回所有class为url的p

$('p').not('.url') 整个html返回所有的class不为url的p

5.each()

$.each用来遍历数组和对象

1.遍历数组
var ary=[1,2,3,4,5]
$.each(ary,function(k,val){     //function中的参数是固定含义的，k是索引，val是对应值
    alert('索引值k'+k+' ary['+k+']='+val)
})

2.遍历对象
var p={name:'nmj',age:'18',sex:'woman'}
$.each(p,function(k,val){ //k是键值,val是value
    alert(k+'为：'+val) //输出: name为nmj
})

$('li').each用来遍历元素( this---->$(this))

遍历所有的li
$('li').each({
   alert($(this).text())
})

jq ajax

1. load()方法

 $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });

responseTxt - 调用成功时的结果内容
statusTXT - 调用的状态
xhr -  XMLHttpRequest 对象

2.get() && post()

get 和 post的区别

get

 $.get("demo_test.php",function(data,status){ //固定参数
    alert("数据: " + data + "\n状态: " + status);
  });

post

var text={
    name:'nmj',
    age:'18'
}
$.post("/try/ajax/demo_test_post.php",text,  //text是向服务器发送的数据
    function(data,status){    //请求成功后的函数，data是从服务器上接收的数据，status是状态
        alert("数据: \n" + data + "\n状态: " + status);
    }
);

当jq中的$不能用的时候：

$.noConflict()
jQuery('button').click(); 
即将所有的$换成了jQuery

或者 
var jq=$.noConflict()
jq('button').click()

或者
jQuey(document).ready(function($){
    $('button').click()
})