JQuery

小四
前端
2023-01-23
13热度
0评论

学习主题：JQuery

学习目标：

1 掌握Jquery操作文本和值

2 掌握Jquery的事件

1. 操作页面元素的属性2

(1) 想要操作元素的属性有几种方式，请列举。

//获得id名称是inp1对象节点 var inp1=document.getElementById("inp1"); //方式一：获得元素的属性 var ty=inp1.type; var va=inp1.value; var na=inp1.name; //操作元素的属性 inp1.type=”button”; inp1.value="测试改变"; //方式二：获得元素的属性 var ty1=inp1.getAttribute("type"); //获得属性的默认值 var va2=inp1.getAttribute("value"); //方式二：操作元素的属性 inp1.setAttribute("type","button"); //上面是js原生的，下面是jQuery的 tex.attr("type","button"); tex.attr("value","测试按钮"); //支持json数据格式 tex.attr({"type":"button","value":"测试按钮"}); var ch= $("#fav").attr("checked"); var flag=$("#fav").prop("checked",true);

(2) attr("checked")和prop("checked")这两个操作方式有什么区别？使用场景是什么？

attr("checked")：可以获得checked属性的值，但是无法修改prop("checked")：可以修改，在需要在方法里面或者是事件里面修改该属性时使用对于checkbox，如果没有定义checked="checked"，alert($.attr("checked")) 的结果是undefined。用prop方法，则输出的是true或者false， $("input[type=checkbox]").prop("checked", true);修改checked 使用prop更适合。修改固有属性时，最好使用prop；修改自定义属性时，使用attr。

(3) prop("checked",true) 这句代码是什么意思。

答：将对象的checked的属性值设置为true

2. 操作页面的文本和值1

(1) 请写出html()和text()在获得值得时候两者的区别,和使用的场景。

html()：获得元素的内容相当于js里面调用innerHtmltext()：获得文本内容相当于js里面调用innerText

使用场景根据使用需求不同决定吧，例如需要获得纯文本时使用text方法，否则使用html

(2) 请说出val()和html()在获得值得时候两者的差异。

val()：单标签获得值时使用

html()：一般是双标签使用用来获得value值，select 、textarea 两个标签获得值得时候需要用val()

3. 操作页面的文本和值2

(1) 请写出html()和text()在赋值得时候两者的区别,和使用的场景。

答：上同

(2) 请说出val()和html()在赋值得时候两者的差异。

答：上同

4. 操作页面的元素1

(1) 请问appendTo 和append两个方法之间的区别是什么？

appendTo：与下面相反append：为调用该方法的对象增加子元素到最后

(2) 请问prepend和prependTo两个方法之间的区别是什么？

prependTo：与下面相反prepend：为调用该方法的对象增加子元素到最前面

(3) 请说出before和afterd的使用场景是什么

before：平级的添加元素，在调用者元素之前after：平级的添加元素，在调用者元素之后

5. 操作页面的元素2

(1) 请问replaceAll("div p:nth-child(5)");代码是什么意思？

答：调用该方法的对象取代div下的第五个p元素

(2) 请问replaceWith()和replaceAll()方法之间的区别是什么?

答：主动和被动的关系

replaceWith()：用参数取代调用者replaceAll()：用调用者取代参数

(3) 请问 remove()和empty()之间的区别是什么？

答：remove()是删除掉调用者；empty()是清除掉调用者的所有子孙级对象

6. 事件处理1

(1) 请说出 bind() 事件的作用和使用场景是什么？请列举

答：可以一次绑定多个事件，内容支持json格式

/*****使用bind绑定的好处*****/ //内容还支持json数据格式 $("#bu2").bind({ click:function(){}, dblclick:function(){}, blur:function(){} })

(2) one()事件的使用的场景是什么？

答：当希望绑定在对象上的事件只执行一次时使用

7. 事件处理2

(1) 请说出trigger()这个事件的作用和使用，我们可以在什么位置来使用这个标签？

答：trigger()事件后，会发生trigger()指定的事情，就是触发，在数据库里面也有相似的操作；我们可以在希望一次性执行多个事件时使用该操作

(2) 在JQ中如何可以解绑一个对象上的所有事件，如何解绑一个对象上的单个事件？

答：如果直接执行unbind方法就会解绑一个对象上的所有事件；如果传了参数指定了就会解绑一个对象上的特定事件

(3) live这个方法是解决什么问题的，现在还继续使用吗？

答：live是为了解决动态添加节点元素时，使里面的事件生效的方法，但是现在不使用了