JQuery入门

最新推荐文章于 2024-05-28 22:16:13 发布

梦里花落知多少、

最新推荐文章于 2024-05-28 22:16:13 发布

阅读量62

点赞数

分类专栏： jquery入门文章标签： jquery

本文链接：https://blog.csdn.net/primarykey123/article/details/96213633

版权

jquery入门专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.jquery的基本语法

/*原生JS获取属性*/
			/*window.onload = function(){
				var div  = document.getElementById("mydiv")
				console.log(div)
			}*/
			
			
			/*完整写法*/
		/*	$(document).ready(function(){
				console.log($("mydiv"))
				alert(666)
			});*/
			//jquery 写法    推荐写法
		/*	$(function(){
				console.log($("mydiv"))
			});*/
			
			$(function(){
				console.log($("#mydiv"))
				console.log(jQuery("#mydiv"))
			});
			
			console.log($===jQuery)
			
		</script>
	</head>
	<body>
		<div id="mydiv">小老弟</div>
	</body>
</html>

2.Jquerydom对象和jquery对象的相互转换

$(function(){//dom对象转换为Jquery对象    jquery对象时一个伪数组
				/*var div = document.getElementById("mydiv")//dom对象
				console.log(div);	
				console.log($(div));		//jQuery对象*/
				
				//获取jquery对象
				var jqueryobj =  $("#mydiv")
				console.log(jqueryobj)
				//将jquery对象转换为dom对象      dom.innerHTML=”“给dom对象赋值
				jqueryobj[0].innerHTML= "白云苍狗";
				jqueryobj[0].innerHTML= "一切都只不过";
				console.log(jqueryobj[0]) //innerHTML下一次赋值会覆盖上一次的值

Jquery的选择器

//优先级  行内 > id > class> 标签
				//第一个   id选择器    如果有多个标签相同，那么它只对第一个id有效
				//$("#mydiv").html("老铁")
				
				//第二   class样式选择器   如果有多个对应的样式，就可以同事操作
				//$(".class").html("瓜皮")
				
				//第三element 元素选择器
				//$("div").html("这是元素选择器，同种元素都能操作")
				
				//第四* 所有元素  对所有元素都有效
				//$("*").html("我们都一样")
				console.log($("*"))
				
				//第五  多元素选择器   获取页面上所有的div和input元素
				console.debug($("div,input"));
				
				//第六  父亲和儿子选择器 
				//$("ul > li").css('color','deepskyblue');
				$("span > input").val("6666")
				//第七   祖先和后代选择器
				$("li ul").css('color','firebrick');

4.jqury注册事件

js：怎么注册事件
			 * 		onclick 
			 * 		元素.onclick
			 * 		元素.addEventListener
			 * 
			 * jquery怎么注册事件
			 *		jquery元素.click(function())
			 * 		jquery元素.on('click',function(){})
			 * 				 off('click')
			 * 		jquery元素.bind('click',function(){})
			 * 				 unbind
			 * 		一般注册成功之后，很少去取消事件
			 */
				//   1种
				/*$("#bu").click(function(){
					alert("666666")
					
				})*/
				/*  第二种
				 * $("#bu").on('click',function(){
					alert("你就是个演员")
				})*/
				$("#bu").bind('click',function(){
					
					alert("999999")
				})
				$("#bu").unbind();

5.append 方法

//append(htmlstring/domElement/jqueryObj) append(a)向每个匹配的元素追加 a  
//$("#table").append("<input type='text' value='一个孤独的废物' />");
//appendTo（$("a")）追加到每一个 a元素内
//$("#input").appendTo($('th'))  //相当于剪切
//clone(true ) 参数为true 就会克隆事件  
 appendTo 往下面追加
 prependTo 往上面追加

6.二级联动的实现
重点掌握：jquery发送请求的方式
$.get(url,params,callback,type)
$.post(url,params,callback,type)

梦里花落知多少、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery入门

1.jquery的基本语法/*原生JS获取属性*/ /*window.onload = function(){ var div = document.getElementById("mydiv") console.log(div) }*/ /*完整写法*/ /* $(document).ready(function(){ conso...
复制链接

扫一扫