JQ 选择器的了解与使用

121 阅读1分钟
//并集[选择器](https://so.csdn.net/so/search?q=%E9%80%89%E6%8B%A9%E5%99%A8&spm=1001.2101.3001.7020)。使用“,”区分开\
                $("th,td").css("border", "blue double 3px");\
                //交集选择器。直接把多个选择器连接在一起\
                //$("input.txtBox#userName").css("border", "black none 0px").css("background-color", "lightgreen");\
                $("input.txtBox").css("border", "black none 0px").css("background-color", "lightgreen");\
                //全局选择器。使用"*"表示选择页面上所有的元素\
                $("*").css("font", "微软雅黑").css("font-size", "11pt");\
                //网站上常用的字体:\
                //正文:宋体9pt,宋体10pt\
                //标题:微软雅黑10pt,微软雅黑11pt\
                //后代选择器。选择的是子元素,使用“ ”(空格)隔开\
                $("tr th").css("background-color", "lightcyan");\
                //子选择器。选择的是子元素,使用“>”隔开\
                $("tr>th").css("background-color", "lightcyan");\
                //相邻选择器。选择的是相邻的一个元素,使用“+”隔开\
                $("#item1+li").css("color", "green");\
                //同辈选择器。选择的是同一级别的元素,使用“~”隔开\
                $("#item1+li~li").css("font-weight", "bold");\
                //属性选择器。\
                $("input[type='submit']").css("background-color", "red").css("color", "white");\
                $("[id^='user']").css("font-size","20pt"

总的来说 除了写法 jq选择器的使用与css3类似

addClass妙用 addClass可以直接加载Css样式

$('p').addClass('img')  //将类名为img的样式加载所选择的p标签上

ready和onload

window.onload = function (){}的方式必须等待网页中所有的内容加载完毕后(包括图片、flash、视频等)才能执行且同一页面不能多次编写
 $(document).ready(function () {}网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、flash、视频等)并没有加载完编写个数的方式且同一页面能同时编写多个