jquery常用的选择器

1、结构

$('选择器')

$('选择器 上下文')

2、选择器

1）元素选择器

$('#demo')：选取所有 id="demo" 的元素

$('a')：选择所有a元素

$(this)： 当前 HTML 元素

2）属性选择器

$("[href]") ：选取所有带有 href 属性的 元素

$("[href='#']") ：选取所有带有 href 值等于 "#" 的 元素

$("[href!='#']") ：选取所有带有 href 值不等于 "#" 的 元素

$("[href$='.jpg']")： 选取所有 href 值以 ".jpg" 结尾的 元素

$('li:first').css('background','red')

$('input[type="text"]')：表单type=text的 元素

$('input:text')：表单type=text的 元素

$(':text')：表单type=text的 元素

$(':radio')：表单type=radio的 元素

$(':checkbox')：表单type=checkbox的 元素

$(':file')：表单type=file的 元素

$(":enabled")：所有激活的 input 元素

$(":disabled")：所有禁用的 input 元素

$(":selected")：所有被选取的 input 元素

$(":checked")：所有被选中的 input 元素

$('input[name^=playerType-]')：选出name包含playerType-]的元素

$('div[id^=history-]')：选出id包含history-的元素

$(this).parent().find('a')：父元素下所有a的元素

$('p :parent')：父元素

$('td:contains(" 女 ")')：选出内容是女的元素

$('li:first')：首个元素

$('li:eq(2)')：第3个 元素

$('li:gt(2)')：大于3的所有元素

$('li:lt(2)')：小于3所有元素

$("p:last")：最后一个元素

$('li:odd')：奇数元素

$("tr:even")：偶数元素

3）CSS 选择器

$('div')：选择所有div元素

$('p') ：选择所有p元素

$('.demo')：选取所有 class="demo" 的元素

3、赋值

$(this).attr('属性名','动态值') ：针对所有

$(this).val('动态值')：input :text赋值

$('input[name="type"][value="值"]').attr("checked",true)：radio、checkbox赋值选中

4、下拉框change事件

$('body').on('change','select[name="xxx"]',function() {console.log($(this).val());}});

5、动态页面绘画

html模板

动态页面在页面绘画模板，js数据填充，用replace替换

{{}} -> 动态值 ，适用单个替换  templet.replace('{{name}}',newName);

#id -> 动态值 ，适用多个替换，用正则 templet.replace(/#id/g,newName);

var tableTemplet=$('#app-type-templet').html();

var tbodyTemplet=$('#app-type-templettbody').html();

var checkBoxTemplet=$('#app-type-templettbody#td-templet').html();

var html=tableTemplet.replace(tbodyTemplet,'{{tbody}}');

var tbody , tbodyHtml=tbodyTemplet.replace(checkBoxTemplet,'{{app}}');

var serie = tbodyHtml.replace('{{appType}}',serie.name).replace('{{app}}','内容');

$('#app-types').append(html.replace('{{tbody}}',tbody));