jquery 读书笔记

645 查看

.insertAfter(selector)//将指定的选择器内容加到元素的后面。

 <script type="text/javascript">
    $(document).ready(function(){ 
        $('.b1').click(function() {
           $('#d').insertAfter('#d2')
        });
        $('.b3').click(function() {
           $('#d').appendTo('#d2')//和insertAfter一样
        });
    })

.after(text)//将指定的text文本加到选择器的后面。

 <script type="text/javascript">
    $(document).ready(function(){ 
         $('.b2').click(function() {
           $('#d').after('the text need to be added after AAAAAAAAAAAAAAA')
        });
     })

$('#d').remove()&$('#d').empty()
$('#d').remove()：用来删除匹配元素和其内容
$('#d').empty()：保留匹配元素，清空内容

怎样修改样式

<div id='d' style='color:red;font-size:50px;'>AAAAAAAAAAAAAAAA</div>
$('#d').css('color','blue');

jquery dom加载完之后 执行回调函数

 <script type="text/javascript">
   jQuery(function(){
       alert(jQuery('p').text())//jquery一加载完，马上执行回调函数
   })

//如何获取table的行和列

   <table border='1px' cellspacing="0px" cellpadding="0px">
       <tr>
           <td>content of the first line</td>
           <td>content of the second line</td>
       </tr>
       <tr>
           <td>content of the third line</td>
           <td>content of the fourth line</td>
       </tr>
   </table>

 <script type="text/javascript">
      var str = $('table').find('tr').eq(0).text()//获取第一行
      var str2 = $('table').find('tr').eq(0).find('td').eq(0).text()//获取第一行的第一列
      console.log(str)
      console.log(str2)
    </script>

jquery中如何获取窗口的值

<table border='1px' cellspacing="0px" cellpadding="0px">
        <tr>
            <td>content of the first line</td>
            <td>content of the second line</td>
        </tr>
        <tr>
            <td>content of the third line</td>
            <td>content of the fourth line</td>
        </tr>
    </table>
    
    <script type="text/javascript">
    console.log($(window).height()); //浏览器当前窗口可视区域高度 
    console.log($(document).height()); //浏览器当前窗口文档的高度 
    console.log($(document.body).height()); //浏览器当前窗口文档body的高度 
    console.log($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding margin 
    console.log($(window).width()); //浏览器当前窗口可视区域宽度 
    console.log($(document).width()); //浏览器当前窗口文档对象宽度 
    console.log($(document.body).width()); //浏览器当前窗口文档body的高度 
    console.log($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin
</script>

.siblings:“ 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。”

 <ul id='dd'>
        <li data-type='3'>1</li>
        <li data-type='1'>2</li>
        <li data-type='0'>3</li>
        <li data-type='1'>4</li>
        <li data-type='0'>
            <ul>
                <li data-type='0'>5</li>
                <li data-type='0'>6</li>
            </ul>
        </li>
    </ul>
    
$('ul#dd li[data-type=3]').siblings('li[data-type=0]')//返回li 3,和包含5,6的li，不直接包含 5,6
$('ul#dd li[data-type=3]')返回的包装集合为ul#dd下所有li[data-type=3]元素,此时集合中只有一个元素li 1.
对li中的每一个li元素查找同级元素,并且每个li元素必须要具有data-type属性并且值为0
li 1的统计元素有1、2、3、4、包含5、6的li。符合[data-type=0]的只有3、包含5、6的li.

.bind

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
           $("button").bind("click",function(){
               $("p").slideToggle()
           })
       })
    </script>
</head>
<body>
 <p>This is the contents</p>
 <button type="button">button</button>
</body>
</html>

.click

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
           $("p").click(function(){
               $(this).hide()
           })
       })
    </script>
</head>
<body>
 <p>This is the contents</p>
</body>
</html>

$(body *)
选择 <body> 内的所有元素：

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $("body *").css('background-color','red')
      })
    </script>
</head>
<body>
 <p>This is the contents</p>
 <span>This is span</span>
</body>
</html>

element(元素) 选择器选取带有指定标签名的元素。

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $("p").css('font-size','100px')
      })
    </script>
</head>
<body>
 <p>This is the contents</p>
 <span>This is span</span>
</body>
</html>

jquery-ajax
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         $("#btn").click(function(){
             $("#id1").load("data.txt")
         })
      })
    </script>
</head>
<body>
 <p id="id1">This is the contents</p>
 <button type="button" id="btn">button</button>
</body>
</html>

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

XMLHttpRequest 对象用于和服务器交换数据。
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(string)

将请求发送到服务器。

string：仅用于 POST 请求

GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

AJAX GET 请求

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
    <script type="text/javascript">
      function loa(){
          var HttpXml;
          if(window.XMLHttpRequest){
            HttpXml = new XMLHttpRequest();
          }else{
            HttpXml = new ActiveXObject('Microsoft.XMLHTTP')
          }
          HttpXml.onreadystatechange = function(){
              if(HttpXml.readyState ==4&&HttpXml.status ==200){
                  document.getElementById("div1").innerHTML= HttpXml.responseText;
              }
          }
          HttpXml.open("Get","data.txt",true)
          HttpXml.send()
      }
    </script>
</head>
<body>
 <button type="button" onclick="loa()">button</button>
 <div id="div1"></div>
</body>
</html>

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
注释：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
responseText 获得字符串形式的响应数据。
onreadystatechange 事件
存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: "OK"
404: 未找到页面

使用 Callback 函数
callback 函数是一种以参数形式传递给另一个函数的函数。

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
    <script type="text/javascript">
          var HttpXml;
        function loa(url,cfunc){//回调函数，将函数作为参数传递
          if(window.XMLHttpRequest){
            HttpXml = new XMLHttpRequest();
          }else{
            HttpXml = new ActiveXObject('Microsoft.XMLHTTP')
          }
          HttpXml.onreadystatechange = cfunc;
          HttpXml.open("post",url,true)
          HttpXml.send()    
      }
      function myFunc(){
          loa('data.txt',function(){
            if(HttpXml.readyState ==4&&HttpXml.status ==200){
                  document.getElementById("div1").innerHTML= HttpXml.responseText;
              }    
          })         
      }
    </script>
</head>
<body>
 <button type="button" onclick="myFunc()">button</button>
 <div id="div1"></div>
</body>
</html>

jquery选择器
一、基本选择器

  1. id选择器（指定id元素）

将id="one"的元素背景色设置为黑色。（id选择器返单个元素）

$(document).ready(function () {

    $('#one').css('background', '#000');
});

  1. class选择器（遍历css类元素）

将class="cube"的元素背景色设为黑色

$(document).ready(function () {

    $('.cube').css('background', '#000');
});

  1. element选择器（遍历html元素）

将p元素的文字大小设置为12px

$(document).ready(function () {

    $('p').css('font-size', '12px');
});

    • 选择器（遍历所有元素）

$(document).ready(function () {

    // 遍历form下的所有元素，将字体颜色设置为红色
    $('form *').css('color', '#FF0000');
});

  1. 并列选择器

$(document).ready(function () {

    // 将p元素和div元素的margin设为0
    $('p, div').css('margin', '0');
});

二、 层次选择器

  1. parent > child（直系子元素）

$(document).ready(function () {

    // 选取div下的第一代span元素，将字体颜色设为红色
    $('div > span').css('color', '#FF0000');
});

下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。

<div>

    <span>123</span>
    <p>
        <span>456</span>
    </p>

</div>

  1. prev + next（下一个兄弟元素，等同于next()方法）

$(document).ready(function () {

// 选取class为item的下一个div兄弟元素
$('.item + div').css('color', '#FF0000');
// 等价代码
//$('.item').next('div').css('color', '#FF0000');

});

下面的代码，只有123和789会变色


<div>123</div>
<div>456</div>
<span class="item"></span>
<div>789</div>

  1. prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）

$(document).ready(function () {

// 选取class为inside之后的所有div兄弟元素
$('.inside ~ div').css('color', '#FF0000');
// 等价代码
//$('.inside').nextAll('div').css('color', '#FF0000');

});

下面的代码，G2和G4会变色

<div class="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</div>

三、 过滤选择器

  1. 基本过滤选择器

——1.1 :first和:last（取第一个元素或最后一个元素）

$(document).ready(function () {

        $('span:first').css('color', '#FF0000');
        $('span:last').css('color', '#FF0000');
    });

下面的代码，G1（first元素）和G3（last元素）会变色

<span>G1</span>
<span>G2</span>
<span>G3</span>

——1.2 :not（取非元素）

$(document).ready(function () {

        $('div:not(.wrap)').css('color', '#FF0000');
    });

下面的代码，G1会变色

<div>G1</div>
<div class="wrap">G2</div>

但是，请注意下面的代码：

<div>

G1
<div class="wrap">G2</div>

</div>

当G1所在div和G2所在div是父子关系时，G1和G2都会变色。

——1.3 :even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）

$(document).ready(function () {

        $('tr:even').css('background', '#EEE'); // 偶数行颜色
        $('tr:odd').css('background', '#DADADA'); // 奇数行颜色
    });

A、C行颜色#EEE（第一行的索引为0），B、D行颜色#DADADA

image

A
B
C
D

——1.4 :eq(x) （取指定索引的元素）

image

$(document).ready(function () {

        $('tr:eq(2)').css('background', '#FF0000');
    });

更改第三行的背景色，在上面的代码中C的背景会变色。

——1.5 :gt(x)和:lt(x)（取大于x索引或小于x索引的元素）

$(document).ready(function () {

        $('ul li:gt(2)').css('color', '#FF0000');
        $('ul li:lt(2)').css('color', '#0000FF');
    });

L4和L5会是红色，L1和L2会是蓝色，L3是默认颜色

image

<ul>

<li>L1</li>
<li>L2</li>
<li>L3</li>
<li>L4</li>
<li>L5</li>

</ul>

——1.6 :header（取H1~H6标题元素）

$(document).ready(function () {

        $(':header').css('background', '#EFEFEF');
    });

下面的代码，H1~H6的背景色都会变

image

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

  1. 内容过滤选择器

——2.1 :contains(text)（取包含text文本的元素）

$(document).ready(function () {

        // dd元素中包含"jQuery"文本的会变色
        $('dd:contains("jQuery")').css('color', '#FF0000');
    });

下面的代码，第一个dd会变色

image

<dl>

<dt>技术</dt>
<dd>jQuery, .NET, CLR</dd>
<dt>SEO</dt>
<dd>关键字排名</dd>
<dt>其他</dt>
<dd></dd>

</dl>

——2.2 :empty（取不包含子元素或文本为空的元素）

$(document).ready(function () {

        $('dd:empty').html('没有内容');

});

image

上面第三个dd会显示"没有内容"文本

——2.3 :has(selector)（取选择器匹配的元素）

$(document).ready(function () {

        // 为包含span元素的div添加边框
        $('div:has(span)').css('border', '1px solid #000');
    });

即使span不是div的直系子元素，也会生效

image

<div>

<h2>
    A
    <span>B</span>
</h2>

</div>

——2.4 :parent（取包含子元素或文本的元素）

$(document).ready(function () {

        $('ol li:parent').css('border', '1px solid #000');
    });

下面的代码，A和D所在的li会有边框

image

<ol>

<li></li>
<li>A</li>
<li></li>
<li>D</li>

</ol>

  1. 可见性过滤选择器

——3.1 :hidden（取不可见的元素）

jQuery至1.3.2之后的:hidden选择器仅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。

参照：http://www.jquerysdk.com/api/hidden-selector

下面的代码，先弹出"hello"对话框，然后hid-1会显示，hid-2仍然是不可见的。

image

<html xmlns="http://www.w3.org/1999/xhtml&quot; >
<head runat="server">

<title></title>
<style type="text/css">
    div
    {
        margin: 10px;
        width: 200px;
        height: 40px;
        border: 1px solid #FF0000;
        display:block;
    }
    .hid-1
    {
        display: none;
    }
    .hid-2
    {
        visibility: hidden;
    }
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('div:hidden').show(500);
        alert($('input:hidden').val());
    });
</script>

</head>
<body>

<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>

</body>
</html>

——3.2 :visible（取可见的元素）

下面的代码，最后一个div会有背景色

image

<script type="text/javascript">

$(document).ready(function() {
    $('div:visible').css('background', '#EEADBB');
});

</script>
<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>
<div>

jQuery选择器大全

</div>

  1. 属性过滤选择器

——4.1 [attribute]（取拥有attribute属性的元素）

下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线

image

<script type="text/javascript">

    $(document).ready(function() {
        $('a[title]').css('text-decoration', 'none');
   });
</script>       
<ul>
    <li><a href="#" title="DOM对象和jQuery对象" class="item">DOM对象和jQuery对象</a></li>
    <li><a href="#" title="jQuery选择器大全" class="item-selected">jQuery选择器大全</a></li>
    <li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
    <li><a href="#" title="基于jQuery的插件开发" class="item">基于jQuery的插件开发</a></li>
    <li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
    <li><a href="#" class="item">其他</a></li>
</ul>

——4.2 [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）

分别为class="item"和class!=item的a标签指定文字颜色

image


最近更新的内容
你可能感兴趣的文章

2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123

渝公网安备 50010702501581号