JQuery

最新推荐文章于 2023-07-07 14:28:52 发布

原创最新推荐文章于 2023-07-07 14:28:52 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

JQuery 专栏收录该内容

3 篇文章

订阅专栏

学习主题：JQuery
学习目标：
1 掌握 JQuery的选择器
2 掌握JQuery操作样式,元素
3 掌握Jquery操作文本和值
4 掌握Jquery的事件

1.jQuery的选择器D

(1)想要获得input标签中name属性名字包含a 的标签对象应该如何书写。

//name属性中含有a的				
$("input[name*=a]").css("background-color","plum");

(2)请说出$(“input[type=text][name^=z]”)选择器的含义
复合选择器，需要同时满足条件，type属性为text的情况下还要满足name属性中包含z。

2.jQuery的选择器E

(1)$("input:disabled")这个选择器的作用是什么？
获取input标签中含有disabled属性的对象

(2)$(":input")和$("input");这两个选择器的区别是什么？
$(":input")：获取所有form表单中的表单项
$(“input”) ：获取标签名称为input的所有标签对象

3.操作页面的样式1

(1)如何可以获得一个div元素的宽和高的css样式，JQ获得方式和JS获得方式之间的差异在什么地方.

//获取css对象
					var wi=div.css("width");
					var hi=div.css("height");
JS只能获得行内样式里的，而JQ可以获得行内，嵌套和外部里的。

(2)想要操作一个元素对象的css样式有几种方式.

//操作对象样式
					div.css("width","300px");
					div.css("height","300px");
					div.css("background-color","pink");
					
		//整合样式操作	------ {key1:value1,key2:value2} ------ json样式
	div.css({"width":"300px","height":"300px","background-color":"pink"})

4.操作页面的样式2

(1)想通过增加class的方式给指定元素增加样式，有几种书写方式，请写出具体代码。

$(function(){
			$("#but1").click(function(){
			//获取div对象----通过添加类的方式添加css样式
	        //如果有样式重复则比较选择器比较级，id>类>元素>通用
					$("#div1").attr("class","div");
					$("#div1").addClass("div");
				})
	})

(2)请写出你所学习过的操作元素css的方式，分别说明其每一个的使用的场景是什么?

    //操作对象样式 ---第一种方式
			div.css("width","300px");
			div.css("height","300px");
			div.css("background-color","pink");
		
    //第二种方式			
	//整合样式操作 --- {key1:value1,key2:value2} --- json样式
    div.css({"width":"300px","height":"300px","background-color":"pink"})
	
    //第三种方式
	//获取div对象----通过添加类的方式添加css样式
//如果有样式重复则比较选择器比较级，id>类>元素>通用
	$("#div1").attr("class","div");					
	 $("#div1").addClass("div");

(1)请问attr(“value”)和val()的区别是？
attr(“value”)：获取固定属性值
val() ：获取的是文本框里的实时输入值

(2)
$("#inp1").attr(“type”)
$("#inp1").attr(“value “)
$(”#inp1”).attr("class ")
输出的结果是什么？请写出常使用的间接获得对象属性的方式
依次输出：text ,123 ,dl

//获取对象
					var tex=$("#inp1");
					//获取对象属性
					var ty=tex.attr("type");
					var cl=tex.attr("class");

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

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

			//获取对象
			var tex=$("#inp1");
					
			//第一种
				tex.attr("type","button");
				tex.attr("value","测试按钮");
			
			//第二种
	      	//支持json格式
			tex.attr({"type":"button","value":"测试按钮"});
		
			//第三种
			var ch2=$("#ch").prop("checked",true);//给该属性增加checked

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

attr("checked")：获取属性为checked的属性值
prop("checked")：返回布尔值，如果含有这个属性则返回true，反之返回false

var ch=$("#ch").attr("checked");
		alert(ch);
		var ch2=$("#ch").prop("checked");//返回true和false
		alert(ch2);

(3)prop(“checked”,true) 这句代码是什么意思。
把该元素加上checked这个属性

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

(1)请写出html()和text()在获得值得时候两者的区别,和使用的场景。
html()：获得元素内容，含有html标签
text()：只是获取文本内容，不包含html标签

(2)请说出val()和html()在获得值得时候两者的差异。
val()：获得文本框的实时输入值
html()：获得元素内容，含有html标签

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

(1)请写出html()和text()在赋值得时候两者的区别,和使用的场景。
html()：在赋值的时候会先读取标签里的内容，然后把内容赋值
text()：会把标签和标签里的内容一起当做文本进行赋值

(2)请说出val()和html()在赋值得时候两者的差异。
val()：会把值赋给value这个属性
html()：是给标签里的内容进行赋值

9.操作页面的元素1

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

appendTo  和append都是将元素添加到现有元素之后
A appendTo B 代表将A添加到B中去
B append A   代表向B中添加A
//在div内部添加元素  ---现有元素之后
				$("#div1").append(p);
				p.appendTo("#div1");

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

prepend和prependTo都是将元素添加到现有元素之前
A prependTo B 代表将A添加到B中去
B prepend A   代表向B中添加A
//在div内部添加元素  ---现有元素之前
				$("#div1").prepend(p);
				p.prependTo("#div1");

(3)请说出before和after的使用场景是什么
before和after都是添加同级标签，before是将插入的标签内容添加到现有标签之前，after是将要插入的标签内容添加到现有标签之后。

10.操作页面的元素2

(1)请问replaceAll(“div p:nth-child(5)”);代码是什么意思？
替换掉div标签里下标为5的元素

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

//将div内的元素替换成replaceWith()里的内容
	$("div p:nth-child(1)").replaceWith(p);
//将某个标签内容把div内的标签替换掉
   p.replaceAll("div p:nth-child(2)")

(3)请问 remove()和empty()之间的区别是什么？
remove()：是将内容和结构一起删除
empty()：是将内容清空，但是保留结构

11.事件处理1

(1)请说出 bind() 事件的作用和使用场景是什么？请列举
bind()事件支持json数据格式，可以处理多个事件。当一个标签中含有多个事件需要处理，就可以使用bind()事件。

//支持json数据格式
		$("#bu2").bind({
		'click':function(){},
		'dbclick':function(){}
         'blur' :function(){}
})

(2)one()事件的使用的场景是什么？
One()事件只能加载一次，所以可以用在需要的事件只处理一次的时候。

12.事件处理2

(1)请说出trigger()这个事件的作用和使用，我们可以在什么位置来使用这个标签？
trigger()事件可以调用其它事件里的方法，相当于当我们点击trigger()事件时就会帮我们去实现指定的其它事件，在页面加载完执行的方法里使用。

/*************trigger事件绑定**************/
				$("#bu4").click(function(){
					$("#bu1").trigger('dblclick');
					$("#bu2").trigger('click');
				})

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

/**************事件解绑**************/
		$("#bu5").click(function(){
		//解绑指定对象上指定事件
		$("#bu1").unbind('dblclick');	
		})

(3)live这个方法是解决什么问题的，现在还继续使用吗？
当后添加进一个元素，想要直接用之前的处理函数，bind()实现不了，只能用live（）方法，但是该方法只在jq1.7版本之前可以使用，现在用不了。