jq操作属性，元素，样式，事件

操作属性：

　　单个　　$('选择器').attr('属性名','属性值');　　

　　多个　　$('选择器').attr({'属性名':'属性值','':''});　　

　　eg：　　$('#a1').attr('flag','true');

　　删除属性　　removeAttr（‘属性名’）

操作元素：

　　追加元素

　　　　jqdom的内部的结尾加　　 jqdom.append('<p></p>')

　　　　jqdom的内部的开头加　　jqdom.prepen()

　　　　jqdom外部结尾加　　　　jqdom.after()

　　　　jqdom外部开头加　　　　jqdom.before()

　　删除元素
　　　　jqdom.remove() 方法移除被选元素，包括所有的文本和子节点。该方法也会移除被选元素的数据和事件。
　　　　jqdom.empty() 方法从被选元素所有子节点和内容。该方法不会移除元素本身，或它的属性。

　　eg:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="../../public/jquery-3.2.1.min.js"></script>

        <style>

            *{

                padding: 0;

                margin: 0;

            }

            #wai{

                width: 200px;

                height: 200px;

                border: 1px solid red;

            }

            p{

                width: 100px;

                height: 20px;

                border: 1px solid blue;

            }

        </style>

    </head>

    <body>

        <div id="wai">内部文字</div>

        <button id="btn">按钮</button>

        <button id="btn2">2</button>

    </body>

</html>

<script>

    $(function(){

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

            $('#wai').append('<p id="a1">内部的结尾</p>');

            $('#wai').prepend('<p id="a2">内部的开头</p>');

            $('#wai').after('<p>外部的结尾</p>');

            $('#wai').before('<p>外部的开头</p>');

        })

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

            $('#a1').remove();

            $('#a2').empty();

        })

    })

</script>

操作元素

　　效果：

　　　按钮按下时　　　　　　　　　　　　　　　　　　　　　　　　　　按钮2按下时

操作样式：

　　　jqdom.css({'样式名':'样式值'})

　　　eg：　　$('#a1').css('color','red');

class类操作

　　jqdom.addClass('class1')         给jqdom增加一个class
　　jqdom.hasClass()       检查是否拥有这个class     返回值为true false
　　jqdom.removeClass()      删除这个class
　　jqdom.toggleClass()      添加或删除    （有的话就删，没有就添加）

操作事件

　　jqdom.click(function(){})

　　jqdom.onclick = function(){}

　　各类事件

　　　　bind() 向匹配元素附加一个或更多事件处理器

　　　　eg：$("button").bind("click",function(){ $("p").css(‘color’,‘red’); });

　　　　　　取消绑定 unbind()

　　　　blur()失去焦点事件

　　　　eg：$("input").blur(function(){ $("input").css("background-color","#D6D6FF"); });

　　　　change() 元素的值发生改变时的事件

　　　　eg：$("#sheng").change(function(){shi() });

　　　　click()　点击事件

　　　　eg：$("button").click(function(){ alert('你好') });

　　　　dblclick()　双击事件

　　　　eg：$("button").dblclick(function(){ alert('你好') });

　　　　delegate()　绑定事件

　　　　delegate(selector,eventType[,eventData],handler)

　　　　　　selector是一个选择器，用于筛选触发事件的元素；

　　　　　　eventType是一个字符串，指定一个或多个JavaScript事件类型（多个事件用空格分隔），例如click,keydown或自定义事件名称；eventData为映射类型，表示要　　　　传递给事件处理程序的数据；

　　　　　　handler表示触发该事件时执行的函数。

　　eg：$("div").delegate("button","click",function(){ });

　　　　delegate与bind()区别

　　　　bind是在dom树加载后，对元素的绑定，属于后期绑定。

　　　　delegate绑定的元素可以是已经存在的，也可以是动态添加的。如果是已经存在的就会选定一个父元素，通过冒泡来触发指定子元素的事件。如果是动态添　　加的，就以document为父元素来触发冒泡事件。

　　die()　移除所有通过 live() 函数添加的事件处理程序。[好像已经被废除了？]
　　eg: $("p").die();

　　error()　当元素没有正确输入时发生

　　eg：$("img").error(function(){ $("img").replaceWith("Missing image!"); }); //图片显示不出来则代替文字

　　event.isDefaultPrevented() 检查是否调用了event.preventDefault()

　　eg：alert（event.isDefaultPrevented() ）返回值为true or false

　　event.pageX　　鼠标指针的位置，相对于文档的左边缘

　　event.pageY　　鼠标指针的位置，相对于文档的上边缘

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

　　event.preventDefault() 　　阻止元素发生默认的行为

　　event.result　　显示最后一次结果

　　eg：$("button").click(function(e) { $("p").html(e.result); }); 显示最后一次点击事件返回的结果

　　event.target　　返回事件的目标节点？？？

　　event.timeStamp　　返回从 1970 年 1 月 1 日到事件发生时的毫秒数

　　event.type　　返回哪种事件类型被触发

　　eg：$("p").on("click dblclick mouseover mouseout",function(event){$("div").html("Event: " + event.type);});

　　event.which　　指示按了哪个键或按钮

　　eg：$("input").keydown(function(event){ $("div").html("Key: " + event.which); });

　　focus() 　　焦点事件

　　keydown()　　键盘按下事件

　　keypress()　　键盘按下并抬起事件　

　　keyup() 　　键盘抬起事件

　　　　keydown 和 keypress 区别

　　　　　　KeyDown中返回的是键盘的代码, 而KeyPress返回的是ASCII字符

　　load()　　指定的元素（及子元素）已加载时，会发生 load() 事件

　　eg：$("img").load(function(){ $("div").text("Image loaded"); });

　　mousedown()　　鼠标按下时

　　mouseenter()　　当鼠标指针穿过元素时

　　mouseleave()　　当鼠标指针离开元素时

　　mousemove()　　鼠标移动时

　　mouseout() 　　鼠标移出时

　　mouseover()　　鼠标移入时

　　mouseup() 　　当松开鼠标按钮时

　　one()　　one是在dom树加载后，对元素的绑定，和bind一样属于后期绑定，但是会在事件执行之后移除元素的绑定事件，事件只执行一次。

jq操作属性，元素，样式，事件的更多相关文章

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条
jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒 ...
JQ 为未来元素添加事件处理器—事件委托
随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供 ...
JQuery操作属性、样式、风格(attr、class、css)
样式操作 <p class="myclass" title="选择喜欢的水果">你最喜欢的水果是?</p> 在上面代码中,class也是 ...
纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,
HTML代码如下 <div id="nav"><dl class="sy"><dt> ...
4月12日学习笔记——jQuery操作属性和样式
区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus ...
jq ‘’操作‘’伪元素
1. 伪元素非 dom 元素,jq无法操作,但可以间接影响. 2. 操作方式 2.1 修改类 <!DOCTYPE html> <html lang="en"> ...
jQuery操作属性和样式详解
我们可以使用 javascript 中的getAttribute和setAttribute来操作元素的"元素属性".在 jQuery 中给你提供了attr()包装集函数, 能够同时 ...
第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作样式 ⑤ 事件点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

随机推荐

Spark RDD概念学习系列之action操作
不多说,直接上干货! action操作
解析RecyclerView（2）——带顶部View和底部View的RecyclerView
在网络层,互联网提供所有应用程序都要使用的两种类型的服务,尽管目前理解这些服务的细节并不重要,但在所有TCP/IP概述中,都不能忽略他们: 无连接分组交付服务(Connectionless Packe ...
清北集训Day6T1(生成函数)
听rqy说可以用生成函数做,感觉比较有意思我们考虑在DP转移的时候, $5,7,9$这三个数是没有限制的因此他们出现的次数用01串表示的话就是$1111111111111111......$ $3 ...
DB2查看表空间和增加表空间容量
Db2 connect to xxx Db2 “LIST TABLESPACES SHOW DETAIL” Tablespace ID = 7 Name = TSASNAA Type = Databa ...
MDL的一些理解
驱动程序要操作一个用户模式下的内存(32位下小于2G),那么是有风险的,因为用户模式下当前进程的线程不断切换,用户模式下的地址可能会无效.这时的操作将会有未知结果. 用MDL系统API可以将用户模式下 ...
结构化编程-Structured programming
结构话编程强调的是对流程的控制: 它为面向过程编程提供天然的支持. Structured programming is a programming paradigm aimed at improvin ...
ZBrush中物体的显示与隐藏
在ZBrush®中除了遮罩功能可以对局部网格进行编辑外,通过显示和隐藏局部网格也可以对局部进行控制.选择网格的控制都是手动操作,在软件中并没有相应的命令进行操作.选择局部网格的工作原理也很简单,即被选 ...
css——overflow
Overflow:属性规定当前内容溢出元素框时发生的事情 1.当内容过多,元素框溢出 1)hidden:隐藏超出部分(overflow: hidden;) 2)auto:有下拉滚动条(overflow ...
用于构建 RESTful Web 服务的多层架构
作者:Bruce Sun, Java 架构师, IBM 出处:http://www.ibm.com/developerworks/cn/web/wa-aj-multitier/ 用于构建 RESTfu ...
s5k4ba摄像头驱动分析
注释: 本驱动是基于S5PV310的,但是全天下的摄像头驱动都是采用V4L2,因此驱动框架流程基本差不多.其中fimc_init_camera()函数会回调.init函数,该函数主要就是通过IIC总线 ...

jq操作属性，元素，样式，事件

jq操作属性，元素，样式，事件的更多相关文章

随机推荐

热门专题