JQueryx选择符

Posted myblogou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQueryx选择符相关的知识,希望对你有一定的参考价值。

  1 <html>
  2 <head>
  3     <title></title>
  4     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  5     <style type="text/css">
  6         body {
  7             font-size: 18px;
  8         }
  9 
 10         .horizontal {
 11             float: left;
 12             list-style: none;
 13             margin: 10px;
 14         }
 15 
 16         .sub-level {
 17             background: #ffc;
 18         }
 19 
 20         a {
 21             color: #00f;
 22         }
 23 
 24             a.mailto {
 25                 color: #f00;
 26             }
 27 
 28             a.pdflink {
 29                 color: #090;
 30             }
 31 
 32             a.mysite {
 33                 text-decoration: none;
 34                 border-bottom: 1px dotted #00f;
 35             }
 36 
 37             a.henrylink {
 38                 background-color: #fff;
 39                 padding: 2px;
 40                 border: 1px solid #000;
 41             }
 42 
 43         .table-heading {
 44             background-color: #ff0;
 45         }
 46 
 47         th {
 48             text-align: left;
 49         }
 50 
 51         .odd {
 52             background-color: #ffc;
 53         }
 54 
 55         .even {
 56             background-color: #cef;
 57         }
 58 
 59         .highlight {
 60             color: #f00;
 61             font-weight: bold;
 62         }
 63 
 64         .italic {
 65             font-style: italic;
 66         }
 67 
 68         .bold {
 69             font-weight: bold;
 70         }
 71 
 72         .red {
 73             background-color: Red;
 74         }
 75 
 76         .blue {
 77             background-color: Blue;
 78         }
 79 
 80         .yellow {
 81             background-color: Yellow;
 82         }
 83 
 84         .black {
 85             background-color: black;
 86         }
 87 
 88         .alt {
 89             background-color: #ccc;
 90         }
 91 
 92         .purple {
 93             background-color: Purple;
 94         }
 95 
 96         .green {
 97             background-color: green;
 98         }
 99     </style>
100     <script type="text/javascript">
101 
102         $(document).ready(
103             function () {
104                 $(#p1).css(backgroundColor, red);
105                 //尝试在jQuery对象上调用dom API,失败,结论是在jQuery对象只能调用jQuery方法
106                 //$(‘#p1‘).setAttribute("xiabian", "骗你")
107                 //普通的dom写法
108                 var p2 = document.getElementById(p2);
109                 p2.setAttribute("hubian", "骗你")
110             }
111         );
112 
113         //01
114         
115         $(document).ready(function () {
116             $(#selected-plays > li).addClass(horizontal);
117             //not jQuery选择器,去掉选中的所有li中的类名为horizontal的li其实就是上一个选择器选中的直接li
118             $(#selected-plays li:not(.horizontal)).addClass(sub-level);
119 
120             $(a[href ^= mailto:]).addClass(mailto);
121             $(a[href $=.pdf]).addClass(pdflink);
122 
123             ////a[href^=http][href*=henry]选中以href属性的值以http开头的a并且其中的值要包含henry
124             $(a[href ^=http][href *=henry]).addClass(henrylink);
125 
126         });
127        
128         //02,jQuery对象和Dom对象的相互转换
129         $(document).ready(function () {
130             //p eq(equal做相等判断)
131             $("p:eq(1)").addClass("red");
132 
133             //非法,不能在jQuery对象上调用Dom方法
134             //$("p:eq(1)").setAttribute("class", "black");
135 
136             //get(0)是把是jQuery对象中的第1个成员转变成了Dom对象
137             $("p:eq(2)").get(0).className = "yellow";
138             $("p:eq(3)").get(0).setAttribute("class", "green");
139             ////dom对象。
140             var oPurple = document.getElementById("purple");
141             //////把一个dom对象包装成一个jQuery对象的方法
142             $(oPurple).addClass("purple");
143         });
144         
145         
146         //03
147         $(document).ready(function () {
148             $("p:nth-child(3)").addClass("blue");
149         });
150          
151         //04
152         $(document).ready(function () {
153             $("p:first-child").addClass("yellow");
154         });
155 
156         
157         //05
158         $(document).ready(function () {
159             $(tr:odd).addClass(odd);
160             $(tr:even).addClass(even);
161             $(td:contains("Henry")).addClass(highlight);
162             $(td:contains("Henry")).next().addClass(highlight);
163             $(td:contains("Henry")).nextAll().addClass(highlight);
164             $(td:contains("Henry")).nextAll().andSelf().addClass(highlight);
165 
166             $(td:contains("Henry")).parent().parent().children().addClass(highlight);
167         });
168 
169         
170         //06. filter过滤器方法,此处是把所有tr中的偶数行过滤出来
171         $(document).ready(function () {
172             $(tr).filter(:even).addClass(alt);
173         });
174         /**/
175     </script>
176 </head>
177 <body>
178     <p id="p1">
179         段落1
180     </p>
181     <p id="p2">
182         段落2
183     </p>
184     <p>
185         段落3
186     </p>
187     <p>
188         段落4
189     </p>
190     <p id="purple">
191         段落5
192     </p>
193     <div id="container">
194         <div id="chapter-number">
195             2
196         </div>
197         <h1>
198             Selectors
199         </h1>
200         <h1 class="subtitle">How to Get Anything You Want</h1>
201         <h2>Selected ShakeSpeare Plays</h2>
202         <ul id="selected-plays" class="clearfix">
203             <li>
204                 Comedies
205                 <ul>
206                     <li><a href="http://www.mysite.com/asyoulikeit/">As You Like It</a></li>
207                     <li>All‘s Well That Ends Well</li>
208                     <li>A Midsummer Night‘s Dream</li>
209                     <li>Twelfth Night</li>
210                 </ul>
211             </li>
212             <li>
213                 Tragedies
214                 <ul>
215                     <li><a href="hamlet.pdf">Hamlet</a></li>
216                     <li>Macbeth</li>
217                     <li>Romeo and Juliet</li>
218                 </ul>
219             </li>
220             <li>
221                 Histories
222                 <ul>
223                     <li>
224                         Henry IV (<a href="mailto:[email protected]">email</a>)
225                         <ul>
226                             <li>Part I</li>
227                             <li>Part II</li>
228                         </ul>
229                     <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
230                     <li>Richard II</li>
231                 </ul>
232             </li>
233         </ul>
234         <h2>
235             Shakespeare Table
236         </h2>
237         <table border="0" cellspacing="1" cellpadding="5">
238             <tr>
239                 <th>
240                     Title
241                 </th>
242                 <th>
243                     Category
244                 </th>
245                 <th>
246                     Year Published
247                 </th>
248             </tr>
249             <tr>
250                 <td>
251                     As You Like It
252                 </td>
253                 <td>
254                     Comedy
255                 </td>
256                 <td></td>
257             </tr>
258             <tr>
259                 <td>
260                     All‘s Well that Ends Well
261                 </td>
262                 <td>
263                     Comedy
264                 </td>
265                 <td>
266                     1601
267                 </td>
268             </tr>
269             <tr>
270                 <td>
271                     Hamlet
272                 </td>
273                 <td>
274                     Tragedy
275                 </td>
276                 <td>
277                     1604
278                 </td>
279             </tr>
280             <tr>
281                 <td>
282                     Macbeth
283                 </td>
284                 <td>
285                     Tragedy
286                 </td>
287                 <td>
288                     1606
289                 </td>
290             </tr>
291             <tr>
292                 <td>
293                     Romeo and Juliet
294                 </td>
295                 <td>
296                     Tragedy
297                 </td>
298                 <td>
299                     1595
300                 </td>
301             </tr>
302             <tr>
303                 <td>
304                     Henry IV, Part I
305                 </td>
306                 <td>
307                     History
308                 </td>
309                 <td>
310                     1596
311                 </td>
312             </tr>
313             <tr>
314                 <td>
315                     Henry V
316                 </td>
317                 <td>
318                     History
319                 </td>
320                 <td>
321                     1599
322                 </td>
323             </tr>
324         </table>
325     </div>
326 </body>
327 </html>

 

以上是关于JQueryx选择符的主要内容,如果未能解决你的问题,请参考以下文章

布局中的片段占位符

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段6——CSS选择器

从viewPager片段(Kotlin)中获取用户输入信息

在代码片段中包含类型转换

编写一个程序, 将 a.txt 文件中的单词与 b.txt 文件中的 单词交替合并到 c.txt 文件中, a.txt 文件中的单词用回车符 分隔, b.txt 文件中用回车或空格进行分隔。(代码片段