jquery-6 jquery属性选择器

一、总结

一句话总结：jquery操作就是选择器加jquery对象的各种方法。

1、大量操作样式用什么方式？

大批量样式通过加类和减类完成

2、jquery中大量属性值设置用什么方式？

推荐json

$().css({})

3、如何将一个input文本的值赋给另一个input文本？

找到两个input，然后用val()方法

31     val=$('input').eq(0).val();

32

33     $('input').eq(1).val(val);

4、如何将一个标签里面的其它标签都赋值给另外标签？

用html()方法

31 $('button').click(function(){

32     val=$('.d1').html();

33     $('.d2').html(val);

34 });

5、如何给元素增加一个类？

addClass()方法

27 $('img').mouseenter(function(){

28     $(this).addClass('img');

29 });

二、jquery属性选择器

1、相关知识

属性:
1.属性
attr();
attr({});

2.CSS类
addClass();
removeClass();
toggleClass();

3.HTML代码
html();
html(val);

4.文本
text();
text(val);

5.值
val();
val(val);

2、代码

val表单元素获取和赋值

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         .d1,.d2{

             height:300px;

             background: #ccc;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <p>

         <input type="text">

     </p>

     <p>

         <button>>></button>

     </p>

     <p>

         <input type="text">

     </p>

 </body>

 <script>

 $('button').click(function(){

     val=$('input').eq(0).val();

     $('input').eq(1).val(val);

 });

 </script>

 </html>

html取值和赋值

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         .d1,.d2{

             height:300px;

             background: #ccc;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <div class='d1'>

         <img src="a.png">

         <img src="a.png">

         <img src="a.png">

         <img src="a.png">

     </div>

     <button>>></button>

     <div class="d2">

     </div>

 </body>

 <script>

 $('button').click(function(){

     val=$('.d1').html();

     $('.d2').html(val);

 });

 </script>

 </html>

toggleClass切换类

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         .div1{

             background: #ccc;

             cursor: pointer;

         }

         .img{

             background:#ccc;

             border-radius:256px;

             transform:scale(1.2,1.2);

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <img src="a.png">

 </body>

 <script>

 $('img').mouseenter(function(){

     $(this).toggleClass('img');

 });

 $('img').mouseleave(function(){

     $(this).toggleClass('img');

 });

 </script>

 </html>

attr获取属性值

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         .div1{

             background: #ccc;

             cursor: pointer;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <img src="a.png">

 </body>

 <script>

 $('img').click(function(){

     alert($(this).attr('src'));

 });

 </script>

 </html>
 
 

jquery-6 jquery属性选择器的更多相关文章

  1. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  2. js进阶 10-6 jquery中的属性选择器有哪些

    js进阶 10-6 jquery中的属性选择器有哪些 一.总结 一句话总结: 1.第一遍能学会么? 一遍是肯定学不会的,要多学几遍,所以想着怎么加快速度,减少学习的遍数 2.属性选择器是干嘛的? 选择 ...

  3. jQuery选择器之属性选择器Demo

    测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  4. jquery表单对象属性选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jquery选择器之属性选择器

    [attribute]   匹配指定属性名的所有元素 [attribute=value] 匹配给定的属性名是某个特定值的属性 [attribute!=value] 匹配给定的属性名不是某个特定值的属性 ...

  6. jquery的一些属性选择器

    td:contains(Henry)选择td里面所有class为Henry的元素 .siblings()选择相同dom层次的所有其他元素,例如 <ul> <li>第一个< ...

  7. jQuery中的属性选择器

    先看代码,后面详细解释: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  9. jquery属性选择器（同时匹配多个条件）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. jquery属性选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. IIS6下AD域设置

    简介:IIS6下AD域设置 IIS6下AD域设置 http://files.cnblogs.com/files/KingUp/AD%E5%9F%9F%E8%AE%BE%E7%BD%AE.rar

  2. 体验SUSE （附视频演示）

    操作动画演示 本文出自 "李晨光原创技术博客" 博客,谢绝转载!

  3. iTOP-4412 nfs文件系统启动

    kernel command line type: 普通文件系统(本地)启动:root=/dev/mmcblk0p2 rootfstype=ext4 init=/linuxrc console=tty ...

  4. 将二级目录下的文件合并成一个文件的Python小脚本

    这个小程序的目的是将二级目录下的文件全部合并成一个文件(其实几级目录都可以,只要做少许改动) #coding:utf8 import sys, os def process(path): new_fi ...

  5. windows下使用cpanm进行模块安装

    windows下使用cpanm进行模块安装 要放假了,突然想整理一下手头上的软件,突然发现perl的安装模块这个功能不能用. 弄了一下,使得windows 下 perl 的 cpanm能用,避免成天为 ...

  6. 82.管道实现cgi内存多线程查询

    总体思路就是客户端写入要查询的数据到管道中,服务器端从管道读取,然后写入随机文件,再把文件名写入管道,然后客户端再读取文件 服务器端 设置缓冲区大写,设置管道名字,以及标识有多少个线程等 //设置缓存 ...

  7. PythonServer

    服务器模型 硬件服务器 主机.集群 厂商:IBM.HP.联想.浪潮 软件服务器:编写的服务端应用程序,在硬件服务器上运行,一般依托于操作系统,给用户提供一套完整的服务 httpserver:处理htt ...

  8. 【前端切图】用css画一个卡通形象-小猪佩奇

    最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...

  9. ECMall 25个 数据库表 说明文档

    ecm_acategory //文章分类表 字段 类型 Null 默认 注释 cate_id int(10) 否   自增ID号,分类ID号 cate_name varchar(100) 否   分类 ...

  10. [Angular] Http Custom Headers and RequestOptions

    updatePassenger(passenger: Passenger): Observable<Passenger> { let headers = new Headers({ 'Co ...