三天学会jquery(第一天,必须有JavaScript基础)

介绍简单点

1.是javascript函数库

2.好多的代码都简单了

3.JavaScript有的jQuery都有,javaScript没有的jQuery也有

3.这里不讲动画我感觉没有得讲些实用的

 

一.选择器/选择器是最基础的

		//获取所有元素
		$("*")
		//示例 - 所有的背景变成黑色
		$("*").css("background","red");
		//下面的使用都一样
		$(this) //获取当前元素
		$("p.css") //获取p中含有class名称的属性   <p class='css'>helloWrod</p>
		$("p:first") //获取所有有p中的第一个元素
		$("ul li:first") //获取第一个ul 里的li第一个属性 - 空格代表此元素的子元素
		$("ul li:first-child") //获取每一个ul 里的li第一个属性
		$("[href]") //获取带有href属性元素
		$(":button") //含有 button标签&& type="button"属性的所有元素
		$("tr:even") //获取所有偶数元素
		$("td:odd") //获取所有奇数元素

二.事件/鼠标事件/键盘事件/表单事件/窗口事件

// 鼠标事件
		$("button").on("click",function(){
			alert("你点击了一个按钮");
		});
		//这时个click属性
		"click"
		//双击
		"dblclick"
		//鼠标悬停在此标签上面 hover //鼠标滑动事件
		$("p").hover(function(){
		    $("p").css("background-color","yellow"); //划入是启动此函数
		},function(){
		    $("p").css("background-color","pink"); //划出启动此函数
		});
		//滑动
		//hover
		//鼠标划入
		//mouseenter
		//鼠标划出
		//mouseleave
		//键盘事件 //给body添加layout  ID 已获得全局键盘监听属性也可以给单个元素监听
		$("#layout").keypress(function(){
		    $("span").text(i+=1);
		});
		// keydown // 键按下的过程
		// keypress // 键被按下
		// keyup // 键被松开
		
		//表单事件
		$("form").submit(function(){
			alert("提交");
			// event.preventDefault();  // 此属性可以阻止表单提交
		})
		//填写文本属性input / textarea
		//焦点消失后启动此方法
		$("input").change(function(){
		    alert("文本已被修改");
		});
		
		//窗口事件
		// 加载完毕启动此方法 -也可以用在元素里
		$("img").load(function(){ //吧"img" 改成  window 全部元素加载完毕启动
			alert("图片已载入");
		});
		//改变窗口大小启动此方法
		$(window).resize(function(){
			alert($(window).width()+":"+$(window).height());
		});
		//滚动事件
		$(window).scroll(function(){
			alert(this.scrollTop());
		})
		

 jqueryhtml的操作

// 捕获html内容  前面有返回值
		//捕获当前html里的内容
		$("#layout").text();
		// 捕获当前html里的内容带标签
		$("#layout").html();
		//获取当前input里的value值
		$("input").val();
		//获取当前定义样式的里的值
		$("a").attr("href"); //没有href则获取空
		//设置值
		//设置当前html里的内容
		$("#layout").text("hello");
		// 设置当前html里的内容带标签
		$("#layout").html("<span>hello</span>");
		//设置当前input里的value值
		$("input").val("hello");
		//设置当前定义样式的里的值
					// k       v
		$("a").attr("href","内容");
		//或者多个
		$("a").attr({"href":"内容","values":"hello"});
		//追加文本在后面追加
		$("p").append("text");
		//在前面追加
		$("p").prepend("text");
		//在此标签后面不是里面
		$("img").after("在后面添加文本");
		 //在此标签钱面不是里面
		$("img").before("在前面添加文本");
		
		//删除元素
		//删除.div1类的元素
		$(".div1").remove();
		// 删除.div1.子元素;
		$(".div1").empty();
		//删除class是div1的p元素
		$("p").remove(".div1");
		
		// 修改样式
		//添加所有p标签里class
		$("p").addClass("hello");
		//删除所有p标签里的hello类样式名
		$("p").removeClass("hello");
		//添加单个css样式
		$("p").css("background","red");
		//添加多个css样式
		$("p").css({
			"background":"red",
			"font-size":"24px"
		});
		
		widht();//获取此标签宽度
		height();//获取此标签高度
		innerWidth();//获取此标签内边距
		innerHeight();

好了今天就学到这里主要的单词背下就是这么简单

这是我的公众号换用关注有几率获得物品