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. CF1009F Dominant Indices(树上DSU/长链剖分)

    题目大意: 就是给你一棵以1为根的树,询问每一个节点的子树内节点数最多的深度(相对于这个子树根而言)若有多解,输出最小的. 解题思路: 这道题用树链剖分,两种思路: 1.树上DSU 首先想一下最暴力的 ...

  2. 初学WCF需要注意的地方

    1.WCF的元数据发布有两种方式: a.HTTP-GET方式发布数据:让客户端使用HTTP-GET方式来获取数据是比较常见的方式.所谓HTTP—GET方式,是指当客户端发送一个HTTP-GET请求时, ...

  3. SVN和Git代码管理小结

    SVN和Git代码管理小结  之前,先用的是SVN,后来用了Git,最近又在用SVN.  关于代码管理,写几句.    由于自己参与的项目,人通常不超过10个人,版本不是很多,协作比较正常,感觉SVN ...

  4. 【hdu 6181】Two Paths

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6181 [题意] 让你求从1到n的次短路 [题解] 模板题; 因为点可以重复走; 则一定会有次短路. di ...

  5. Spring学习总结（5）——IOC注入方式总结

    一.构造注入 在类被实例化的时候,它的构造方法被调用并且只能调用一次.所以它被用于类的初始化操作.<constructor-arg>是<bean>标签的子标签.通过其<v ...

  6. js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化

    js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化 一.总结 一句话总结:如果用ajax传递表单的数据,如果不进行表单的序列化,要一个参数一个参数的写,太麻烦,序列化的话,一句代 ...

  7. RPC调用框架比较分析--转载

    原文地址:http://itindex.net/detail/52530-rpc-%E6%A1%86%E6%9E%B6-%E5%88%86%E6%9E%90 什么是RPC: RPC(Remote Pr ...

  8. ASM学习笔记--ASM 4 user guide 第一章翻译

    ASM是什么? 借用别人的话 :ASM 是一个 Java 字节码操控框架.它能被用来动态生成类或者增强既有类的功能. ASM 可以直接产生二进制 class 文件,也可以在类被加载入 Java 虚拟机 ...

  9. WCF REST (一)

    最近工作中学习使用了WCF REST,REST 有很多好处 高效 简约  面向资源  而客户端调用 也变得非常简单.REST 入门的资料等 大家可以去网上找 这里主要分享下遇到的问题以及解决~ 一.环 ...

  10. Dcloud课程3 什么是HBuilder和MUI

    Dcloud课程3  什么是HBuilder和MUI 一.总结 一句话总结:DCloud(数字天堂)推出一款支持HTML5的Web开发IDE.最大的特点是快.MUI是高性能App的框架,也是目前最接近 ...