python--jQuery,,一、jQuery介绍
python--jQuery,,一、jQuery介绍
一、jQuery介绍
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,
即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。
jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
二、jQuery对象
Query对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法: $(“#test”).html();
$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法 这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML; 虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错 约定:如果获取的是 jQuery 对象, 那么要在变量前面加上$. var $variable = jQuery 对象var variable = DOM 对象$variable[0]:jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
三、寻找元素
3.1基本选择器
$(
"*"
)所有的 $(
"#id"
)想对应ID $(
".class"
)对应的集合 $(
"element"
)对应的元素 $(
".class,p,div"
)对应集合下面的
3.2层级选择器
$(
".outer div"
)子选择器 $(
".outer>div"
)下选择器 $(
".outer+div"
) $(
".outer~div"
)
3.3基本选择器
$(
"li:first"
)第一个 $(
"li:eq(2)"
)eq后面想选择几个写几 $(
"li:even"
)等级$(
"li:gt(1)"
)
3.4熟悉选择器
$(
‘[id="div1"]‘
) $(
‘["alex="sb"][id]‘
)
3.5表单选择器
$(
"[type=‘text‘]"
)
-
-
-
-
-
>$(
":text"
) 注意只适用于
input
标签 : $(
"input:checked"
)
例:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.1.1.js"></script></head><body><div egon="dog" alex="dog2">egon</div><div egon="dog">egon</div><div class="outer"> <div class="c2"> <div class="c3" id="d3">DIV</div> </div> <p id="d2" class="c3">PPPPPPP</p></div><input type="text"><div> <p class="c1">p1</p> <p class="c1" id="d1">p2</p> <p class="c1">p3</p> <p class="c1">p4</p> <p class="c1">p5</p> <p class="c1" id="p6">p6</p></div><div> <p>12321</p></div><p class="c1"> p7</p><script> // 基本选择器 $("#d1").css("color",‘red‘) //$(".c1").css("color",‘red‘) //$("p").css("color",‘green‘) // $("#d1,div").css("color",‘green‘) // 组合选择器 // $(".outer .c3").css("color",‘red‘) // 筛选器 // $(".c1:first").css("color",‘red‘) // $(".c1:last").css("color",‘red‘) // $(".c1:eq(i)").css("color",‘red‘); // $(".c1:gt(1)").css("color",‘red‘) // 属性选择器 // $("[egon=‘dog‘][alex]").css("color",‘red‘) // 表单选择器 :只适用于表单标签 // $("[type=‘text‘]").val("hello") // $(":text").val("hello") // 筛选器 // var i=3; // $(".c1").eq(i).css("color",‘red‘) // console.log($("#d1").hasClass("c1")) // true // 查找筛选器 // 向下查找 //$("#d1").nextAll().css("color",‘red‘) //$("#d1").next().css("color",‘red‘) //$("#d1").nextUntil("#p6").css("color",‘red‘) // 向上查找 // $("#p5").prev(); // $("div").prevAll(); // $("div").prevUntil() // 查找所有的兄弟标签 // $("#d1").siblings().css("color",‘red‘) // find :找后代 children:找儿子 // console.log($(".outer").children().length) ;// 2 // $(".outer").children(".c3").css("color","red") // console.log($(".outer").find()); // // $(".outer").find(".c3").css("color","red") // 找父标签// $("#d3").parent().parent();// $("#d3").parents();// $("#d3").parentsUntil(".outer")</script></body></html>
3.6 表单属性选择器
:enabled :disabled :checked :selected
3.7 筛选器
过滤器$(
"li"
).eq(
2
) $(
"li"
).first() $(
"ul li"
).hasclass(
"test"
)
查找筛选器
查找子标签: $("div").children(".test") $("div").find(".test") 向下查找兄弟标签: $(".test").next() $(".test").nextAll()
$(".test").nextUntil() 向上查找兄弟标签: $("div").prev() $("div").prevAll()
$("div").prevUntil() 查找所有兄弟标签: $("div").siblings()
查找父标签: $(".test").parent() $(".test").parents()
$(".test").parentUntil()
上图中的代码有实例。
四、操作元素(熟悉,css,文档处理)
4.1 事件
页面载入
ready(fn)
// 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){}) 事件绑定//语法: 标签对象.事件(函数) eg: $("p").click(function(){})
事件委派
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
<script> window.onload=function () { var ele=document.getElementsByClassName("c1")[0]; alert(ele) } ; </script></head><body><div class="c1">DIV</div></body>
事件切换
hover事件:
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
4.2属性操作
--------------------------CSS类$("").addClass(class|fn)$("").removeClass([class|fn])--------------------------属性$("").attr();$("").removeAttr();$("").prop();$("").removeProp();--------------------------HTML代码/文本/值$("").html([val|fn])$("").text([val|fn])$("").val([val|fn|arr])---------------------------$("#c1").css({"color":"red","fontSize":"35px"})
attr方法使用。
<input id="chk1" type="checkbox" />是否可见<input id="chk2" type="checkbox" checked="checked" />是否可见<script>//对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。//对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。//像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此//需要使用prop方法去操作才能获得正确的结果。// $("#chk1").attr("checked")// undefined// $("#chk1").prop("checked")// false// ---------手动选中的时候attr()获得到没有意义的undefined-----------// $("#chk1").attr("checked")// undefined// $("#chk1").prop("checked")// true console.log($("#chk1").prop("checked"));//false console.log($("#chk2").prop("checked"));//true console.log($("#chk1").attr("checked"));//undefined console.log($("#chk2").attr("checked"));//checked</script>
4.3each循环
jquery支持两种循环方式:
方式一。
格式:$.each(obj,fn)li=[10,20,30,40];dic={name:"yuan",sex:"male"};$.each(li,function(i,x){ console.log(i,x)});
方式二。
格式:$("").each(fn)$("tr").each(function(){ console.log($(this).html())})
其中,$(this)代指当前循环标签
4.4文档节点处理
//创建一个标签对象 $("<p>")//内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>"); $("").appendTo(content) ----->$("p").appendTo("div"); $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>"); $("").prependTo(content) ----->$("p").prependTo("#foo");//外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>"); $("").before(content|fn) ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo");//替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");//删除 $("").empty() $("").remove([expr])//复制 $("").clone([Even[,deepEven]])
python--jQuery
相关内容
- python函数2(返回值、传递列表...),,python函数2(
- 2018.10.11python学习第十七天,,模块1.模块是什么?
- Python教程5,,Python教程5
- python-程序流程图,,程序流程图1、流程图
- python学习_18,,字典字典是无序的字典
- python学习-pytest(四)-Pytest集成Allure生成测试报告,,
- Python scipy.sparse矩阵使用方法,,本文以csr_mat
- python nose测试框架全面介绍五--attr介绍,,之前写了一系
- [Python3 练习] 003 货币转换,,题目:货币转换(1)
- Python 百分比计算,,遇到计算百分比的情况
评论关闭