首 页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 尾 页

jQuery的前世今生

发布者: superzhang | 发布时间:2017-11-25

在WEB开发圈内,提起大名鼎鼎的jQuery,几乎无人不知,无人不晓,下面笔者就带大家一起扒一扒jQuery的各种八卦。

jQuery诞生于2006年1月,至今已经有十个年头多了,其作者是美国大神John Resig,他当时发明jQuery的时候只有22岁。此时,一定会有想象力丰富的网友脑补一下自己22岁在干嘛?打装备?泡妞?备考?或者是,搬砖。。。其实John Resig从14岁就开始玩编程,22岁已经是资深码农了,我们14岁可能还在玩小霸王,呵呵。

那么,jQuery为什么会这么流行呢?这完全要归功于当年浏览器的混战。从1990年第一款浏览器WorldWideWeb的诞生,1994年网景公司的Netscape Navigator成就霸主,到2001年微软IE6的一统天下,再到最近几年chrome的迅速崛起等等,20多年的时间里,各个浏览器彼此混战不休。我们知道,JavaScript是运行在浏览器里的语言,但是各个浏览器对JavaScript的支持程度都是不一样的,甚至有的浏览器还自创语法,比如IE的ActiveXObject。所以这就苦了广大开发者,因为写一套代码,还要去适配各个厂家浏览器的独有语法,非常痛苦,于是在这种环境下,jQuery诞生了,它帮你把这些痛苦的事情全都做了。

jQuery到底有多火呢?据统计,目前全世界已有 57.

想读更多 ->

案头的jQuery——前言

发布者: superzhang | 发布时间:2017-11-25

前言

现如今越来越多的前端框架登上了IT互联网这个舞台,他们显得逻辑新颖,思维华丽,运转高效。Angularjs的双向数据绑定,Reactjs的组件式开发,Nodejs的快速普及,Vuejs的轻便强功显得那么炙手可热。但在我们的这个行业中,JQuery却还在默默的被使用着。与其他框架相比,他虽然显得不是那么精彩,但也占据着如今的半壁江山。做为前端开发,你很难完全脱离开jQuery而完全使用一个新的库或者架构完成自己的项目开发,哪怕是Angularjs也内嵌jqLite来完成DOM相关操作,所以,学习并且使用,乃至精通jQuery在一定程度上决定着我们前端这条路的发展。

使用jQuery可以很大程度的解决我们操作DOM的繁琐,避免浏览器的各种DOM操作的兼容问题,而且在本书中我将会以更初级的示例,更直白的表达,以及更符合真实项目的代码实例来进行知识点讲解。但并不证明使用了jQuery就不需要学习原生的javascript,反正我更推荐前端人员熟练一段时间的原生javascript以后再使用jQuery,而且再后面我还会说一些jQuery源码中关于常用方法的封装,从而让你更明白自己怎么来封装属于自己项目的jQuery方法和组件。

本书概要结构点

1、 本书基于jQuery v1.10.2,将会讲解选择器的介绍,如何配合使用,以及更

想读更多 ->

jQuery 遍历 - 祖先

发布者: superzhang | 发布时间:2017-11-25

祖先是父、祖父或曾祖父等等。

通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。

jQuery 遍历 - 祖先

向上遍历 DOM 树

这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:

parent()

parents()

parentsUntil()

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

下面的例子返回每个 <span> 元素的的直接父元素:

实例

$(document).ready(function(){ $("span").parent();});

jQuery 遍</p><p><a href='internet/internet_229314.html'> 想读更多 -></a></p></div><div class='art bs'><h1><a href='internet/internet_229313.html'>jquery样式操作</a></h1><span class='art_des'>发布者: superzhang | 发布时间:2017-11-25</span><p>1.获取样式和设置样式<p>由于class也是元素的属性,因此获取class和设置class都可以使用attr()方法来完成。</p><p> 例如使用attr()方法来获取<P>元素的class :</p><p> //获取样式</p><p> alert($(

也可以使用attr()方法来设置<P>元素的class:

//设置样式

$("p").attr("class","red");

上面的代码是将原来的class (myClass)替换为新的class ( red)。如果此处需要的是“追加”效果,class属性变为“myClass high",即myClass和high两种样式的叠加,那么我们可以使用addClass()方法。

2.追加样式

jQuery提供了专门的addClass()方法来追加样式。

//追加样式

$("p").addClass("blue");

如果同一个元素有多个class,那么怎样显示呢?

在CSS中有以下两条规定。

(I)如果给一个元素添加了多个class值,那么就相当于合并了它们的样式。

(2)如果有不同的class设定了同一样式属性,则后者覆盖前者

想读更多 ->

jquery笔记

发布者: superzhang | 发布时间:2017-11-25

jQuery.noConflict(extreme)

将$和jQuery的控制权都交还给原来的库。

这是相对于简单的 noConflict 方法更极端的版本,因为这将完全重新定义jQuery。这通常用于一种极端的情况,比如你想要将jQuery嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。

返回值:jQuery

参数:extreme (Boolean) : 传入 true 来允许彻底将jQuery变量还原

示例:完全将 jQuery 移到一个新的命名空间。

jQuery 代码:

var dom = {};

dom.query = jQuery.noConflict(true);

结果:

// 新 jQuery 的代码

dom.query("div p").hide();

// 另一个库 $() 的代码

$("content").style.display = 'none';

// 另一个版本 jQuery 的代码

jQuery("div > p").hide();

("li p"):li标签的后代p标签

("li>p"):li标签的子代p标签

("li.clas"):li标签中class属性值为clas的标签

("li#clas"):li标签中id属性值为clas的标签

("li~p"):li标签后面紧邻的所有同级标签

("li+p"):li标签后面紧邻的下一个同级标签

2:属性选择器

$("[href]"):包含href属性的所有标签

$("[href='#']"):包含href属性值为#的所有标签

$("[href!='#']"):包含href属性值不等于#的所有标签

$("[href^='en']"):包含href属性值开头为en字符的所有标签

$("[href$='.jpg']"):包含href属性值结尾为.jpg字符的所有标签

$("[href*='txt']"):包含href属性值含有txt字符的所有标签

$("li[id][title=新闻]):包含id属性和title属性值为

想读更多 ->

jquery绑定未来新创建函数的方法on

发布者: superzhang | 发布时间:2017-11-25

对于页面动态新创建的元素,可以使用jquery的on函数进行绑定,使得未来的元素也能继承某些原始定义的方法,比如:

$("#js-fb-list").on("click",".cancel-btn",function(){

...

});

这里绑定了$("#js-fb-list")下的$(".cancel-btn")这个类的所有元素,包括页面已经存在的和未创建的dom

jquery绑定未来新创建函数的方法on

想读更多 ->

jquery元素选择器——4

发布者: superzhang | 发布时间:2017-11-25

一、HTML

<div>

<p>我是唯一p标签</p>

<span></span>

</div>

<div>

<p>我是P标签0</p>

<span>我是span标签1</span>

<p>我是P标签2</p>

<span>我是span标签3</span>

</div>

===================

<div>

<p>我是P标签0</p>

<span>我是span标签1</span>

<p>我是P标签2</p>

<span>我是span标签3</span>

</div>

不加任何样式,在浏览器中的样式

jQuery 中所有选择器都以美元符号开头:$()。

jQuery 选择器

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

$("p")

实例

用户点击按钮后,所有 <p> 元素都隐藏:

实例

$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });});