东子破解的第一天

最新推荐文章于 2024-05-06 17:01:01 发布

IT静心修行

最新推荐文章于 2024-05-06 17:01:01 发布

阅读量5.1k

点赞数

文章标签：破解 input class jquery header table

此文章由kotlinvip拥有、微信号kotlinvip

本文链接：https://blog.csdn.net/vipyhd/article/details/7535640

版权

第一天：东子破解 Jquery.("选择器") 或者是$("选择器")
我们在美化斑马表格的时候我们有javascript 我们要写很多代码
可是我们用jquery的时候我们只是用：
$("table tr:nth-child{even}").addClass("striped");
第一个例子：
<input type="button" id="testButton">Click me</input>

在body里面写了
<script type="text/jsvascript">
window.οnlοad=function(){//作用是确定在操作按钮之前必须先确定按钮的元素的存在
document.getElementById("testButton").onClick=makeItRed;

}
function makeItRed(){
document.getElementById('xyz').style.color='red';

}

</script>
-----------------------------------------
现在我们开始讲Jquery的原理：就是为了分离。。。。。。呵呵

Jquery的包装器：

我们经常用到的基本选择器有一下几种：

.class选择器: 返回值:Array<Element>
一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。
eg:
查找所有类是 "myClass" 的元素.
代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>jQuery 代码:
$(".myClass");结果:
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

#id选择器 : 返回值:Array<Element>
用于搜索的，通过元素的 id 属性中给定的值
eg:
查找 ID 为"myDiv"的元素。

代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>jQuery 代码:
$("#myDiv");结果:
[ <div id="myDiv">id="myDiv"</div> ]

查找含有特殊字符的元素

HTML 代码:
<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>jQuery 代码:
#foo\\:bar
#foo\\[bar\\]
#foo\\.bar

element 返回值:Array<Element>
一个用于搜索的元素。指向 DOM 节点的标签名。
查找一个 DIV 元素。

EG:代码:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>jQuery 代码:
$("div");结果:
[ <div>DIV1</div>, <div>DIV2</div> ]

* 返回值:Array<Element(s)>
找到每一个元素

eg:
代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>jQuery 代码:
$("*")结果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

selector1,selector2,selectorN 返回值:Array<Element(s)>

将每一个选择器匹配到的元素合并后一起返回。

你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>jQuery 代码:
$("div,span,p.myClass")结果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

-----------------------------------------------------------------------------------------
层级选择器：
ancestor descendant 返回值:Array<Element(s)>

在给定的祖先元素下匹配所有的后代元素

找到表单中所有的 input 元素

代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form input")结果:是获得的时 form 范围中的所有的input 元素的也就是所有的后代
[ <input name="name" />, <input name="newsletter" /> ]

parent > child 返回值:Array<Element(s)>

匹配表单中所有的子级input元素。

代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />jQuery 代码:
$("form > input")结果:
[ <input name="name" /> ]   只是获得的时 form表单的儿子

prev + next 返回值:Array<Element(s)>

匹配所有跟在 label 后面的 input 元素

代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />jQuery 代码:
$("label + input")结果: 指定了是那个元素之后的所有的元素并且在该父类元素的范围内有效的控件呵呵
[ <input name="name" />, <input name="newsletter" /> ]

prev ~ siblings 返回值:Array<Element(s)>

找到所有与表单同辈的 input 元素
代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form ~ input")结果:就是找出 form 表单的兄弟一个辈分的
[ <input name="none" /> ]

----------------------------------------------------
获取元素的选择器基本的选择器：
返回值:jQuery     first()
获取匹配的第一个元素
代码:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>jQuery 代码:
$('li').first()结果:
[ <li>list item 1</li> ]

last() 返回值:jQuery

获取匹配的最后个元素

代码:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>jQuery 代码:
$('li').last()结果:
[ <li>list item 5</li> ]

返回值:Array<Element(s)> :not

查找所有未选中的 input 元素

HTML 代码:
<input name="apple" />
<input name="flower" checked="checked" />jQuery 代码:
$("input:not(:checked)")结果: 这个我们在树的时候我们可以用到这个很好用
[ <input name="apple" /> ]

Array<Element(s)> :even
匹配所有索引值为偶数的元素，从 0 开始计数

查找表格的1、3、5...行（即索引值0、2、4...）

代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>jQuery 代码:
$("tr:even")结果: 这是我们要返回的时奇数行
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

返回值:Array<Element(s)> :odd
匹配所有索引值为奇数的元素，从 0 开始计数

查找表格的2、4、6行（即索引值1、3、5...）

代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>jQuery 代码:
$("tr:odd")结果: 这是我们要返回的时偶数行
[ <tr><td>Value 1</td></tr> ]

:eq 返回值:Array<Element>

查找第二行 0代表的时第一行

HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>jQuery 代码:
$("tr:eq(1)")结果: 返回的时第一行以此类推
[ <tr><td>Value 1</td></tr> ]

返回值:Array<Element(s)> :gt
匹配所有大于给定索引值的元素

查找第二第三行，即索引值是1和2，也就是比0大

HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>jQuery 代码:
$("tr:gt(0)")结果: 这是当我们要取数据时我们可以给其来个从第一个元素开始取值
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

返回值:Array<Element(s)> :lt
匹配所有小于给定索引值的元素

查找第一第二行，即索引值是0和1，也就是比2小

代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>jQuery 代码:
$("tr:lt(2)")结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

:header 返回值:Array<Element(s)>

匹配如 h1, h2, h3之类的标题元素

给页面内所有标题加上背景色

HTML 代码:
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>jQuery 代码:
$(":header").css("background", "#EEE");结果:
[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]