jquery 样式操作

标签：jquery function 样式 标签 js pEle 操作 d1

操作类：

js版本：                      jquery版本

classList.add()            addClass()

classList.remove()      removeClass()

classList.contains()      hasClass()

classList.toggle()           toggleClass()

css操作：

<p>111<p>

<p>222<p>

一行代码将第一个p标签变成红色第二个p标签变成绿色：

$('p').first().css('color,''red').next().css('color','green')

jquery的链式操作  使用jquery可以做到一行代码操作很多标签

jquery对象调用jquery方法之后返回的还是jquery对象  也就可以继续调用

 

了解：

位置操作：

offset()  定位的值 获取当前标签相对于窗口的偏移量

position()   元素相对于父标签的偏移量

$(window).scrollTop()  返回的值是数字 标识滑动页面的位置 右侧滚动条亲顶部的效果 可以用于制作回到顶部等功能,括号里面写数字  页面就跳到对应的部分$(window).scrollTop(0)  

scrollLoft()左

 

尺寸：

$('p').height()   文本

$('p').width() 

$('p').innerHeighe()文本+padding

$('p').innerWidth()

$('p').outerHeight()  文本+padding+border

$('p').outerWidth()

 

文本操作：

操作标签内部文本

 

js                    jquery

innerText         text()括号内不加参数是获取 加了是获值

innerHTML     html()

 

$('div').text()   拿到内部文本

$('div').text('你好')  拿到内部文本+标签，也可以再text内设置文本内容，不能识别标签

 

 

获取值操作

js                juery

.value        .val()

 

$('#d1').val()

$('#d1').val('天天开心')  括号内不加参数就是获取 加了就是设值

获取文件对象：

$('#d2')[0].files[0]   牢记两个对象之间的转换

 

属性操作

 

js                              jquery

setAttibute()          attr(name,value)  设值

qetAttribute()          attr(name)  获取

removeAttribute()   removeAttr(name) 移除

 

在用变量储存对象的时候  js中推荐使用xxx.Ele   标签对象

jquery中推荐使用 $xxxEle   jquery对象

对于标签上有的能够看到的属性和自定义属性用attr

对于返回布尔值 比如 checkbox radio option是否被选中用prop

$('#d2').prop('checked',true)

 

文档处理

js                               jquery

createElement()        $('<p>')

appendChild()            append()

let $Ele=$('<p>') 创建一个p标签

$pEle.text('写入文字')

$pEle..attr(id','d1')  设值

$('#d1').append($pEle)  内部尾部追加

spEle.appendTo($('#d1')) 向哪个位置追加

 

$('#d1').prepend($pEle) 放在某个标签后面

$pEle.prependTo($('#d1'))

 

$('#d1').before($pEle)

spEle.insertBefore($('#d2'))

 

$('#d1').remove()将标签从DOM树中删除 彻底删除

$('#d1').empty()  只删除内容 留下d1这个

 

jquery事件

第一种：

$('#d1').click(function(){

          alert('你好')

})

第二种：（功能更强大 还支持事件委托）

$('#d2').on('click',function(){

      alert('hello')

})

 

jquery两种绑定事件的方式

第一种

$('#d1').click(function(){})

第二种

$('#d1').on('click',function(){})

 

 

克隆事件

clone() 默认情况下只克隆标签不可控事件

clone(true)

自定义模态框

通过绑定事件控制标签类属性的添加和删除

this：之地啊的就是当前被操作的本身 有点像面向对象的self

左侧菜单 一行代码搞定 链式

返回顶部 $(window).scroll(function(){})    监测滚动条

自定义登录校验功能

.val() 的使用

 

hover事件： 只放一个函数 进出都会触发  可以写两个

$('#d1').hover(function(){}) 进的时候一个

$('#d1').hover(function(){},

　　　　　　function(){}) 出的时候一个

 

input框实时监控输出事件

$('#d1').on('input',function(){})  这种不行就换一种.input 

 

键盘按键事件

$(window).keydown(function(event){})  按键按下,通过event形参按键对应的数字

$(window).keyup(function(){})  按键抬起

 

 

 

 

<b'#dutton  id='d1'>  </button>

 

标签：jquery,function,样式,标签,js,pEle,操作,d1
From： https://www.cnblogs.com/97zs/p/17813046.html