JQuery入门笔记

最新推荐文章于 2024-01-20 21:49:50 发布

我是展护卫

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量131

点赞数

本文链接：https://blog.csdn.net/weixin_44643735/article/details/104913682

版权

jquery: javascript库

write less ,do more

使用版本：

jquery-3.3.1.min.js   压缩版   发布版  84KB
jquery-3.3.1.js		  压缩版   开发版  265KB

开发工具记事本工作时建议用webStorm

引入jQuery

	在head标签中  		<script type="text/javascript" src="js/jquery-3.3.1.js">

如果页面出错但不提示的话，考虑html出错

使用

$(document).ready(function(){  });  初始化函数   网页中dom元素（网页结构）全部加载完毕后执行  可以写多个
onload: javascript, 				初始化函数， 网页中全部元素全部加载完毕后执行			   只能写一个
jquery初始化函数简化写法：  $(function(){...});    $代表jquery

dom模型

将html xml 等文档结构的标签语言 看成dom模型
dom节点有三种类型：
	元素节点：<html>  <ul>
	属性节点：title stc  img
	文本节点：标签的文本

dom对象：

以上三种节点的具体对象，就是dom对象  凡是javaScript能够直接操作的对象，就是dom对象
例如 var title = document.getElementById("MyTitle");  用js拿到的title对象，就是一个dom对象 p对象

jquery对象

凡是jQuery能够直接操作的对象，就是jQuery对象
注意： 
dom对象只适用于js语法   jquery对象适用于jquery语法
同样一个元素，既可以成为dom对象   也可以成为一个jQuery对象
命名建议  js对象直接写， jquery对象在前面加上$

dom对象和jquery对象的转化：

dom --> jquery : jquery工厂，$(dom对象)
jquery --> dom :  
	基础 ：jquery对象默认是一个数组或集合   dom对象默认是一个单独的对象
	数组： jquery对象[0]
	集合：jquery对象.get(0)

jQuery选择器： jquery的根基

基本选择器：

标签选择器：$("标签名")  $("p").html()  获取p标签对象  jquery对象形式 
类选择器：  $(".class值") 
id选择器：  $("#id值")
并集选择器： 或  逗号   $(".class值,#id值")		$(.mystyle,MyTitle)
交集选择器： 与  连续直接写  满足同时存在 $("标签名.class值")   $("p.mystyle")   不能出现歧义
全局选择器： $("*")  选中全部元素

层次选择器：

相邻选择器（后面相邻）   +		$("选择器1+选择器2")		$("#b+li").html()
同辈选择器 （后）		~       $("选择器1~选择器2")		$("#b~li").length
后代选择器  			   空格	    $("选择器1 选择器2")		$("body li")
子代选择器 			    >		$("选择器1>选择器2")		$("ul>li")

属性选择器： []

$("[属性名]") 			$("[class]")  选中全部元素中  有class属性的元素
$("[属性名=属性值]")	 $("[class=mystyle]") 选中有class属性且属性值为mystyle的元素
$("[class!=a]")		有class但是值不等于a   没有class属性
$("[class^=a]")		class值以a开头的元素
$("[class$=a]")		class值以a结尾的元素
$("[class*=a]")		class值包含a的元素

过滤选择器：过滤选择器和一些方法类似（从0开始）

基本过滤选择器

:first   最开头的那个元素
:last	 最后那个元素
:even    偶数元素
:odd     奇数元素
:eq(index)   第index个元素
:gt(index)   大于index的全部元素  
:lt(index)   小于index的全部元素  
:not(选择器)  除了选择器以外的全部元素
:header      选中除了标题元素以外的全部元素
:focus   	 获取当前焦点的元素（光标所在元素）

可见性选择器

:visible		选取所有可见的元素
:hidden			选取所有隐藏的元素

事件：

js: OnXxx
	onclick();		写在<script>内，ready()外
jquery: 没有on
	click();        写在ready()内

windows事件： ready();

鼠标事件： click() 单击事件 mouseover():鼠标悬浮 mouseout(): 鼠标移开

键盘事件：keydown():按下 keyup():松开

可以通过event.keyCode指定具体的按键

表单事件

	focus()	获取光标
	blur()	失去光标

绑定事件： $(…).bind(“事件名”,[数据],函数);

	$(...).click();   ---->   $(...).bind("click",function(){...}); 
	批量绑定：	$(...).bind({"click":function(){...},"keydown":function(){...},批量事件});

移除事件：$(…).unbind(“事件名”);

前端的一些事件、方法会在某种情况下失效、要注意兼容问题

详看官网 www.w3school.com.cn/tags/html_ref_eventattributes.asp

操作DOM

1.样式操作

a.设置css()
	jquery对象.css("属性名"，"属性值")
	jquery对象.css({"属性名":"属性值","属性名":"属性值",....})
b.追加或移除样式class()
	addClass("x");
	addClass("x x x");
	removeClass(x);
	removeClass(x x);
	removeClass(): 移除全部样式
	toggleClass(""):切换追加与移除

2.内容操作

html() 	  获取值  获取的是元素的全部内容， 包含元素内部的各种标签
html(xxx):设置值  先渲染，后显示
text() 	  获取值  获取文本值
text(xxx) 设置值  将xxx原封不动的显示
val():    获取值  获取value值
val(xxx)  设置值  设置value的值

3.节点与属性操作

节点：

查询节点：	(jquery选择器)
创建节点：	$() jquery工厂  $(html字符串)  例： $("<li>xxx</li>")
插入节点：  
	内部插入：var $element = $("<li>ggggg</li>");
		$("ul").append($element);		 $element.appendTo($("ul"));
		$("ul").prepend($element);		 $element.prependTo($("ul"));
	外部插入： var $element = $("<p>hello jquery</p>");
		$("ul").after($element);		 $element.insertAfter($("ul"));
		$("ul").before($element);		 $element.insertBefore($("ul"));
替换节点：把$X换成$Y		$X.replaceWith(Y)   	$Y.replaceAll(X)
删除节点： 
	remove():   彻底删除
	detach():	将节点删除，但关联的事件、数据不会删除（不推荐使用）
	empty():	只删除内容
复制节点：
	clone(true|false)

属性操作：

attr("属性名")  获取属性值
attr("属性名","属性值")	设置属性值
attr({"属性名":"属性值","属性名":"属性值",....});
删除属性值		removeAttr("属性名");

4.获取集合与遍历集合

子节点集合：  children()
	$(..).children("li");
后代节点集合  find()
	$(..).find("li");   不推荐使用，损耗性能
同辈节点集合
	next()   后一个
	prev()	 前一个
	siblings()  全部同辈
前辈节点集合
	parent():    父代
	parents():   所有祖代 
过滤集合：
	很多方法的()就是一个过滤选择器：
	filter("选择器。。。");
遍历集合：
	$(...).each(function(index,element){
		alert(index+","+$(this).html()+","+$(element).html());
	});

CSSDom操作：

height()  		width() 	获取值
height(300) 	width(300)	设置值
offset()		偏移量（以左上角为基准）   .left    .top
	$("#divId2").offset(function(index,oldOffset){
		var newOffset = new Object();
		newOffset.left = oldOffset.left+200;
		newOffset.top = oldOffset.top+100;
		return newOffset;
	});
offsetParent()		获取已定位的父元素
	定位：  元素的position属性(默认为static)被设置为了 relative  absoulte  或fixed
scrollLet()   滚动条定位
scrollTop()

表单校验：重点！！

1.获取要校验的元素值    用户名 密码    （选择器）
2.通过	字符串处理方法  或者 正则表达式等手段进行校验
3.触发校验的方法或事件（校验的时机）
	blur()  :    失去光标时触发
	submit():	 点击表单的 提交按钮时触发
	js：
		onblur=""		onsubmit=""

正则表达式：用于定义规则

正则表达式.test(校验值);

使用规则百度搜一下

我是展护卫

关注

0
点赞
踩
0

收藏

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

jquery: javascript库write less ,do more使用版本：jquery-3.3.1.min.js 压缩版发布版 84KBjquery-3.3.1.js 压缩版开发版 265KB开发工具记事本工作时建议用webStorm引入jQuery 在head标签中 <script type="text/javasc...
复制链接

扫一扫