Java二阶段 jquery

jquery

导入jquery:

<script src="js/jquery-3.4.1.js"></script>

//这个网站也有jqury等的连接。
https://www.bootcdn.cn/

操作是批量操作
不需要循环操作

$("")

$("#id")
$(".class")
$("element"):element是标签	
$("form > input")：子元素
$("form ~ input")：匹配 form 元素之后的所有 siblings(同级) 元素

基本选择器

:first  :last  示例： $('li:first');
:odd :even 奇数 偶数
:gt(index) :lt(index)  索引值 从0开始
:eq(index)	
内容：
:contains("文本内容")：匹配包含给定文本的元素。
:has(selector) 示例：$("div:has(p)").addClass("test"); 匹配含有选择器所匹配的元素的元素
可见性：
:hidden 匹配所有不可见元素，或者type为hidden的元素   $("tr:hidden")
:visible 匹配所有的可见元素  $("tr:visible")

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

$("div:contains('John')")

结果:

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

属性过滤器

//查找所有含有 id 属性的 div 元素
$("div[id]")
//查找所有 name 属性是 newsletter 的 input 元素
$("input[name='newsletter']").attr("checked", true);

表单元素

表单元素	操作
:input	$(":input")
:text	$(":text")
:password	$(":password")
:radio	$(":radio")
:checkbox	$(":checkbox")
:submit	$(":submit")
:image	$(":image")
:reset	$(":reset")
:button	$(":button")
:file	$(":file")

表单对象属性

属性	操作
:enabled	$(“input:enabled”)
:disabled	$(“input:enabled”)
:checked	$(“input:enabled”)
:selected	$(“select option:selected”)

CSS

css(属性，值)
css({})；多个属性值赋值
$("p").css("color");取得第一个段落的color样式属性的值。
$("p").css({ "color": "#ff0011", "background": "blue" });
$("p").css("color","red");

hover(over,out)

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("out");
  }
);

事件

blur(function(){})   focus()
change() click() dblclick()
keydown() keyup()
mouseover() mouseout() mousemove() mousedown() mouseup()

on

第二种创建事件

$("form").on("submit", function(event) {
  event.preventDefault();
});

event

eve.pageX 鼠标的left
eve.pageY 鼠标的top
eve.target == this 通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的
eve.stopPropagation(); 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

遍历

效果函数

slideup slidedown fadeout fadein show hide animate

attr() 自定义属性

获取属性值：attr(" ");设置属性：attr("属性","属性值")；
移出属性值：removeattr("属性");
自定义属性。获取标签中显式出现的属性和自定义的属性。

prop()

获取属性和设置属性，能获取标签中所有的属性和设置属性
获取属性值：prop(" ");设置属性：prop("属性","属性值")；
removeprop("属性")

CSS类

addClass("类")；
removeClass("类")；

html()

获取：html(); 传值：html("值")；
获取标签里面的所有的内容，包括标签。

text()

获取：text(); 传值：text("值")；
获取标签中的所有的文本（文本节点里的内容）。

val()

返回或者设置表单的值

效果

show() 显示 show(毫秒)
hide() 隐藏  hide(毫秒)
slideDown()向下展开 slideDown(毫秒)
slideUp() 向上收起 slideUp(毫秒)
fadeIn(毫秒) 淡入
fadeOut(毫秒)淡出
animate({属性：属性值，...},毫秒) 动画

 $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );

筛选 函数

.eq(index)
.first()
.last()
hasClass()

查找

siblings() 同级元素   siblings("条件")
next()
prev()
parent()直接父类元素
children()直接子类元素