一、对元素内容和值进行操作

1、对元素内容操作

【text()】:获取值。

【text(val)】:获取并修改值。

【html()】:获取值。

【html(val)】:获取并修改值,与text的区别在于它可以识别出里面的html标签,而text会将html标签当做字符串输出。

<div>
        <div class='new'>让我们通过两种方法来获取这个div的值</div>
    </div>
$(document).ready(function(){
    var a=$('.new').text();//a-->让我们通过两种方法来获取这个div的值
    console.log('a-->'+a);
    var b=$('.new').html();//b-->让我们通过两种方法来获取这个div的值
    console.log('b-->'+b);
    $('.new').html('<span style="color:red">新的值</span>');//会将值修改为红色的,新的值
})

2、对元素值进行操作

【val()】:获取第一个匹配元素的当前值,返回一个字符串或数组。

【val(val)】:设置所有的匹配元素的值。

【val(arrVal)】:用于为check、select、radio等元素设置值。参数为字符串数组。

例题:一个列表框,原本第一项和第二项被选中,现在要求将第一项和第三项设为选中状态。

<select multiple id='choose'>
            <option selected>第一项</option>
            <option selected>第二项</option>
            <option >第3项</option>
        </select>
$(document).ready(function(){
    $('#choose').val(['第一项','第3项']);
    var a=$('#choose').val();
    console.log('a-->'+a);//a-->第一项,第3项
})

效果图:

二、对DOM节点进行操作

1、查找节点——jQuery的选择器

2、创建节点

创建节点两步走,先创元素后插入,三种方法可选择。

$(document).ready(function(){
    //第一种方法创建元素
    var $p1=$("<p></p>");
    $p1.html('<h3>第一种方法创建节点</h3>');
    $('.new').append($p1);
    //第二种方法创建节点
    var $p2=$('<span>第二种方法创建节点</span>');
    $('.new').append($p2);
    //第三种方法创建节点
    $('.new').append('<span>第三种方法创建元素</span>')
})

3、插入节点

(1)在元素内部插入

【dom.append(content)】:会在dom的后面加上content集合。

【appendTo(content)】:

【dom.prepend(content)】:是将content集合放在dom的前面。

【prependTo(content)】

 <div class="new">
        <p id='p1'>P1</p>
        <p id='p2'>p2</p>
        <p id='p3'>p3</p>
        <p id='p4'>p4</p>
    </div>

-

append方法,在前者中添加一个后者,后者前者的后面。不同级别的,是包含关系。

$(document).ready(function(){
    //第一种方法创建元素
    var $p=$("<p></p>");
    $p.html('<h3>我新创建了一个元素</h3>');
    $('.new').append($p);//p1,p2,p3,p4,我新创建了一个元素

})

-

appendTo方法,将前者放在后者的后面,同级别的。

$(document).ready(function(){
    $('#p2').appendTo($('#p4')); //p1,p3,p4,p2
})

-

(2)在元素外部插入

【dom.insertAfter(content)】:把dom节点插入在content集合的后面。

【dom.insertBefore(content)】:把dom节点插入在content集合的前面。

3、删除、复制与替换节点

-

删除有两种方法,empty和remove,前者指删除子节点,不删除该元素,后者全部删除。

$(document).ready(function(){
    $('#p1').empty();//只删除子节点,不删除自己
    $('#p2').remove();//全部毁灭,包括自己
})

-

复制节点,clone方法,该方法有两种形式,带参数和不带参数。不带参数,克隆并选中。带参数,是否克隆事件并选中。

$('input').bind('click',function(){
       $(this).clone().insertAfter(this);//只复制input元素,不复制其方法
   })

-

替换节点有两种方法,replaceAll(selector)和replaceWith(content)。

前者是将匹配元素合集替换成selector匹配的元素。

后者是将匹配元素合集替换成指定的HTML或dom元素。

(〃´-ω・)    两者其实就是顺序的不同。这让我不得不感叹,语言,无论是英语还是中文,还都挺有意思的。   (〃´-ω・)

$(document).ready(function(){
   $('.new1').replaceWith('将前者替换为后者');
   $("<div>其实就是顺序的不同</div>").replaceAll('.new2');
})

-

例题,点击按钮,获取不同的图片。其实这里修改节点图片的方法,完全也可以用替换的方法来代替,比删除后再插入更省事一点。

还有,img是行内元素。别再忘了!

<div name='例题'>
            <h4>例题-南硕恋爱史</h4>
            <div id='bg'>
                <div>这里是bg下面的第一个子节点</div>
                <input type='button' value='单身俊' id='Jun'>
                <input type='button' value='单身珍' id='Jin'>
                <input type='button' value='恋爱' id='love'>
                <input type='button' value='结婚' id='marry'>
            </div>
        </div>
//南硕恋爱史
$(document).ready(function () {
    $('#Jun').bind('click', function () {
        $('img').remove();
        $('#bg').prepend('<img src="./单身金南俊.jpg"  />');
        //应该是在bg前面插入图片,也就是在第一个子节点前面插入图片
    })
    $('#Jin').bind('click', function () {
        $('img').remove();//删除节点,是将自己全都毁灭
        $('#bg').append('<img src="./单身金硕珍.jpg">');
        //在bg后面插入图片,应该是在第一个子节点后面插入图片
    })
    $('#love').bind('click', function () {
        $('img').remove();
        $('#bg').append('<img src="./相遇开始恋爱.jpg" />');
    })
    $('#marry').bind('click', function () {
        $('img').remove();
        $('#bg').append('<img src="./最后终于结婚.jpg"/>');
    })
})

效果图:

-

三、对元素属性操作

【attr(key)】:获取属性,无值的时候返回undefined。

【attr(key,value)】:为匹配的元素合集设置一个属性值。

【attr(key,fn)】:为匹配元素合集设置一个函数返回的属性值。

【attr({名:值,名:值})】:添加批量属性。

【removeAtrr(name)】:为匹配元素合集删除一个属性。

例题:全选,反选,全不选的操作实现。

<div>
                <!-- 初始化并未定义选择框已选属性 -->
                <p>
                    <input type="checkbox" name="checkbox" value="checkbox">上网
                    <input type="checkbox" name="checkbox" value="checkbox">唱歌
                    <input type="checkbox" name="checkbox" value="checkbox">跳舞
                </p>

                <p>
                    <input type="checkbox" name="checkbox" value="checkbox">书法
                    <input type="checkbox" name="checkbox" value="checkbox">漫画
                    <input type="checkbox" name="checkbox" value="checkbox">PS
                </p>
                <input type='button' value='全选' name='checkAll' id='checkAll'>
                <input type='button' value='全不选' name='noCheck' id='noCheck'>
                <input type='button' value='反选' name='reverse' id='reverse'>
            </div>
//例题4,这里以自执行函数的方式让该方法可行
$(function () {
    //为全选按钮绑定全选事件
    $('#checkAll').bind('click',function(){
        $('[name=checkbox]:checkbox').attr('checked',true);
    });
    //为全不选按钮绑定取消所有选择事件
    $('#noCheck').click(function(){
        $('[name=checkbox]:checkbox').attr('checked',false);
    });

    //反选事件的设置
    $("#reverse").click(function () {
        //对每个复选框都进行判断
        $('[name=checkbox]:checkbox').each(function(){
            if($(this).attr('checked')){
                $(this).attr('checked',false);//将选中的改为不选中
            }else{
                $(this).attr('checked',true);//将不选中的改为选中
            }
        })
    })

})

四、对元素CSS样式操作

对元素样式进行操作有两种方法,一种是通过修改css的类,一种是通过修改css的属性。

通过修改css的类对元素样式进行操作:

【addClass(class)】:选中元素集合添加类。

【removeClass(class)】:选中元素集合删除类。

【toggleClass(class)】:对类进行相反操作。如果该元素存在类,就删除这个类;如果该元素不存在类,就添加这个类。toggle是切换的意思。

【toggleClass(class,switch)】:如果switch参数为true,则添加,否则删除。

例题:修改表单元素的css样式。

<div>
            <h4>例题5-修改表单元素样式</h4>
            <div>
                <form name='form1'>
                    姓名:<input type="text" id='name'>
                    <br/>
                    籍贯:<input type="text" id='name'>
                    <br/>
                    生日:<input type="text" id='name'>
                    <br/>
                    <input type='button' value='换肤' id='change'>
                    <input type='button' value='恢复默认' id='default'>
                </form>
            </div>
        </div>
/* 设置默认的input样式 */
input{
    margin:5px;
}
/* 为input添加的样式 */
.addInput{
font-size:12px;
color:#333;
background: plum;
border:1px solid #000;
}
//例题5
$(document).ready(function(){
    $('#change').click(function(){
        $("form>input").addClass('addInput');
    });
    $('#default').click(function(){
        $('form>input').removeClass('addInput')
    })
})

效果图:

通过修改css属性实现样式操作。

【css(name)】:返回第一个匹配元素的样式。

【css(name,value)】:为匹配元素合集指定样式属性。

【css({属性:值,属性,值})】:为匹配元素合集批量添加属性。

jQuery对页面的操作的更多相关文章

  1. jQuery的页面初始化操作写法

    $(document).ready(function(){ alert("第一种方法."); }); $(function(){ alert("第二种方法.") ...

  2. js进阶 11-1 jquery中的页面内容操作的三个方法

    jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...

  3. jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

  4. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  5. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

  6. JQuery 实现页面无刷新

    对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...

  7. Headroom.js – 快速响应用户的页面滚动操作

    Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...

  8. jquery.cookie中的操作

    http://w3school.com.cn/js/js_cookies.asp jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件,点击下载! 创建一 ...

  9. jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

随机推荐

  1. vue 新版本 webpack 代理 跨域设置

    旧版本中:dev-server.js 这段去掉 var apiRoutes = express.Router() //getList apiRoutes.get('/getDiscList', fun ...

  2. 小tips:node起一个简单服务,打开本地项目或文件浏览

    1.安装nodejs 2.在项目文件夹目录下创建一个js文件,命名server.js(自定义名称),内容如下 var http = require('http'); var fs = require( ...

  3. 关于Skyline沿对象画boundingbox的探讨

    先来说说为什么要搞这个?项目中经常遇到的一个操作就是选定对象,以前都是通过Tint设置对象颜色来标识选定对象,但是随着图层中模型增多,模型色彩丰富,会出现选定色与对象颜色对比不明显的情况.因为看到Te ...

  4. jupyter notebook安装、登录

    pip install jupyter 提示pip需要升级(本人装的是anaconda) 输入:python -m pip install --upgrade pip 安装完成. 运行jupyter ...

  5. Vue组件的is具体用法

    1.为什么要使用is 在vue的官网组件部分中,有明确的描述:当使用 DOM 作为模板时 (例如,使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上),你会受到 HTML 本身的一些限制,因 ...

  6. MySQL 使用Navicat连接MySQL8出现1251错误

    安装了MySQL8.x.x后使用Navicat连接总是出现1251错误,故在此记录一下解决方法. 错误提示 1251-Client does not support authentication pr ...

  7. C# 进程间通讯

    扩展阅读:http://www.cnblogs.com/joye-shen/archive/2012/06/16/2551864.html 一.进程间通讯的方式 1)共享内存 包括:内存映射文件,共享 ...

  8. reStructuredText文件语法简单学习

    reStructuredText 是一种扩展名为.rst的纯文本文件,通过特定的解释器,能够将文本中的内容输出为特定的格式 1. 章节标题 章节头部由下线(也可有上线)和包含标点的标题组合创建,其中下 ...

  9. Left Jion等价SQL猜想验证

    猜想:以下两条SQL等价 select * from A left join B on A.ID=B.BID and B.BName=N'小明' select * from A left join ( ...

  10. rpc接口调用以太坊智能合约

    rpc接口调用以太坊智能合约 传送门: 柏链项目学院   在以太坊摸爬滚打有些日子了,也遇到了各种各样的问题.这几天主要研究了一下如何通过rpc接口编译.部署和调用合约.也遇到了一些困难和问题,下面将 ...