jquery 读书笔记

时间  2019-11-15
标签 jquery 读书 笔记 栏目 JQuery 繁體版
原文   原文链接

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

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

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

<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()：保留匹配元素，清空内容html

怎样修改样式java

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

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

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

//如何获取table的行和列ajax

<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:“ 取得一个包含匹配的元素集合中每个元素的全部惟一同辈元素的元素集合。能够用可选的表达式进行筛选。”api

<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的统计元素有一、二、三、四、包含五、6的li。符合[data-type=0]的只有三、包含五、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、基本选择器

  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');
});

2、 层次选择器

  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>

3、 过滤选择器

  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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程