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. tab标签页（选项卡）插件

    <body style="margin: 50px;"> <ul id="nav" class="nav nav-tabs" ...

  2. 基于jQuery的楼层案例

    ~(function() { var flag = true; //点击切换效果 $(".oDR7_asideItem:not(:first)").click(function() ...

  3. [USACO08JAN]电话线Telephone Lines(分层图)/洛谷P1948

    这道题其实是分层图,但和裸的分层图不太一样.因为它只要求路径总权值为路径上最大一条路径的权值,但仔细考虑,这同时也满足一个贪心的性质,那就是当你每次用路径总权值小的方案来更新,那么可以保证新的路径权值 ...

  4. C 字符/字符串经常使用函数

    string.h中经常使用函数 char * strchr(char * str ,char ch); 从字符串str中查找首次出现字符ch的位置,若存在返回查找后的地址.若不存在则返回NULL vo ...

  5. 1.1 Introduction中 Producers官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Producers 生产者(Producers) Producers publish ...

  6. json问题小结

    json 键值对增加.删除 obj.key='value'; // obj.key=obj[key]=eval("obj."+key); delete obj.key; vue中新 ...

  7. hdu5389

    题意:给你n个人每一个人手里有一个id,然后给你两个数a和b.让你把n个人分为两组.条件是 一组人手里的id和等于a 另一组人的id和等于b,这里的和是指加起来之后对9取余,假设sum等于0 则sum ...

  8. js进阶 14-1 jquery的ajax系列中的load方法的作用是什么

    js进阶 14-1 jquery的ajax系列中的load方法的作用是什么 一.总结 一句话总结:jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法. 1.load函 ...

  9. Storm新特性之Flux

    Storm新特性之Flux Flux是Storm版本号0.10.0中的新组件,主要目的是为了方便拓扑的开发与部署.原先在开发Storm拓扑的时候整个拓扑的结构都是硬编码写在代码中的,当要对其进行改动时 ...

  10. 使用BeautifulSoup爬取“0daydown”站点的信息（2）——字符编码问题解决

    上篇中的程序实现了抓取0daydown最新的10页信息.输出是直接输出到控制台里面.再次改进代码时我准备把它们写入到一个TXT文档中.这是问题就出来了. 最初我的代码例如以下: #-*- coding ...