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. JS实现文件另存为

    JS实现文件另存为 //下载平面图 function downPlan() { var oPop = window.open(src, "", "width=1, hei ...

  2. POJ 3220 Jessica's Reading Problem

    Jessica's Reading Problem Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12944   Accep ...

  3. 关于img标签的探讨

    关于img标签的探讨:一直以来img属于那一种标签受到困惑,因为它既有块元素的特性也有行内元素的属性.它独占一行,也可以设置宽高. 在此重新学习一下标签元素的分类;html元素的分类:块元素.内联元素 ...

  4. php基础篇之一

    1.PHP是什么 官方文档:超文本预处理器 2.PHP能够做一些什么? PHP主要应用在一下领域: (1)服务器端脚本,需要:PHP解析器,PHP服务器,PHP浏览器. (2)命令行脚本,只需要PHP ...

  5. 【例7-15 UVA-1603】Square Destroyer

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 先预处理出所有的正方形(长度为1,2...n的)所包含哪些边. 然后记录每个正方形的应有边长和实际边长(有些边被删掉了); 然后搜的 ...

  6. ubuntu-系统密匙

    1.安装虚拟机xp,需要密匙,网上搜了一个,验证能用 MRX3F-47B9T-2487J-KWKMF-RPWBY 2.安装vm也需要密匙,如下可用 HC6JC-FPJ4M-RZM61-48852-2A ...

  7. shell脚本中的反引号，单引号，双引号与反斜杠

    转自:http://blog.sina.com.cn/s/blog_6561ca8c0102we2i.html 反引号位 (`)经常被忽略,而且容易与单引号弄混.它位于键盘的Tab键的上方.1键的左方 ...

  8. Java Web学习总结（6）——通过Servlet生成验证码图片

    一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下: 创建一个DrawImage Servlet,用来生成验证码图片 package gacl.res ...

  9. Codeforces_GYM_100741 A

    http://codeforces.com/gym/100741/problem/A A. Queries time limit per test 0.25 seconds memory limit ...

  10. HTTP网络协议(一）

    1.了解Web及网络基础 TCP/IP协议族按层次可以分为下面四层: 应用层:决定了向用户提供应用服务时通信的活动,TCP/IP协议族内预存了各类通用的应用服务,比如:FTP(文件传输协议)和DNS( ...