java知识总结-18

Posted 2020-09-28

语法规则
$(selector).function()
$.function()

 

JQuery 选择
${"selector"}
* 选择器---表示所有的元素
多个选择器可以用“,” 分割

基本选择器 tag #id .classname
属性选择器 [attribute = / != /^= / $= / *=(包含) value] [选择器2]
层级选择器 > (父元素下的所有子元素) + next 元素） ~ 之后的所有元素
伪类选择器 :first :last :not(selector) :even(偶数) :odd(奇数) :eq(index) :gt :lt
:contains()--包含 :empty(空的) :has（内容包含） :par :hid :va
子元素选择器 :first-chile :last-child :nth-child(index) --值可以填入 even odd 3n 2 3n+1 ......
表单选择器 :input :text 等表单的标签元素
表单属性选择器 :enabled :disabled

筛选(选择器选完以后操作) eq() first() last() hasClass()---返回布尔类型
map() --把原来的数组映射为另一个数组，有funcation 决定

查找 var p = $("div").find("p[class=‘strong‘]) 可以多次使用选择器
.children() --所有的子元素（不考虑后代元素）
。parents("div") --所有的先辈元素（不含根元素）中的所有div 元素
串联 $(‘a‘).add(‘div‘)
.add("span") --在原来基础上再添加第二个选择器选择的内容
.end() --把结果恢复到最近的一个破坏性操作之前，如果没有则返回空集合
.children() --所有的子元素（不考虑后代元素）

 

jquery语法
$(选择器).操作;
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落 把标签当做选择器
$("p .test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素

jquery没有以名字选择器,
jquery对象是数组
end（） 在链式语法中可以恢复之前的方法对数组的破坏，回到之前的状态

因为jquery 对象不能使用dom 的属性，所以需要把jquery 对象转换为 dom 对象
$（domobject） -> jqueryobject 该操作得到jQuery 对象
$(xxx).get(0) / $(xxx)[0] -> domobject 该操作得到 dom 对象
$(xxx).eq() 得到的是jquery对象

 

 

addClass() --为标签增加一个class 例如：calss="a b c d"

 

文件就绪事件
$(document).ready(function(){
// 开始写 jQuery 代码.，防止网页还没有加载完就获取元素

});

选择器例子
-----------------------------
$("p") 元素选择器 ---选择所有的<p>标签
$("button").click(function(){
$("p").hide();
});
}); //选择所有段落并重写 click 事件
------------------------------
$("#test") ID选择器 ---通过Id选择元素
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
------------------------------
$(".test") class选择器 ---通过 class 选择元素
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
---------------------------------
其他高级用法
$("tr:even") 选取偶数位置的 <tr> 元素
$("*") 选取所有元素
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 选取带有 href 属性的元素
$("a[target!=‘_blank‘]") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素

 

 

操作元素：

改变属性：
文本：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记） 只对第一个得到的元素生效
val() - 设置或返回表单字段的值

css:
.css() --改变css 属性
.toggleClass() --切换class （在选择的基础上把没有的加上class,有的去掉）

标签属性：
.attr() --改变属性
.prop() --当值是布尔型时这个方法设置
removeProp（‘name‘） --删除每个name属性

添加删除元素
内部插入
append() - 在被选元素的结尾插入对象
appendTo() - 在被选元素的首部插入对象
prepend() - 在被选元素的开头插入内容
外部插入
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
insertBefault()
insertAfter()
包裹：
wrap() ---包裹
unwrap() ---移除包裹
替换：
replaceWith() --替换内容
replaceAll() --用匹配的元素替换到元素

 

带回调函数的设置
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
----------------------
attr() 方法用于获取/设置属性值。
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3cschool.cn/jquery",
"title" : "W3Schools jQuery Tutorial"
});
});// 设置属性
attr("name") --获取值
attr(‘name‘,‘a‘) --设置值

例子：
$("p").append("Some appended text.");
删除元素：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素 不会删除该元素
$("#div1").remove();

 

jQuery封装的ajax
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
示例：
$("#div1").load("demo_test.txt"); 文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中
-----------------------------
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
例子：
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
}); //通过ajax 取得从服务器上的一个文件中取回数据：
********************
$.post(URL,data,callback,type);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
可选的 type 代表如何处理返回的数据 会自动识别
例子：
$("button").click(function(){
$.post("demo_test_post.html",
//URL
{ name:"Donald Duck", city:"Duckburg" },
//数据
function(data,status){
alert("Data: " + data + "nStatus: " + status);
}
//执行的回调函数 也可以是其他函数名字
);
});

 

事件名称：
网页事件：click dblclick mouseenter mouseleave
鼠标事件：keypress keydown keyup
表单事件：submit change focus blur
文档/窗口事件 ：load resize scroll unload（等图片等加载完） ready（不等图片加载） 页面加载完毕事件

$(‘p‘).on(‘click‘,function(){}) --添加事件
$([‘p‘).one(****) --添加一个一次性事件
triggerhander 不会出发浏览器默认事件 不会产生事件冒泡

效果方法：
fadeIn() ---用于淡入已隐藏的元素。 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。. callback 参数是 fading 完成后所执行的函数名称。
fadeOut() ---- 方法用于淡出可见元素。 可选参数同上
fadeToggle() ----如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。 可选参数同上
fadeTo() ----如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果 必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。