jQuery设计思想小结

2021-02-23 126 阅读1分钟

1.关于jQuery的一些基础必知

jQuery基本思想和具体用法：选择某个网页元素，对其进行某种操作；
jQuery是一个不需要加new的构造函数，不是常规意义上的函数；
jQuery对象指代jQuery函数构造出来的对象；
jQuery针对不同浏览器使用不同代码，这叫适配器；

2.jQuery 获取元素

将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。选择表达式可以是CSS选择器：

　　$(document) //选择整个文档对象

　　$('#myId') //选择ID为myId的网页元素

　　$('div.myClass') // 选择class为myClass的div元素

　　$('input[name=first]') // 选择name属性等于first的input元素

也可以是jQuery特有的表达式：

　  $('a:first') //选择网页中第一个a元素

　　$('tr:odd') //选择表格的奇数行

　　$('#myForm :input') // 选择表单中的input元素

　　$('div:visible') //选择可见的div元素

　　$('div:gt(2)') // 选择所有的div元素，除了前三个

　　$('div:animated') // 选择当前处于动画状态的div元素

3.jQuery链式操作：通过对象的方法后，再把对象返回回来，对象继续调用方法。从而使不同操作可以直接连接到一起。链式操作使代码更精简。所有代码共享一个jQuery对象,省去了逐步查询DOM元素的性能损耗，进而达到优化性能的目的。

//链式操作：先获取id为test的对象，将其设置其字体颜色为红色，再显示对象，最后移除对象的“style”这个样式；
$("#Test").css('color','red').show(200).removeClass('style');
//jQuery还提供了.end()方法，使得结果集可以后退一步
$('.test').find('.child').addClass('red').end().addClass('yellow')
//end()后会回到find('.child')的前一步

4.jQuery 创建元素：将新元素直接传入jQuery的构造函数

　 $('<p>Hello</p>');

　　$('<li class="new">new list item</li>');

　　$('ul').append('<li>list item</li>');

5.jQuery 移动元素

在现存元素的外部，从后面插入元素：

//第一种方法：使用.insertAfter()，把div元素移动p元素后面；
$('div').insertAfter('p');
//第二种方法：使用.after()，把p元素加到div元素前面；
$('p').after('div');

在现存元素的外部，从前面插入元素：

// 存在的节点.before(新节点)
$('p').before(pObj);
// 新节点.insertBefore(存在节点)
$(pObj).insertBefore($('p'));

在现存元素的内部，从后面插入元素

// 1.父级节点.prepend(新子节点)
 $('ul').prepend(liObj)；
// 2.子节点.prependTo(父节点)
 $(liObj).prependTo($('ul'));

在现存元素的内部，从前面插入元素

// 1.父级节点.append(新子节点)
$('ul').append(li2Obj);
// 2.子节点.appendTo(父节点)
$(li2Obj).appendTo('ul');

6.jQuery 修改元素的属性

jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写,是js中setAttribute()和getAttribute()的简化;

    $("img").attr("src","img/a.jpg");
    $("img").attr("width","100px");

用法一：$(selector).attr(attribute)是用来得到属性值的, 只有一个参数就是属性名

var srcImg = $('#img_1').attr("src");

用法二：$(selector).attr(attribute,value)第一个参数是属性名, 第二个参数是想为该属性赋的值

$('#img_1').attr('src','img/1.jpg');

用法三：用函数的返回值给属性赋属性值, 该函数可接收并使用选择器的 index 值和当前属性值。$(selector).attr(attribute,function(index,oldvalue))

//点击按钮减少 img  50宽度的小实例
    $("button").click(function(){
        $("img").attr("width",function(n,v){
          return v-50;
        });
      });

用法四：第二种方式的拓展, 可以一次修改很多属性的属性值 $(selector).attr({attribute:value, attribute:value ...})

$('#img_1').attr({"width":80px, "height":50px});

7.参考文档：阮一峰《jQuery设计思想》