操作属性：

　　单个　　$('选择器').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操作属性，元素，样式，事件的更多相关文章

  1. 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操作盒 ...

  2. JQ 为未来元素添加事件处理器—事件委托

    随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供 ...

  3. JQuery操作属性、样式、风格(attr、class、css)

    样式操作 <p class="myclass" title="选择喜欢的水果">你最喜欢的水果是?</p> 在上面代码中,class也是 ...

  4. 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,

    HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...

  5. 4月12日学习笔记——jQuery操作属性和样式

    区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus ...

  6. jq ‘’操作‘’伪元素

    1. 伪元素非 dom 元素,jq无法操作,但可以间接影响. 2. 操作方式 2.1 修改类 <!DOCTYPE html> <html lang="en"> ...

  7. jQuery操作属性和样式详解

    我们可以使用 javascript 中的getAttribute和setAttribute来操作元素的"元素属性".在 jQuery 中给你提供了attr()包装集函数, 能够同时 ...

  8. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  9. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

随机推荐

  1. HIT Software Construction Lab 3

    ​ 2019年春季学期 计算机学院<软件构造>课程 Lab 3实验报告 姓名 刘帅 学号 班号 1703008 电子邮件 1609192321@qq.com 手机号码 目录 1 实验目标概 ...

  2. zset 有序集合

    zadd key score1 value1 score2 value2 .. 添加元素 redis 127.0.0.1:6379> zadd stu 18 lily 19 hmm 20 lil ...

  3. Java之NoSuchMethodError

    Java之NoSuchMethodError 最近生产环境出现的一个问题,NoSuchMethodError,之前遇到过,大概明白就是方法冲突.这里总结一下,以备学习之用. 错误代码如下: 2018- ...

  4. SQL学习——小结练习（1）

    到处淘来的SQL题 1. 用一条SQL 语句 查询出每门课都大于80 分的学生姓名 name   kecheng   fenshu 张三     语文       81张三     数学       ...

  5. Golden Gate 概述

    概述: 是什么?Oracle GoldenGate 提供异构环境间事务数据的实时.低影响的捕获.路由.转换和交付. 非侵入: 不建触发器,不建中间表,无需增量标记或时间戳字段 不在源表上进行数据查询 ...

  6. day12 字符编码

    计算机基础 启动应用程序 双击QQ 操作系统接受指令然后把该操作转化成0和1发送给CPU CPU接受指令然后把指令发送给内存 内存接受指令把指令发送给硬盘读取数据 QQ在内存中运行 写文本的流程 在记 ...

  7. vue 过滤器使用的传参说明

    在table中,需要对obj的数据类型进行文字转换,例如后台接口返回的姓别值:1,2.其中需要页面根据字典需要把1=>男,2=>女进行转换. 以前的习惯是每一个过滤方法都写一个方法进行转换 ...

  8. zoj 3471 Most Powerful（状压dp+Tsp问题+连续性问题）

    上来直接一波敲键盘,直接套Tsp问题的代码 然后WA 发现貌似这道题没有连续性. Tsp问题是一条路径,一个点到另一个点,多了一个限制,所以就需要加多一维 而这道题没有限制,也就是说那一维不需要加,我 ...

  9. Javascript的jsonp原理

    Javascript的jsonp原理   首先JSON是一种基于文本的数据交换方式,或者叫做数据描述格式 当一个网页在请求JavaScript文件时则不受是否跨域的影响,凡是拥有”src”这个属性的标 ...

  10. jquery获得url的get参数

    只是用了第一种方法,简单好用直接传入想要获取的参数名,即可返回参数值 function GetQueryString(name) {      var reg = new RegExp("( ...